HOME ABOUT CONTACT SITEMAP
Category
This site uses cookies for analytics, personalized content and ads. By continuing to browse this site, you agree to this use.
Author Image Tuesday, 4 September 2018

Blogger JSON Feed API - Related Post when Scroll


Related Post when Scroll là một tiện ích khá hay được build bằng cách lấy dữ liệu từ feed api, sử dụng jQuery + css để tạo slide chuyển bài viết, bắt sự kiện người dùng cuộn trang để hiển thị

Xem demo

demo

Cách thức hoạt động rất đơn giản thôi, đó là sẽ get dữ liệu từ feed post label append vào mã HTML, sử dụng css + js để hiển thị box khi người dùng cuộn trang

Bài viết sử dụng font awesome 4

Trước tiên bạn cần xác định template của mình đang có widget Blog1 v1 hay Blog1 v2.

Viết CSS

#rt-related {
     line-height: normal;
     width: 350px;
     overflow: hidden;
     height: 195px;
     position: fixed;
     bottom: 20px;
     right: 0;
     background: #fff;
     box-shadow: 0px 6px 35px -6px rgba(168, 165, 168, .7);
     -webkit-transition: all .5s;
     -moz-transition: all .5s;
     -ms-transition: all .5s;
     -o-transition: all .5s;
     transition: all .5s;
     -webkit-transform: translateX(400px);
     -moz-transform: translateX(400px);
     -ms-transform: translateX(400px);
     -o-transform: translateX(400px);
     transform: translateX(400px);
 }

 #rt-related.show {
     -webkit-transform: translateX(0);
     -moz-transform: translateX(0);
     -ms-transform: translateX(0);
     -o-transform: translateX(0);
     transform: translateX(0);
 }

 #rt-related.hide {
     -webkit-transform: translateX(400px);
     -moz-transform: translateX(400px);
     -ms-transform: translateX(400px);
     -o-transform: translateX(400px);
     transform: translateX(400px);
 }

 #rt-related .rt-header {
     padding: 11px 15px;
     border-bottom: 1px solid #eee;
 }

 #rt-related .rt-header .rt-title {
     text-transform: uppercase;
     font-weight: bold;
 }

 #rt-related .rt-header .rt-close {
     display: inline-block;
     position: absolute;
     top: 0;
     right: 0;
     padding: 11px 15px;
     background: #ececec;
     cursor: pointer;
 }

 #rt-related .rt-header .rt-close:hover,
 #rt-related .rt-navigation a:hover {
     background: #ccc;
     -webkit-transition: .25s ease;
     -moz-transition: .25s ease;
     -ms-transition: .25s ease;
     -o-transition: .25s ease;
     transition: .25s ease;
 }

 #rt-related .rt-item {
     padding: 15px 15px 10px;
     width: 320px;
     float: left;
 }

 #rt-related .rt-list {
     overflow: hidden;
     width: 600px;
     transition: all 0.5s;
 }

 #rt-related .rt-thumb img {
     height: 85px;
     float: left;
     width: 130px;
     margin-right: 10px;
     border-radius: 4px;
 }

 #rt-related .rt-info a {
     text-decoration: none;
     color: #000;
     font-size: 15px;
     font-weight: bold;
     font-family: "roboto", sans-serif;
     -webkit-line-clamp: 3;
     overflow: hidden;
     max-height: 60px;
     display: -webkit-box;
     -webkit-box-orient: vertical;
     margin-bottom: 10px;
 }

 #rt-related .rt-info .rt-author {
     font-size: 13px;
 }

 #rt-related .rt-info .rt-author::before {
     font-family: fontawesome;
     content: "\f2be";
     margin-right: 5px;
 }

 #rt-related .rt-navigation {
     margin: 5px 0 0;
     padding: 0 15px;
     text-align: right;
 }

 #rt-related .rt-navigation .rt-left,
 #rt-related .rt-navigation .rt-right {
     display: inline-block;
 }

 #rt-related .rt-navigation a {
     border: 1px solid #ddd;
     margin-right: 8px;
     font-size: 10px;
     border-radius: 100%;
     cursor: pointer
 }

 #rt-related .rt-navigation .rt-left a {
     padding: 5px 9px 5px 7px;
 }

 #rt-related .rt-navigation .rt-right a {
     padding: 5px 7px 5px 9px;
 }

Đặt code js sau nằm trong widget Blog1, thường là cuối author box hoặc share box

* Blog1 v1

