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.

Bài viết: Hướng dẫn code tiện ích bài viết theo label được viết bởi admin trang Giaodien.blog

Vui lòng để lại nguồn nếu bạn chia sẻ lại bài viết này.

Để lại nguồn có nghĩa là bạn tôn trọng tác giả.

Động lực để mình chia sẻ nhiều bài viết hay.

Tags: Blog