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.

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.