<script type='text/javascript'>
$(window).on('load', function() {
    // xml code Blog1 v1
    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>]; // tạo 1 mảng lưu các label widget Blog1 v1
    //<![CDATA[
    var numPost = 5; // số bài muốn hiển thị
    var scr = 500 ; // hiện box bài viết liên quan khi cuộn trang vượt quá con số này

    var c, d;

    c = '<div id="rt-related"><div class="rt-header"><div class="rt-title">Related Posts</div><div class="rt-close"><a class="close"><i class="fa fa-times"></i></a></div></div><div class="rt-list">';

    // đảo lộn mảng để lấy 1 label bất kì
    if (labelArray.length) {
        var j, x, i;
        for (i = labelArray.length - 1; i > 0; i--) {
            j = Math.floor(Math.random() * (i + 1));
            x = labelArray[i];
            labelArray[i] = labelArray[j];
            labelArray[j] = x;
        }
        d = labelArray[0]
    };
    // ajax get dữ liệu và append vào mã HTML
    $.ajax({
        type: "GET",
        url: "/feeds/posts/summary/-/" + d,
        dataType: "jsonp",
        data: {
            "max-results": numPost,
            "alt": "json-in-script"
        },
        success: function(json) {
            if (json.feed.entry) {
                for (var i = 0; i < json.feed.entry.length; i++) {
                    var k = json.feed.entry[i].title.$t,
                        l = json.feed.entry[i].author[0].name.$t;
                    for (var j = 0; j < json.feed.entry[i].link.length; j++) {
                        if ("alternate" == json.feed.entry[i].link[j].rel) {
                            var m = json.feed.entry[i].link[j].href;
                            break
                        }
                    }
                    if (json.feed.entry[i].media$thumbnail) {
                        var g = json.feed.entry[i].media$thumbnail.url.replace("s72-c", "s1600");
                    } else {
                        var g = "https://3.bp.blogspot.com/-Yw8BIuvwoSQ/VsjkCIMoltI/AAAAAAAAC4c/s55PW6xEKn0/s1600-r/nth.png"
                    }
                    c += '<div class="rt-item"><div class="rt-thumb"><a href="' + m + '""><img src="' + g + '"></a></div><div class="rt-info"><a href="' + m + '">' + k + "</a><span class='rt-author'>" + l + "</span></div></div>"
                }
                c += '</div><div class="rt-navigation"><div class="rt-left"><a><i class="fa fa-chevron-left"></i></a></div><div class="rt-right"><a><i class="fa fa-chevron-right"></i></a></div></div>'
            }
            // get xong dữ liệu và append vào body
            $("body").append(c);

            $("#rt-related").each(function() {

                // tạo thanh menu điều hướng bài đăng theo css width và transform
                var b = $(this).find(".rt-list"),
                    e = 0,
                    f = 0,
                    g = true;

                // set width cho div main để hiển thị trên 1 dòng
                for (var h = 1; h < $(this).find(".rt-item").length; h++) {
                    e += $(this).find(".rt-item").outerWidth();
                }
                b.width(e + $(this).find(".rt-item").outerWidth());

                // button left
                $(this).find(".rt-left a").click(function(a) {
                    a.preventDefault()
                    if (f == 0) {
                        f = -e
                    } else {
                        f = f + 350
                    }
                    b.css("transform", "translateX(" + f + "px)")
                })

                // button right
                $(this).find(".rt-right a").click(function(a) {
                    a.preventDefault();
                    if (f == -e) {
                        f = 0
                    } else {
                        f = f - 350
                    }
                    b.css("transform", "translateX(" + f + "px)")
                })

                // button close
                $(this).find(".rt-close").click(function(a) {
                    a.preventDefault();
                    $("#rt-related").addClass('hide').removeClass('show');
                    g = false;
                })

                // bắt sự kiện cuộn trang để hiển thị box bài đăng liên quan
                $(window).scroll(function() {
                    if ($(window).scrollTop() > scr && g) {
                        $("#rt-related").addClass('show').removeClass('hide');
                    } else {
                        if ($(window).scrollTop() < scr && g) {
                            $("#rt-related").addClass('hide').removeClass('show');
                        }
                    }
                })
            })
        }
    })
});
//]]></script>

* Blog1 v2

