[Blogger] Hướng dẫn tạo button random bài viết blogspot

Khi người dùng vào trang web của bạn như một thói quen nhưng không biết xem gì thì việc có 1 button bài viết ngẫu nhiên là rất hợp lý. Hãy cùng hung1001 tìm hiểu cách tạo button random bài viết blogspot trong bài viết này

Thông thường nút random bài viết thường được nằm trên thanh menu cho người dùng dễ quan sát vì thế code ở đây sẽ tập trung vào thẻ li.

Chuẩn bị

• Jquery
• FontAwesome

Bỏ qua 2 thứ trên nếu bạn đã tích hợp chúng. Tiếp theo hãy đăng nhập vào trang quản trị và vào mục chỉnh sửa HTML

Viết css

.random-post {position:relative;list-style:none}
.random-post a.rdn-icon{cursor:pointer;display:block}
.random-post a.rdn-icon:before{content:'\f074';font-family:FontAwesome;font-size:16px}

Đặt code HTML vào vị trí hiển thị trên thanh menu

<li class='random-post' title='Random post'><a class='rdn-icon'></a></li>

Cuối cùng dán đoạn code js sau trước thẻ đóng </body>

<script>//<![CDATA[
jQuery(document).ready(function (e) {
    e(".random-post").each(function () {
        e.ajax({
            url: "/feeds/posts/default?alt=json-in-script",
            type: "get",
            dataType: "jsonp",
            success: function (m) {
                m = m.feed.entry.length - 3, m = Math.floor(Math.random() * (m - 0 + 1)) + 0, 0 == m && (m = Math.floor(Math.random() * (m - 0 + 1)) + 1), m == 0 && (m == 1), e.ajax({
                    url: "/feeds/posts/default?alt=json-in-script&start-index=" + m + "&max-results=1",
                    type: "get",
                    dataType: "jsonp",
                    success: function (n) {
                        var p = "";
                        var q = "";
                        for (var i = 0; i < n.feed.entry.length; i++) {
                            for (var j = 0; j < n.feed.entry[i].link.length; j++) {
                                if (n.feed.entry[i].link[j].rel == "alternate") {
                                    p = n.feed.entry[i].link[j].href;
                                    break
                                }
                            };
                            q += "<a class=\"rdn-icon\" href=\"" + p + "\"></a>"
                        };
                        e(".random-post").html(q)
                    }
                })
            }
        })
    })
});
//]]></script>

Lưu mẫu và kiểm tra kết quả.

Với thủ thuật đơn giản nhưng rất hay này hi vọng sẽ giúp ích cho bạn trong quá trình hoàn thiện và phát triển blog. Chúc thành công !