[Blogger] Slide Recent Post with thumbail ver 2

avatar

blogger59
178
27
blogger
An toàn
cập nhật
Thành viên quen thuộc
Thành viên quen thuộc

Bài viết :
59
Points :
178
Like :
27
blogger
An toàn
cập nhật
Sau ver 1 tại http://www.hotrofm.net/t330-blogger-code-slide-recent-post-with-thumbail-ver-1#1409
thì bạn có thể tham khảo thêm bản ver2 này mình tham khảo bố cục của xenforo.

Code:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style scoped='' type='text/css'>
ul.rcentsidehotrofm * {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}
ul.rcentsidehotrofm {
    font-size: 11px
}
ul.rcentsidehotrofm,
ul.rcentsidehotrofm li {
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative
}
ul.rcentsidehotrofm {
    width: 100%;
    height: 300px
}
ul.rcentsidehotrofm li {
    height: 40.5%;
    position: absolute;
    padding: 0;
    width: 49.5%;
    float: left;
    overflow: hidden;
    display: none
}
ul.rcentsidehotrofm li:nth-child(1),
ul.rcentsidehotrofm li:nth-child(2),
ul.rcentsidehotrofm li:nth-child(3),
ul.rcentsidehotrofm li:nth-child(4),
ul.rcentsidehotrofm li:nth-child(5) {
    display: block
}
ul.rcentsidehotrofm img {
    border: 0;
    width: 100%;
    height: auto
}
ul.rcentsidehotrofm li:nth-child(1) {
    width: 50%;
    height: 59.7%;
    margin: 0 0 2px;
    left: 0;
    top: 0
}
ul.rcentsidehotrofm li:nth-child(2) {
   width: 50%;
    height: 59.7%;
    margin: 0 0 2px;
    left: 50%;
    top: 0
}
ul.rcentsidehotrofm li:nth-child(3) {
    left: 0;
    top: 60%;
   width: 33.5%;
}
ul.rcentsidehotrofm li:nth-child(4) {
    left: 33.5%;
    top: 60%;
width: 33%;
}
ul.rcentsidehotrofm li:nth-child(5) {
    left: 67%;
    top: 60%;
width: 33%;
}
ul.rcentsidehotrofm .overlayx,
ul.rcentsidehotrofm li {
    transition: all .4s ease-in-out
}
ul.rcentsidehotrofm .overlayx {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;
    opacity: .6;
    background-image: url(http://1.bp.blogspot.com/-FtnGJHMcWH8/UIV3IE-aaJI/AAAAAAAAGHs/WvLypnWxg5A/s1600/linebg-fade.png);
    background-position: 50% 50%;
    background-repeat: repeat-x
}
ul.rcentsidehotrofm .overlayx,
ul.rcentsidehotrofm img {
    margin: 3px
}
ul.rcentsidehotrofm li:nth-child(1).overlayx {
    background-position: 50% 25%
}
ul.rcentsidehotrofm .overlayx:hover {
    opacity: .1
}
ul.rcentsidehotrofm h4 {
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;
    z-index: 2;
    color: #fff;
    font-weight: 700;
    margin: 0;
    padding: 10px;
    line-height: 1.5em;
    font-weight: normal;
    overflow: hidden;
    transition: all .3s
}
ul.rcentsidehotrofm li:hover h4 {
    bottom: 30px
}
ul.rcentsidehotrofm li:nth-child(1)h4,
ul.rcentsidehotrofm li:nth-child(4)h4 {
    font-size: 150%
}
ul.rcentsidehotrofm .label_text {
    position: absolute;
    bottom: 0;
    left: 20px;
    z-index: 2;
    color: #fff;
    font-size: 90%;
    opacity: 0;
    transition: all .3s
}
ul.rcentsidehotrofm li:hover .label_text {
    bottom: 20px;
    opacity: 1
}
ul.rcentsidehotrofm li:nth-child(2).autname,
ul.rcentsidehotrofm li:nth-child(3).autname {
    display: none
}
.buttons {
    margin: 5px 0 0
}
.buttons a {
    display: inline-block;
    text-indent: -9999px;
    width: 15px;
    height: 25px;
    position: relative
}
.buttons a::before {
    content: "";
    width: 0;
    height: 0;
    border-width: 8px 7px;
    border-style: solid;
    border-color: transparent #535353 transparent transparent;
    position: absolute;
    top: 50%;
    margin-top: -8px;
    margin-left: -10px;
    left: 50%
}
.buttons a.nextx::before {
    border-color: transparent transparent transparent #535353;
    margin-left: -3px
}
</style>
<div id='featuredpostside'/>
<script type='text/javascript'>
//<![CDATA[
function FeaturedPostSide(a) {
 (function(e) {
 var h = {
 blogURL: "",
 MaxPost: 5,
 idcontaint: "",
 ImageSize: 300,
 interval: 5000,
 autoplay: false,
 loadingClass: "loadingxx",
 pBlank: "http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif",
 MonthNames: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
 tagName: false
 };
 h = e.extend({}, h, a);
 var g = e(h.idcontaint);
 var d = h.MaxPost * 200;
 g.html('<div class="sliderx"><ul class="rcentsidehotrofm"></ul></div><div class="buttons"><a href="#" class="prevx">prev</a><a href="#" class="nextx">next</a></div>');
 var f = function(w) {
 var q, k, m, u, x, p, t, v, r, l = "",
 s = w.feed.entry;
 for(var o = 0; o < s.length; o++) {
 for(var n = 0; n < s[o].link.length; n++) {
 if(s[o].link[n].rel == "alternate") {
 q = s[o].link[n].href;
 break
 }
 }
 if("media$thumbnail" in s[o]) {
 u = s[o].media$thumbnail.url.replace(/\/s[0-9]+\-c/g, "/s" + h.ImageSize + "-c")
 } else {
 u = h.pBlank.replace(/\/s[0-9]+(\-c|\/)/, "/s" + h.ImageSize + "$1")
 }
 k = s[o].title.$t;
 r = s[o].published.$t.substring(0, 10);
 m = s[o].author[0].name.$t;
 x = r.substring(0, 4);
 p = r.substring(5, 7);
 t = r.substring(8, 10);
 v = h.MonthNames[parseInt(p, 10) - 1];
 l += '<li><a target="_blank" href="' + q + '"><div class="overlayx"></div><img class="random" src="' + u + '"/><h4>' + k + '</h4></a><div class="label_text"><span class="date"><span class="dd">' + t + '</span> <span class="dm">' + v + '</span> <span class="dy">' + x + '</span></span> <span class="autname">' + m + "</span></div></li>"
 }
 e("ul", g).append(l).addClass(h.loadingClass)
 };
 var c = function() {
 e(h.idcontaint + " .nextx").click()
 };
 var b = function() {
 e.get((h.blogURL === "" ? window.location.protocol + "//" + window.location.host : h.blogURL) + "/feeds/posts/summary" + (h.tagName === false ? "" : "/-/" + h.tagName) + "?max-results=" + h.MaxPost + "&orderby=published&alt=json-in-script", f, "jsonp");
 setTimeout(function() {
 e(h.idcontaint + " .prevx").click(function() {
 e(h.idcontaint + " .sliderx li:first").before(e(h.idcontaint + " .sliderx li:last"));
 return false
 });
 e(h.idcontaint + " .nextx").click(function() {
 e(h.idcontaint + " .sliderx li:last").after(e(h.idcontaint + " .sliderx li:first"));
 return false
 });
 if(h.autoplay) {
 var i = h.interval;
 var j = setInterval(c, i);
 e(h.idcontaint + " .sliderx li:first").before(e(h.idcontaint + " .sliderx li:last"));
 e(h.idcontaint + " .sliderx").hover(function() {
 clearInterval(j)
 }, function() {
 j = setInterval(c, i)
 })
 }
 e("ul", g).removeClass(h.loadingClass)
 }, d)
 };
 e(document).ready(b)
 })(jQuery)
};
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
FeaturedPostSide({
  blogURL: "http://blogger.blogspot.com/",
  MaxPost: 5,
  idcontaint: "#featuredpostside",
  ImageSize: 300,
  interval: 5000,
  autoplay: true,
  tagName: false
});
//]]>
</script>
</b:if>

tương tự code ver 1 bạn chỉ cần sửa lại đoạn
Code:
http://blogger.blogspot.com/

Tags: #blogger
 Trả lời bài viết
Điểm 4.6/5 dựa vào 87 đánh giá

Có Thể Bạn Quan Tâm

Đang tải...