<script type='text/javascript'>
$(window).on('load', function() {
    // xml code Blog1 v2
    var labelArray = [<b:if cond='data:post.labels'><b:loop index='i' values='data:post.labels' var='label'>&quot;<data:label.name/>&quot;<b:if cond='data:post.labels.size != data:i + 1'>,</b:if></b:loop></b:if>] // tạo 1 mảng lưu các label widget Blog1 v2

    //<![CDATA[
    var numPost = 5; // số bài muốn hiển thị
    var scr = 500 ; // hiện box bài viết liên quan khi cuộn trang vượt quá con số này

    var c, d;

    c = '<div id="rt-related"><div class="rt-header"><div class="rt-title">Related Posts</div><div class="rt-close"><a class="close"><i class="fa fa-times"></i></a></div></div><div class="rt-list">';

    // đảo lộn mảng để lấy 1 label bất kì
    if (labelArray.length) {
        var j, x, i;
        for (i = labelArray.length - 1; i > 0; i--) {
            j = Math.floor(Math.random() * (i + 1));
            x = labelArray[i];
            labelArray[i] = labelArray[j];
            labelArray[j] = x;
        }
        d = labelArray[0]
    };
    // ajax get dữ liệu và append vào mã HTML
    $.ajax({
        type: "GET",
        url: "/feeds/posts/summary/-/" + d,
        dataType: "jsonp",
        data: {
            "max-results": numPost,
            "alt": "json-in-script"
        },
        success: function(json) {
            if (json.feed.entry) {
                for (var i = 0; i < json.feed.entry.length; i++) {
                    var k = json.feed.entry[i].title.$t,
                        l = json.feed.entry[i].author[0].name.$t;
                    for (var j = 0; j < json.feed.entry[i].link.length; j++) {
                        if ("alternate" == json.feed.entry[i].link[j].rel) {
                            var m = json.feed.entry[i].link[j].href;
                            break
                        }
                    }
                    if (json.feed.entry[i].media$thumbnail) {
                        var g = json.feed.entry[i].media$thumbnail.url.replace("s72-c", "s1600");
                    } else {
                        var g = "https://3.bp.blogspot.com/-Yw8BIuvwoSQ/VsjkCIMoltI/AAAAAAAAC4c/s55PW6xEKn0/s1600-r/nth.png"
                    }
                    c += '<div class="rt-item"><div class="rt-thumb"><a href="' + m + '""><img src="' + g + '"></a></div><div class="rt-info"><a href="' + m + '">' + k + "</a><span class='rt-author'>" + l + "</span></div></div>"
                }
                c += '</div><div class="rt-navigation"><div class="rt-left"><a><i class="fa fa-chevron-left"></i></a></div><div class="rt-right"><a><i class="fa fa-chevron-right"></i></a></div></div>'
            }
            // get xong dữ liệu và append vào body
            $("body").append(c);

            $("#rt-related").each(function() {

                // tạo thanh menu điều hướng bài đăng theo css width và transform
                var b = $(this).find(".rt-list"),
                    e = 0,
                    f = 0,
                    g = true;

                // set width cho div main để hiển thị trên 1 dòng
                for (var h = 1; h < $(this).find(".rt-item").length; h++) {
                    e += $(this).find(".rt-item").outerWidth();
                }
                b.width(e + $(this).find(".rt-item").outerWidth());

                // button left
                $(this).find(".rt-left a").click(function(a) {
                    a.preventDefault()
                    if (f == 0) {
                        f = -e
                    } else {
                        f = f + 350
                    }
                    b.css("transform", "translateX(" + f + "px)")
                })

                // button right
                $(this).find(".rt-right a").click(function(a) {
                    a.preventDefault();
                    if (f == -e) {
                        f = 0
                    } else {
                        f = f - 350
                    }
                    b.css("transform", "translateX(" + f + "px)")
                })

                // button close
                $(this).find(".rt-close").click(function(a) {
                    a.preventDefault();
                    $("#rt-related").addClass('hide').removeClass('show');
                    g = false;
                })

                // bắt sự kiện cuộn trang để hiển thị box bài đăng liên quan
                $(window).scroll(function() {
                    if ($(window).scrollTop() > scr && g) {
                        $("#rt-related").addClass('show').removeClass('hide');
                    } else {
                        if ($(window).scrollTop() < scr && g) {
                            $("#rt-related").addClass('hide').removeClass('show');
                        }
                    }
                })
            })
        }
    })
});
//]]></script>

Lưu mẫu lại và vào 1 trang bài viết để kiểm tra kết quả

Lưu ý: có thể do ảnh hưởng của css từ template mà kết quả có chút lệch so với demo, đó là điều đương nhiên bạn tự fix nhé. Widget này chỉ nên hiển thị trên PC còn mobile thì nó hơi chiếm chỗ vì thế bạn nên cân nhắc css hiển thị nó sao cho hợp lý

Để lại bình luận nếu gặp khó khăn và chúc thành công !
Comments:
Bạn được tự do bày tỏ quan điểm nhưng nghiêm cấm spam
  • Chèn ảnh theo mẫu [img]link[/img]
  • Chèn video Youtube theo mẫu [youtube]link[/youtube]
  • Chèn code theo mẫu [pre]code[/pre]. Lưu ý: mã hóa code trước khi bình luận

  • Lò Bát Quái 9/04/2018 08:05:00 PM
    |$0
    Iam Binh Tran 9/05/2018 10:32:00 AM
    Tks nhé =)))))
    Please wait while i am loading Facebook SDK js