Random posts dạng Featured ngoài trang chủ cho blogspot

Nhiều khi bạn muốn trang trí cho trang chủ của blog cho khỏi đơn điệu nhưng không muốn quá phức tạp vì phải show các chuyên mục.

Với việc sử dụng widget random post sau đây bạn vẫn có thể show các bài viết ngẫu nhiên từ các chuyên mục và gộp vào 1 tiện ích vừa gọn vừa nhẹ.

DEMO

Cài đặt Random posts dạng Featured

Bước 1

Thêm css vào trước thẻ ]]></b:skin>

#banner{position:relative;float:left;width:100%}
.randomposts a{color:#333}
.randomposts a:hover{color:#4aa02c}
.randomposts ul{margin:0;padding:0}
.randomposts ul li{float:left;padding:0 0 15px 0;margin:0 0 15px 0;border-bottom:1px dashed rgba(0,0,0,0.12);position:relative;list-style:none}
.randomposts ul li:last-child{border-bottom:none;padding:0}
.randomposts .post-thumb{float:left;height:95px;margin-right:15px;width:47%}
.randomposts img{height:100%;width:100%}
.randomposts .label-name{padding-bottom:5px;text-transform:uppercase;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.randomposts .label-name a{color:rgb(136,136,136);font-size:12px}
.randomposts .post-meta{padding:10px 0;font-size:15px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:none;color:#555!important}
.randomposts .post-date:before{content:'-';padding:0 5px}
.randomposts .post-title{white-space:unset}
.randomposts .post-title a{display:block;color:#333;font-size:14px}
.randomposts .post-title a:hover{color:#4aa02c}
.randomposts .post-snippet{font-size:15px;line-height:1.6em;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;display:none}
.loadposts.spinner:before{top:45%;left:45%}
.loadposts{position:relative;height:150px;clear:both}
#banner .randomposts{clear:both;background:#fff;margin-bottom:15px;float:left;width:100%;padding:15px 15px 0 15px;border:1px solid rgba(0,0,0,0.12);border-radius:0px}
#banner .randomposts.spinner:before{left:50%;top:50%}
#banner .randomposts ul{margin:0 -7.5px}
#banner ul li{margin:0;border:0;float:none;padding:0 7.5px 15px 7.5px;display:inline-block;width:25%;vertical-align:top;position:relative}
#banner ul li:nth-of-type(1),#banner ul li:nth-of-type(2),#banner ul li:nth-of-type(3){width:33.33%}
#banner ul li:last-child{padding:0 7.5px 15px 7.5px}
#banner .post-thumb{position:relative;float:none;height:150px;width:100%;margin:0;transition: .5s}
#banner ul li:nth-of-type(1) .post-thumb,#banner ul li:nth-of-type(2) .post-thumb,#banner ul li:nth-of-type(3) .post-thumb{height:215px}
#banner .post-title{-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;font:bold 16px Roboto,"Helvetica Neue",Helvetica,sans-serif;float:left;padding:15px 0 0 0;line-height:1.5}
#banner .post-label{display:block;position:absolute;left:10px;bottom:10px;padding:0 8px;border-radius:2px;background:rgba(0,0,0,.5);color:#ffffff;line-height:24px;font-size:14px}
#banner .post-label:after{content:unset;padding:0}
#banner .post-label a{color:#fff;font-size:12px}
.randomposts.spinner:before{left:45%;top:45%}
.randomposts.load{height:400px;width:100%;position:relative}

Bước 2

Thêm javascript vào trước thẻ </body>

<script>//<![CDATA[
    var rdp_numposts = 7;
    var rdp_snippet_length = 150;
    var rdp_current = [];
    var rdp_total_posts = 0;
    var rdp_current = new Array(rdp_numposts);
    $(document).ready(function() {
      $.ajax({
        type: 'GET',
        url: '/feeds/posts/summary',
        data: {
          'max-results': 0,
          'alt': 'json'
        },
        dataType: 'jsonp',
        success: function(a) {
          var rdp_total_posts = a.feed.openSearch$totalResults.$t
          function get_random() {
            var a = 1 + Math.round(Math.random() * (rdp_total_posts - 1))
            return a
          }
          function getvalue() {
            for (var b = 0; b < rdp_numposts; b++) {
              var d = false;
              var c = get_random();
              for (var a = 0; a < rdp_current.length; a++) {
                if (rdp_current[a] == c) {
                  d = true;
                  break
                }
              }
              if (d) {
                b--
              } else {
                rdp_current[b] = c
              }
            }
          }
          getvalue()
          for (var i = 0; i < rdp_numposts; i++) $('#HTML2').append('<script src="/feeds/posts/summary?alt=json-in-script&start-index=' + rdp_current[i] + '&max-results=1&callback=random_posts"><\/script>')
        }
      })
    })
    $.ajaxPrefilter(function( options, original_Options, jqXHR ) {
        options.async = true;
    })
    function random_posts(t) {
      a = location.href, y = a.indexOf("?m=0");
      for (var e = 0; e < t.feed.entry.length; e++) {
        var s = t.feed.entry[e],
          r = s.title.$t;
        if ("content" in s) var n = s.content.$t;
        else n = "summary" in s ? s.summary.$t : "";
        if ((n = n.replace(/<[^>]*>/g, "")).length < rdp_snippet_length);
        else {
          var i = (n = n.substring(0, rdp_snippet_length)).lastIndexOf(" ");
          n.substring(0, i)
        }
        for (var l = 0; l < s.category.length; l++) var p = s.category[l].term,
          o = "/search/label/" + p;
        if (p == "Du-lịch-châu-á") {
          p = p.replace("Du-lịch-châu-á", "Du lịch châu á");
        }
        if (p == "Du-lịch-châu-âu") {
          p = p.replace("Du-lịch-châu-âu", "Du lịch châu âu");
        }
        if (p == "Du-lịch-châu-mỹ") {
          p = p.replace("Du-lịch-châu-mỹ", "Du lịch châu mỹ");
        }
        if (p == "Du-lịch-miền-bắc") {
          p = p.replace("Du-lịch-miền-bắc", "Du lịch miền bắc");
        }
        if (p == "Du-lịch-miền-nam") {
          p = p.replace("Du-lịch-miền-nam", "Du lịch miền nam");
        }
        if (p == "Du-lịch-miền-trung") {
          p = p.replace("Du-lịch-miền-trung", "Du lịch miền trung");
        }
        if (p == "Du-lịch-tây-nguyên") {
          p = p.replace("Du-lịch-tây-nguyên", "Du lịch tây nguyên");
        }
        for (var d = 0; d < s.link.length; d++)
          if ("alternate" == s.link[d].rel) {
            var c = s.link[d].href; - 1 != y && (c += "?m=0");
            var f = s.published.$t;
            if ("media$thumbnail" in s) var m = s.media$thumbnail.url.replace("s72-c", "s320");
            else m = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfn8SEyqOOTP3LvFLiIFrtg4vE7xq1F6X27DUf-Svq23y9Mv7CpFobQmAvRGXGXnfV3oqsYQJl-3JUheixf1qeaAoBVUGWrtS4qMLynHjtN_3JWbKXXmEbbP0T2dwQ0aFBUSBEEC5N_wvr/s1600/safe_image.png";
            var w200 = s.media$thumbnail.url.replace("s72-c", "w200-h112-p-k-no-nu"),
              w320 = s.media$thumbnail.url.replace("s72-c", "w320-h180-p-k-no-nu"),
              w400 = s.media$thumbnail.url.replace("s72-c", "w400-h225-p-k-no-nu"),
              w640 = s.media$thumbnail.url.replace("s72-c", "w640-h360-p-k-no-nu"),
              w1600 = s.media$thumbnail.url.replace("s72-c", "w1600-h900-p-k-no-nu"),
              u = f.substring(8, 10) + " thag " + f.substring(5, 7) + ", " + f.substring(0, 4);
          }
        $('#random-posts').append('<li><div class="post-thumb"><a href=' + c + ' title="' + r + '"><img alt="' + r + '" src=' + m + '  sizes="(min-width: 954px) 842px, (min-width: 801px) calc(100vw - 112px), calc(100vw - 64px)" srcset="' + w200 + " 200w, " + w320 + " 312w, " + w400 + " 400w, " + w640 + " 640w, " + w1600 + ' 1600w"/></a><span class="post-label"><a href="' + o + '" title="' + p + '">' + p + '</a></span></div><h2 class="post-title"><a href=' + c + ' title="' + r + '">' + r + '</a></h2><div class="post-meta"><span class="label"><a href="' + o + '" title="' + p + '">' + p + '</a></span><span class="post-date">' + u + '</span></div><p class="post-snippet">' + n + '</p></li>')
        $('.randomposts').removeClass('spinner').removeClass('load')
      }
    }
//]]></script>

Trong đó

- Phần bôi vàng #HTML2 chỉ có tính chất minh họa để chờ bạn lấy ID widget ở bước 3 thay vào.
- Phần liệt kê các nhãn trong blog bạn thay cho phù hợp với blog của mình.
Ví dụ:
- Du-lịch-châu-á là tên nhãn (Chính xác)
- Du lịch châu á là tên nhãn khi hiển thị ra ngoài tiện ích random post.(Không cần chính xác, ghi tùy ý)
Nếu nhiều nhãn thì cứ thêm:

if (p == "Tên nhãn") {
          p = p.replace("Tên nhãn", "Tên nhãn hiển thị");
        }

Thêm vào trước: for (var d = 0; d < s.link.length; d++)

Bước 3

Thêm một tiện ích ngay sau header.
Bạn vào trong mẫu tìm thẻ đóng của phần header (nó nằm ngay trên thẻ mở của phần main) và thêm vào ngay sau nó đoạn HTML sau

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:section class='banner' id='banner' maxwidgets='1' showaddelement='yes'/>
<div style='clear:both;'/>
</b:if>

Sau đó quay ra phần bố cục tìm tiện ích có ID banner và tiến hành thêm 1 tiện ích HTML/javascript rồi dán code sau vào và ghi nhớ ID của tiện ích đó để thay vào phần bôi vàng của bước 2

<div class='randomposts spinner load'>
<ul id='random-posts'></ul>
</div>

Lưu ý

Blog cần có thư viện jequyry hỗ trợ nếu có rồi thì bỏ qua

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>

Nguồn:thachblog.com

Thủ thuật blogspot

Random posts dạng Featured ngoài trang chủ cho blogspot

Cài đặt Random posts dạng Featured

2 comments

Plus UI V3.1.0 - Responsive Blogger Template - Free Download

Cải thiện chỉ số PageSpeed Insights khi kết nối với Google adsense, analytics và facebook cho blogspot

Tạo khung chứa code sử dụng thẻ blockquote tự động copy trên blogspot

Tải về miễn phí mẫu blogger cao cấp Appiki - App Store không bản quyền chân trang

Cài đặt mật khẩu cho các bài viết riêng lẻ trên blogspot/blogger mới nhất

Thủ thuật blogspot®