Thêm recent posts theo label slider responsive cho blogspot với hiệu ứng nivo-slider

Với những template chia sẻ trên mạng hầu như đã được tích hợp đầy đủ các tính năng cũng như các tiện ích có thể nói là đã được trang bị,tích hợp tới tận răng và người tải về chỉ việc xài ko cần chỉnh sửa gì nhiều.

Nhưng cũng có người lại không thích template quá đầy đủ chức năng vì nhiều lý do và họ thích tự tích hợp theo ý mình có chọn lọc.

Dưới đây chia sẻ cách thêm recent posts theo label slider responsive cho blogspot với hiệu ứng nivo-slider đẹp như flash và đã tích hợp sắn chức năng responsive chỉ việc xài.

Lưu ý slider này chỉ đẹp với blog sử dụng ảnh đại diện trong bài đăng có chiều rộng tối thiểu từ 550px trở lên.Còn nếu đặt ở sidebar thì cỡ 300px là được.
Thêm recent posts theo label slider responsive cho blogspot với hiệu ứng nivo-slider

DEMO

Thêm recent posts theo label slider responsive cho blogspot với hiệu ứng nivo-slider

Để cài đặt tiện ích này các bạn cần qua các bước sau:

Bước 1

Thêm thư viện jquery nếu blog có rồi thì bỏ qua bước này.
Thêm vào trước thẻ </head>

<script async='async' src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'></script>

Bước 2

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

.nivoSlider,.top-l-slider .nivoSlider{width:100%;text-align:Center;overflow:hidden}
.nivo-box,.nivoSlider{overflow:hidden}
.nivoSlider{position:relative;height:300px}
.nivoSlider img{position:absolute;top:0;left:0;max-width:none;height:300px!important}
.top-l-slider .nivoSlider{position:relative;height:400px}
.top-l-slider .nivoSlider img{position:absolute;top:0;left:0;max-width:none;height:400px!important}
.nivo-main-image{display:block!important;position:relative!important;width:100%!important}
.nivoSlider a.nivo-imageLink{position:absolute;top:0;left:0;width:100%;height:100%;border:0;padding:0;margin:0;z-index:6;display:none;background:#fff;filter:alpha(opacity=0);opacity:0}
.nivo-box,.nivo-slice{z-index:5;position:absolute}
.nivo-box,.nivo-box img,.nivo-caption,.nivo-slice{display:block}
.nivo-slice{height:100%;top:0}
.nivo-caption{position:absolute;bottom:10px;left:5%;width:90%;text-align:center;font:400 26px 'segoe ui',sans-serif;z-index:8;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;color:#fff}
.nivo-caption p{text-align:Center;font:400 13px 'segoe ui',sans-serif;margin:10px 20px;padding:10px;display:inline-block;border-radius:4px;background:#222;line-height:21px;display:none}
.nivo-caption a{color:#ecf0f1}
.nivo-caption h3{text-align:center;padding:5px;display:block;border-radius:5px;margin:0;line-height:37px!important;background:rgba(0,0,0,0.70);font:400 30px 'segoe ui',sans-serif}
.nivo-caption .sliderdata{margin:10px;text-align:Center;color:#fff}
.nivo-html-caption{display:none}
.nivo-directionNav a{position:absolute;top:50%;margin-top:-15px;z-index:9;font-size:0;display:block;width:30px;height:30px;border-radius:5px;line-height:30px!important;background-color:rgba(255,255,255,.5);cursor:pointer;box-shadow:1px 1px 1px rgba(0,0,0,.4);-moz-box-shadow:1px 1px 1px rgba(0,0,0,.4);-webkit-box-shadow:1px 1px 1px rgba(0,0,0,.4)}
.nivo-prevNav{left:10px}
.nivo-nextNav:before,.nivo-prevNav:before{position:Absolute;left:0;top:0;color:#fff;height:30px;width:30px;text-align:center;z-index:100;display:block}
.nivo-prevNav:before{content:'\2190';font:400 20px sans-serif;line-height:30px!important}.nivo-nextNav:before{content:'\2192';font:400 20px sans-serif;line-height:30px!important}.nivo-nextNav{right:10px}
.nivo-controlNav{text-align:center;z-index:100;position:absolute;top:10px;right:10px;font-size:0}
.nivo-controlNav a{cursor:pointer;display:block;width:20px;height:20px;background:#222;float:right;border-radius:10px;margin-right:5px;display:none}
.nivo-controlNav a.active{background:#e74c3c}

Bước 3

Thêm javascript sau vào trước thẻ </head> hay thẻ </body> đều được.

<script src='https://rawgit.com/dautoblogger/bootstrap/master/reccent-post-follow-label-nivo-slider.js' type='text/javascript'></script>

<script type='text/javascript'>
  //<![CDATA[
  $(function () {
    $(".recent-slider").each(function () {
      $(this).append('<div id="slider"></div>');
      var e = $(this).attr("data-label"),
          n = "http://blogspotdtb.blogspot.com/feeds/posts/summary/-/" + e + "?max-results=" + 5 + "&alt=json-in-script",
          l = $(this);
      $.ajax({
        type: "GET",
        url: n,
        async: true,
        contentType: "application/json",
        dataType: "jsonp",
        success: function (s) {
          for (var r = 0; r < s.feed.entry.length; r++) {
            for (var n = s.feed.entry[r], i = 0; i < n.link.length; i++)
              if ("alternate" == n.link[i].rel) {
                var o = n.link[i].href;
                break
              }
            try {
              var c = n.media$thumbnail.url.replace("s72-c", "h300-w1200-no")
              } catch (p) {
                var c = "https://1.bp.blogspot.com/-eoyIDcMgknU/WDZOQD_2jCI/AAAAAAAACT0/1srLGmmIc-cZgDPTJHZOdWAjKEY4hrV6QCLcB/s1600/no-image.jpg"
                }
            var d = n.title.$t,
                u = n.summary.$t.substr(0, 180),
                h = '<a href="' + o + '"><img src="' + c + '" title="<a href=\'' + o + "'><h3>" + d + "</h3></a><p>" + u + '</p>"/></a>';
            l.find("#slider").append(h)
          }
          $("#slider").nivoSlider({
            effect: "random",
            pauseTime: 5e3
          })
        }
      })
    })
  });
  //]]>
</script>

Thay http://blogspotdtb.blogspot.com thành URL blog của bạn.

Bước 4

Tìm thẻ <div id='main-wrapper'> đặt ngay sau nó đoạn code sau

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:section class='main' id='mainslider' maxwidgets='1' showaddelement='no'>
<b:widget id='HTML61' locked='true' title='' type='HTML'/>
</b:section>
</b:if>

Lưu ý:

- Thẻ điều kiện là tiện ích chỉ xuất hiện tại trang chủ.
- HTML61 và mainslider: Cái này là id của tiện ích không được đặt trùng với id tiện ích đã có trước.

Bước 5

-Nhấn lưu mẫu.

Bước 6

Quay lại Phần tử Trang tìm tới phần Layout(Bố cục) bạn sẽ thấy 1 Wiget mới với id là mainslider ngay trên phần bài đăng trên blog, bạn bấm vào chỉnh sửa (Edit). Và thêm code sau vào nội dung tiện ích
<div class='recent-slider' data-label='LabelName'></div>

Thay LabelName thành nhãn mà bạn muốn trình chiếu.

Lưu tiện ích.

Bước 7

Hưởng thụ thành quả.
Nhận xét

Không có nhận xét nào :