Popup slider related posts khi cuộn trang cho blogger/blogspot

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.

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 </body>

• 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 == &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://www.vozshare.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>

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!