[Blogger] Code Slide Recent Post with thumbail ver 1

  • blogger

    Code Slide Recent Post with thumbail




    Rất dễ hiểu thôi. code hiện thị 4 bài mới nhất của blogger hiện thị bằng 4 bức ảnh dạng slide thay đổi liên tục theo bố cục mình đã css lại để phù hợp với body của blog các bạn.

    Code Slide Recent Post with thumbail được mình chỉnh sửa lại từ code của arlinadzgn. Mình nghĩ là anh em sẽ có lúc cần đến nó.

    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) {
        display: block
    }
    ul.rcentsidehotrofm img {
        border: 0;
        width: 100%;
        height: auto
    }
    ul.rcentsidehotrofm li:nth-child(1) {
        width: 100%;
        height: 59.7%;
        margin: 0 0 2px;
        left: 0;
        top: 0
    }
    ul.rcentsidehotrofm li:nth-child(2) {
        left: 0;
        top: 60%;
       width: 33%;
    }
    ul.rcentsidehotrofm li:nth-child(3) {
        left: 33.5%;
        top: 60%;
    width: 33%;
    }
    ul.rcentsidehotrofm li:nth-child(4) {
        width: 100%;
        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: 4,
     idcontaint: "",
     ImageSize: 100,
     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: 4,
      idcontaint: "#featuredpostside",
      ImageSize: 300,
      interval: 5000,
      autoplay: true,
      tagName: false
    });
    //]]>
    </script>
    </b:if>


    Các bạn chỉ cần cho code vào chỗ cần hiện là dc rùi sửa lại đoạn
    Code:
    http://blogger.blogspot.com/
    thành blog của bạn

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