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

Zalo 0971539681 Tư vấn & Hỗ trợ
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.

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


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.

Nhận xét

Đăng nhận xét

2 nhận xét
Hiển thị