Tiện ích giới thiệu bài liên quan dạng cửa sổ thụt thò khi cuộn trang sắp chia sẻ với mọi người sau đây nó hơi giống của Add This nhưng không phải cửa sổ bật lên mà nó dạng slider ra vào khi ta cuộn tới cuối trang bài viết, cũng có nút tắt.
Khi cuộn trang và chạm vào cuối trang, một hộp chứa các bài đăng liên quan sẽ xuất hiện từ phía bên phải của blog, nhưng khi cuộn lên một lần nữa, hộp sẽ ẩn lại.
Tiện ích giới thiệu bài liên quan dạng popup-slider khi cuộn trang với nhiều tùy chọn:
- Show được nhiều bài do chỉ định
- Tạm ẩn và cần có thể gọi lại
- Ẩn tiện ích và không gọi lại được nếu muốn xuất hiện lại phải F5.
- Đặt khoảng cách xuất hiện khi cuộn trang...
Mẹo nhỏ: Bạn Nên đặt tiện ích chỉ ở trang bài viết và chỉ xuất hiện khi truy cập bằng máy tính.
Cài đặt bài viết liên quan popup slider khi cuộn trang
Để cài đặt tiện ích Bài viết liên quan dạng popup slider khi cuộn trang các bạn cần thực hiện theo các bước sau:
Bước 1: Thêm CSS vào blog
- Đi tới Trang tổng quan Blogger
- Đi tới phần Chủ đề / Mẫu
- Nhấp vào Chỉnh sửa HTML
- Bây giờ sao chép mã css được cung cấp bên dưới và dán nó vào trong thẻ
</b:skin>
#related-box{width:350px;overflow:hidden;height:200px;position:fixed;bottom:20px;right:20px;background:#fff;box-shadow:2px 3px 0 rgba(0,0,0,0.29);transition:all 0.5s;z-index:999}
#related-box .header h2{font-size:12px;margin:0}
#related-box .header{padding:10px 15px;color:#fff;background:#00ABFF}
#related-box .tombol{position:absolute;top:10px;right:15px;cursor:pointer}
#related-box .item{padding:15px;width:320px;float:left}
#related-box .list{height:120px;overflow:hidden;width:600px;transition:all 0.5s}
#related-box .gambar img{height:100px;float:left;width:50%;margin-right:10px}
#related-box .header a{color:#fff}
#related-box .info{font-size:12px}
#related-box .navigation a{float:left;border:1px solid rgba(0,0,0,0.32);margin-left:10px;font-size:10px;width:20px;padding:5px}
#related-box .navigation{position:absolute;width:60px;right:20px;bottom:20px}
.relatedshow{position:fixed;bottom:190px;right:-50px;transition:all 0.5s}
.relatedshow a{color:#fff;background:#00ABFF;padding:5px 10px;font-weight:bold;box-shadow:2px 3px 0 rgba(0,0,0,0.29)}
Bước 2: Đặt đoạn javascript sau vào trước thẻ đóng
- Bây giờ Tìm kiếm thẻ
</body> - Bạn sao chép mã được cung cấp bên dưới và dán nó lên trên thẻ
</body>
<b:if cond='data:blog.isMobileRequest == "false"'>
<b:if cond='!data:view.isHomepage'>
<script>
var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>"<data:label.name/>"<b:if cond='data:label.isLast != "true"'>, </b:if></b:loop></b:if>];
var relatedbox = {
homepage : 'https://www.vozshare.com', // Thay đổi URL trang chủ blog
title: 'Có thể bạn thích', // Thay đổi tiêu đề tiện ích
post: 3, // Số bài viết
date: true, // Hiện thời gian đăng bài
scr: 500 // Hiển thị hộp liên quan nếu cuộn hơn 500
};
</script>
<script>
//<![CDATA[
! function() {
var a = {
homepage: "",
title: "Related Post",
post: 3,
date: !0,
scr: 500
};
if ("object" == typeof relatedbox)
for (var b in relatedbox) a[b] = relatedbox[b];
var c = '<div class="relatedshow" style="right: 0px;"><a href="#">+</a></div><div id="related-box" style="transform: translateX(400px);"><div class="header"><h2>' + a.title + '</h2><div class="tombol"><a href="#" class="close">x</a></div></div><div class="list">',
d = "object" == typeof labelArray && labelArray.length ? "/-/" + shuffle(labelArray)[0] : "",
f = 0;
$.ajax({
type: "GET",
url: a.homepage + "/feeds/posts/summary" + d + "?max-results=" + a.post + "&alt=json-in-script",
async: !0,
contentType: "application/json",
dataType: "jsonp",
success: function(b) {
var d = b.feed.entry;
if (d) {
for (var e = 0; e < d.length; e++) {
for (var g, h = d[e], i = 0; i < h.link.length; i++)
if ("alternate" == h.link[i].rel) {
var j = h.link[i].href;
break
} g = void 0 !== h.media$thumbnail ? h.media$thumbnail.url.replace("s72-c", "w" + f + "-h400-c") : "http://www.sdpb.org/s/photogallery/img/no-image-available.jpg";
var k = h.title.$t,
l = a.date ? h.published.$t.substr(0, 10) : "";
c += '<div class="item"><div class="gambar"><img src="' + g + '"></div><div class="info"><h3><a href="' + j + '">' + k + "</a></h3><span>" + l + "</span></div></div>"
}
var m = a.showcredit ? '<a href="">.</a>' : "";
c += '</div><div class="navigation"><div class="left"><a href="#"><i class="fa fa-chevron-left"></i></a></div><div class="right"><a href="#"><i class="fa fa-chevron-right"></i></a></div></div>' + m
}
$("body").append(c), $("#related-box").each(function() {
function i() {
$("#related-box").css({
transform: "translateX(400px)"
}), $(".relatedshow").css("right", 0)
}
function j() {
$("#related-box").css({
transform: "translateX(0)"
}), $(".relatedshow").css("right", "-50px")
}
for (var b = $(this).find(".list"), c = $(this).find(".left a"), d = $(this).find(".right a"), e = 0, f = 0, g = !0, h = 1; h < $(this).find(".item").length; h++) e += $(this).find(".item").outerWidth();
b.width(e + $(this).find(".item").outerWidth()), c.click(function(a) {
a.preventDefault(), 0 == f ? f = -e : f += 350, b.css("transform", "translateX(" + f + "px)")
}), d.click(function(a) {
a.preventDefault(), f == -e ? f = 0 : f -= 350, b.css("transform", "translateX(" + f + "px)")
}), $(".relatedshow").click(function(a) {
a.preventDefault(), j()
}), $(this).find(".close").click(function(a) {
a.preventDefault(), i(), g = !1
}), $(window).scroll(function() {
var b = $(window).scrollTop();
b > a.scr && g ? j() : b < a.scr && g && i()
})
})
}
})
}();
//]]>
</script>
</b:if>
</b:if> Lời Kết
Vậy là mình vừa chia sẻ với các bạn tiện ích Popup slider related posts khi cuộn trang cho blogger/blogspot, hy vọng bài viết này sẽ hữu ích với bạn. Nếu có thắc mắc gì hãy để lại bình luận phía bên dưới. Chúc các bạn thành công!
