Hướng dẫn code tiện ích bài viết theo label

Hướng dẫn code tiện ích bài viết theo label cho blogspot, bài viết hiển thị ở dạng list style number đẹp mắt và đơn giản.

Phù hợp với blog có thanh sidebar hoặc làm bài viết liên quan.

Các bước thực hiện như sau:

Đầu tiên các bạn thêm CSS

<style>

.numberlist{width:100%}

.numberlist ol{counter-reset:li;list-style:none;*list-style:decimal;font:15px 'trebuchet MS','lucida sans';padding:0;float:left;margin-left:10px}

.numberlist ol li{margin:0;padding:0;float:left;width:100%}

.numberlist a{position:relative;display:block;padding:.4em .4em .4em 2em;*padding:.4em;margin:.5em 0;background:#FFF;color:#444;text-decoration:none;-moz-border-radius:.3em;-webkit-border-radius:.3em;border-radius:.3em}

.numberlist a:hover{background:#cbe7f8;text-decoration:underline}

.numberlist a:before{content:counter(li);counter-increment:li;position:absolute;left:-1.3em;top:50%;margin-top:-1.3em;background:#87ceeb;height:3em;width:3em;line-height:2em;border:.3em solid #fff;text-align:center;font-weight:bold;-moz-border-radius:2em;-webkit-border-radius:2em;border-radius:2em;color:#FFF}

</style>

Tiếp thêm thêm HTML, các bạn vô bố cục thêm tiện ích HTML/JavaScript và dán HTML này vô và lưu lại.

<div class='giaodien-widget' style='background-color: #efefe9;'>

    <div class="numberlist">

        <ol>

        </ol>

    </div>

</div>

Tiếp theo là copy đoạn code Ajax dán trước thẻ </body> và lưu lại là xong.

<script>

    //<![CDATA[

    function getpost(e) {

        for (var i = 0; i < e.feed.entry.length; i++) {

            var entry = e.feed.entry[i];

            for (var t = 0; t < e.feed.entry[i].link.length; t++)

                if ("alternate" == e.feed.entry[i].link[t].rel) {

                    var a = e.feed.entry[i].link[t].href;

                    break

                }

            var r = e.feed.entry[i].title.$t,

                u = '<li><a href="' + a + '">' + r.substring(0, 45) + '</a></li>';

            $(".numberlist ol").append(u)

        }

    }

    window.addEventListener('load', function() {

        $.ajax({

            url: "/feeds/posts/default/-/Blog",

            type: "get",

            data: {

                alt: "json",

                "max-results": 5

            },

            dataType: "jsonp",

            jsonpCallback: "getpost"

        });

    })

    //]]>

</script>

Trong đó: Label là Blog và số vài là 5 và mình muốn nó hiển thị 1 hàng nên cắt chuỗi chỉ có 45 ký tự.

Có thể CSS nó không tương thích với một số blog thì các bạn có thể tự chỉnh thêm.

Bài sau mình sẽ hoàn chỉnh thêm hiệu ứng loading trong lúc chờ tải.

Hướng dẫn code tiện ích bài viết theo label được thiết kế đẹp hiện đại chuyên nghiệp chuẩn seo, tối ưu code giúp trang blogspot load nhanh

Chi tiết liên hệ ĐT / Zalo: 097 1539 681

Khi mua template các bạn được hỗ trợ cài đặt hoàn chỉnh, hỗ trợ qua Teamviewer, Ultraviewer

Tags: Blog