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://4.bp.blogspot.com/-00O66C-eBQs/W0IcokXSnOI/AAAAAAAAL_k/g4KtDm7SkQsoe7_G0vZ_C_nU0Gf_-kyVQCLcBGAs/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

Tạo tiện ích điều hướng breadcrumbs cho blogspot

Cải thiện và tăng tốc độ tải trang cho blogspot-Optimal speed for blogspot/website

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

Mẫu Blogger Glossy Mag 7 Full Slider Free

Mẫu blogger Plus UI v2.6.1 và Plus UI v2.6.2 - Không nhập key và mã hóa javascript

Thủ thuật blogspot®