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.

Trước tiên mình xin cảm ơn tất cả khách hàng đã luôn tin tưởng và ủng hộ mình trong suốt thời gian qua (2016 tới hiện tại).

Nhằm nâng cao chất lượng phục vụ Quý khách hàng và hoàn thiện chất lượng như hỗ trợ, template. Hôm nay ngày 04/2/2021 mình là Hòa Trần admin trang Giaodien.blog sẽ tiến hành mở một trang Feedback để khách hàng đã mua, sử dụng dịch vụ bên mình toàn quyền nhận xét đánh giá công khai ở trang này.

Từ những Feedback này những gì mình làm được và chưa làm được, từ đó mình sẽ rút ra được những kinh nghiệm, và hoàn thiện tốt dịch vụ bên mình.

Quý khách hàng có thể để lại nhận xét reviews tại trang Feedback

Tags: Blog