×

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ẹ.

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

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

2 nhận xét:

  1. Cái này cả 1 lũ ăn theo cái phần Label >.<
    Cái đó việt hoá Label code gốc nó khác.
    https://toiblogtest.blogspot.com/

    Trả lờiXóa

Bạn có thể sử dụng biểu cảm yahoo

Ads in post custom

Ads in post custom1

Ads in post custom2

Ads in post custom3