[Blogger] Slide Recent Post with thumbail ver 2

  • blogger
    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

Thông tin tác giả
avatar
MEM LV2
Bài viết :
88
Points :
236
Like :
36
blogger
An toàn
Xem lý lịch thành viên
Bài viết liên quan
    Đang tải dữ liệu

Permissions in this forum:
Bạn không có quyền trả lời bài viết