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.
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 3Thêm javascript sau vào trước thẻ </head> hay thẻ </body> đều được.
<script src='https://cdn.staticaly.com/gh/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 = "https://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.
Trong đó:
max-results=" + 5 + " là ssoos lượng bài mới cần lấy bạn có thể thay đổi số lượng bằng cách thay đổi con số 5 theo ý bạn.
Lưu ý:
Nếu muốn chạy cho toàn blog thì sửa:
n = "https://blogspotdtb.blogspot.com/feeds/posts/summary/-/" + e + "?max-results=" + 5 + "&alt=json-in-script",
Thành:
n = "https://blogspotdtb.blogspot.com/feeds/posts/summary?max-results=" + 5 + "&alt=json-in-script",
Bước 7
Hưởng thụ thành quả.