Bài viết liên quan popup slider khi cuộn trang với nhiều tùy chọn

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

Nên đặt tiện ích này chỉ xuất hiện trên máy tính và chỉ ở trang bài viết.
Bài viết liên quan popup-slider khi cuộn trang với nhiều tùy chọn

DEMO

Cài đặt bài viết liên quan popup-slider khi cuộn trang với nhiều tùy chọn


Bước 1

Thêm css vào trong mẫu blog
#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 </body>
<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>
<b:if cond='!data:view.isHomepage'>
<script>
var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>&quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>, </b:if></b:loop></b:if>];
var relatedbox = {
homepage : &#39;https://dautonews.blogspot.com&#39;, // Thay đổi URL trang chủ blog
title: &#39;Có thể bạn thích&#39;, // 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>

Nếu muốn không hiện nút gọi có nghĩa nếu tắt muốn gọi lại phải F5 thì thêm
.relatedshow {display:none}

Vào trong css hoặc sửa lại .relatedshow có trong css.

Post a Comment

Previous Post Next Post