Cách thêm đánh giá 5 sao thay cho hệ thống bình luận Blogger

Thêm đánh giá 5 sao kèm bình luận cho Blogger, sử dụng HTML, CSS, JQuery. Blogger có rất nhiều hạn chế và đây là cách tốt nhất để thêm đánh giá 5 sao.
Duy 0 Nhận xét
Cách thêm đánh giá 5 sao thay cho hệ thống bình luận Blogger
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated

Bạn muốn có một hệ thống comment kèm theo đánh giá 5 sao giống như Wordpress, hãy theo dõi bài viết này. Bài viết này mình sẽ hướng dẫn các bạn cách thêm đánh giá 5 sao cho blogger.

Cách thêm đánh giá 5 sao thay cho hệ thống bình luận Blogger

Trước đây có khá nhiều bạn hỏi cách thêm đánh giá 5 sao như Blog của mình nhưng code mình bị mất và đã bị mã hoá nên mình cũng lười code lại tuy nhiên tiện ích đánh giá 5 sao của Blog mình còn khá nhiều hạn chế khi chỉ có thể đánh giá qua những click lựa chọn, còn trong bài viết này mình xin chia sẻ cho các bạn một hệ thống đánh giá 5 sao thay thế cho hệ thống bình luận Blogger.

Hệ thống đánh giá 5 sao này còn khá thủ công tất nhiên vì nhiều hạn chế của Blogger và mình thấy cách này có lẽ tối ưu nhất rồi, để thực hiện được theo bài viết này thì các bạn sẽ cần phải backup lại template của các bạn vì chúng ta sẽ thay thế toàn bộ hệ thống bình luận hiện tại của bạn bằng hệ thống đánh giá 5 sao kèm theo bình luận trong bài viết này.

Code này không phải do mình viết ra mình tìm thấy trong một template blogger của một ông nước ngoài mình cũng không nhớ tên, muốn tìm lại mà cũng chưa tìm được.

Code đánh giá 5 sao này sẽ không hiển thị kết quả trên Google nếu bạn muốn hiển thị đánh giá 5 sao trên Google các bạn có thể tham khảo qua bài viết sau của Google: Review snippet.

Các bạn có thể xem qua demo trước của thủ thuật này tại đây:

{getButton} $text={Preview} $icon={preview}

Cách thêm đánh giá 5 sao thay cho hệ thống bình luận Blogger

Đầu tiên thì bạn cần chắc chắn rằng template của bạn là phiên bản mới nhất với widget Blog1 version 2 và hệ thống bình luận version 2. {alertWarning}

Bước 1: Thêm 1 thẻ b:includable mới vào bên trong tiện ích Blog1.

<b:includable id='nldblogComments' var='post'>
    <div id='reviewSystem'>
        <div class='review_section_start'>
            <div class='widget_title'>Reviews</div>
            <div class='product_rating_data'>
                <div class='product_rating_left'>
                    <div class='product_rating_score'>
                        <div class='product_rating_score_info'>
                            <div class='product_rating_icon'>
                                <svg viewBox='0 0 24 24'>
                                    <path
                                        d='M23.25 9.53h-8.608L12 1.5 9.358 9.53H.75l7.041 4.94L5.05 22.5 12 17.524l6.951 4.976-2.747-8.03 7.046-4.94Z' />
                                </svg>
                            </div>
                            <div class='product_rating_score_count'>
                                <span>5.0</span>
                                <span>/5.0</span>
                            </div>
                        </div>
                        <div class='product_rating_noc'>
                            <data:post.numberOfComments /> review
                        </div>
                    </div>
                </div>
                <div class='product_rating_right'>
                    <ul>
                        <li class='progress_bar_5'>
                            <div class='progress_inner'>
                                <span>5</span>
                                <span><i /></span>
                            </div>
                        </li>
                        <li class='progress_bar_4'>
                            <div class='progress_inner'>
                                <span>4</span>
                                <span><i /></span>
                            </div>
                        </li>
                        <li class='progress_bar_3'>
                            <div class='progress_inner'>
                                <span>3</span>
                                <span><i /></span>
                            </div>
                        </li>
                        <li class='progress_bar_2'>
                            <div class='progress_inner'>
                                <span>2</span>
                                <span><i /></span>
                            </div>
                        </li>
                        <li class='progress_bar_1'>
                            <div class='progress_inner'>
                                <span>1</span>
                                <span><i /></span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class='review_section_end'>
            <div class='review_sort_section'>
                <div class='review_sort_star'>
                    <ul>
                        <li class='star_1'>
                            <svg viewBox='0 0 24 24'>
                                <path
                                    d='M23.25 9.53h-8.608L12 1.5 9.358 9.53H.75l7.041 4.94L5.05 22.5 12 17.524l6.951 4.976-2.747-8.03 7.046-4.94Z' />
                            </svg>
                            1
                        </li>
                        <li class='star_2'>
                            <svg viewBox='0 0 24 24'>
                                <path
                                    d='M23.25 9.53h-8.608L12 1.5 9.358 9.53H.75l7.041 4.94L5.05 22.5 12 17.524l6.951 4.976-2.747-8.03 7.046-4.94Z' />
                            </svg>
                            2
                        </li>
                        <li class='star_3'>
                            <svg viewBox='0 0 24 24'>
                                <path
                                    d='M23.25 9.53h-8.608L12 1.5 9.358 9.53H.75l7.041 4.94L5.05 22.5 12 17.524l6.951 4.976-2.747-8.03 7.046-4.94Z' />
                            </svg>
                            3
                        </li>
                        <li class='star_4'>
                            <svg viewBox='0 0 24 24'>
                                <path
                                    d='M23.25 9.53h-8.608L12 1.5 9.358 9.53H.75l7.041 4.94L5.05 22.5 12 17.524l6.951 4.976-2.747-8.03 7.046-4.94Z' />
                            </svg>
                            4
                        </li>
                        <li class='star_5'>
                            <svg viewBox='0 0 24 24'>
                                <path
                                    d='M23.25 9.53h-8.608L12 1.5 9.358 9.53H.75l7.041 4.94L5.05 22.5 12 17.524l6.951 4.976-2.747-8.03 7.046-4.94Z' />
                            </svg>
                            5
                        </li>
                    </ul>
                </div>
                <div class='review_sort_new_old'>
                    <span>Sort</span>
                    <div class='review_sort_new_old_list'>
                        <button class='review_sort_button' type='button'>
                            <span>Choose</span>
                            <svg fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'
                                stroke-width='1' viewbox='0 0 24 24'>
                                <path d='m6 9 6 6 6-6' />
                            </svg>
                        </button>
                        <ul class='hidden'>
                            <li class='selected'>Top reviews</li>
                            <li>Newest first</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class='review_holder'>
                <ol>
                    <b:loop values='data:post.comments' var='commentThreads'>
                        <b:if cond='!data:commentThreads.inReplyTo'>
                            <li class='review_user' expr:id='&quot;c&quot; + data:commentThreads.id'>
                                <div class='review_block' itemscope='itemscope' itemtype='https://schema.org/Comment'>
                                    <div class='rating_from_users'>
                                        <div class='rating_icon_star'>
                                            <svg viewBox='0 0 24 24'>
                                                <path
                                                    d='M23.25 9.53h-8.608L12 1.5 9.358 9.53H.75l7.041 4.94L5.05 22.5 12 17.524l6.951 4.976-2.747-8.03 7.046-4.94Z' />
                                            </svg>
                                            <svg viewBox='0 0 24 24'>
                                                <path
                                                    d='M23.25 9.53h-8.608L12 1.5 9.358 9.53H.75l7.041 4.94L5.05 22.5 12 17.524l6.951 4.976-2.747-8.03 7.046-4.94Z' />
                                            </svg>
                                            <svg viewBox='0 0 24 24'>
                                                <path
                                                    d='M23.25 9.53h-8.608L12 1.5 9.358 9.53H.75l7.041 4.94L5.05 22.5 12 17.524l6.951 4.976-2.747-8.03 7.046-4.94Z' />
                                            </svg>
                                            <svg viewBox='0 0 24 24'>
                                                <path
                                                    d='M23.25 9.53h-8.608L12 1.5 9.358 9.53H.75l7.041 4.94L5.05 22.5 12 17.524l6.951 4.976-2.747-8.03 7.046-4.94Z' />
                                            </svg>
                                            <svg viewBox='0 0 24 24'>
                                                <path
                                                    d='M23.25 9.53h-8.608L12 1.5 9.358 9.53H.75l7.041 4.94L5.05 22.5 12 17.524l6.951 4.976-2.747-8.03 7.046-4.94Z' />
                                            </svg>
                                        </div>
                                        <div class='review_date'>
                                            <time class='time_ago' expr:datetime='data:commentThreads.timestamp'
                                                expr:title='data:commentThreads.timestamp'>
                                                <data:commentThreads.timestamp />
                                            </time>
                                        </div>
                                    </div>
                                    <div class='review_head'>
                                        <div class='review_avatar'>
                                            <img class='avatar_img lazyload' expr:alt='data:commentThreads.author'
                                                expr:src='resizeImage(data:commentThreads.authorPhoto.url, 100, &quot;1:1&quot;)'
                                                height='32px' width='32px' />
                                        </div>
                                        <div class='review_meta'>
                                            <div class='review_author'>
                                                <a expr:href='data:commentThreads.authorUrl'
                                                    expr:title='data:commentThreads.author' itemprop='author'
                                                    itemscope='' itemtype='https://schema.org/Person'
                                                    rel='noopener external nofollow' target='_blank'>
                                                    <span itemprop='name'>
                                                        <data:commentThreads.author />
                                                    </span>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class='review_text' itemprop='text'>
                                        <data:commentThreads.body />
                                    </div>
                                </div>
                            </li>
                        </b:if>
                    </b:loop>
                </ol>
            </div>
            <div class='review_add'>
                <script>
                    var comment = true;
                </script>
                <button class='hidden' id='addcomment' type='button'>
                    Post a new review
                </button>
                <button class='review_button' type='button'>
                    Post a new review
                </button>
            </div>
            <div class='review_form hidden'>
                <div class='widget_title'>Give your rating</div>
                <div id='threaded_review_form'>
                    <div class='provide_ratings'>
                        <ul>
                            <li data-star='1' title='Buruk'>
                                <svg viewBox='0 0 24 24'>
                                    <path
                                        d='M23.25 9.53h-8.608L12 1.5 9.358 9.53H.75l7.041 4.94L5.05 22.5 12 17.524l6.951 4.976-2.747-8.03 7.046-4.94Z' />
                                </svg>
                            </li>
                            <li data-star='2' title='Kurang baik'>
                                <svg viewBox='0 0 24 24'>
                                    <path
                                        d='M23.25 9.53h-8.608L12 1.5 9.358 9.53H.75l7.041 4.94L5.05 22.5 12 17.524l6.951 4.976-2.747-8.03 7.046-4.94Z' />
                                </svg>
                            </li>
                            <li data-star='3' title='Biasa saja'>
                                <svg viewBox='0 0 24 24'>
                                    <path
                                        d='M23.25 9.53h-8.608L12 1.5 9.358 9.53H.75l7.041 4.94L5.05 22.5 12 17.524l6.951 4.976-2.747-8.03 7.046-4.94Z' />
                                </svg>
                            </li>
                            <li data-star='4' title='Baik'>
                                <svg viewBox='0 0 24 24'>
                                    <path
                                        d='M23.25 9.53h-8.608L12 1.5 9.358 9.53H.75l7.041 4.94L5.05 22.5 12 17.524l6.951 4.976-2.747-8.03 7.046-4.94Z' />
                                </svg>
                            </li>
                            <li data-star='5' title='Sangat baik'>
                                <svg viewBox='0 0 24 24'>
                                    <path
                                        d='M23.25 9.53h-8.608L12 1.5 9.358 9.53H.75l7.041 4.94L5.05 22.5 12 17.524l6.951 4.976-2.747-8.03 7.046-4.94Z' />
                                </svg>
                            </li>
                        </ul>
                    </div>
                    <div class='review_message'>Read: <a href='#' rel='nofollow'>How to Fill Out a Product Review</a>
                    </div>
                    <iframe class='blogger-iframe-colorize blogger-comment-from-post'
                        expr:data-src='data:post.commentFormIframeSrc' height='296' id='comment-editor'
                        name='comment-editor' title='comment-editor' width='100' />
                </div>
            </div>
        </div>
    </div>
</b:includable>

Tìm đoạn mã

<b:include data='post' name='commentPicker'/>

và sửa thành

<b:include data='post' name='nldblogComments'/>

Bước 2: Thêm CSS sau vào template.

.review_section{background-color:#ffffff;border-radius:12px;margin-top:30px;padding:15px}
.review_section_start{margin-bottom:30px}
.product_rating_data{display:flex;align-items:center;gap:30px}
.product_rating_score_info{display:flex;align-items:center;justify-content:center;gap:8px;line-height:normal}
.product_rating_icon{color:#ffc400;line-height:0}
.product_rating_icon svg{width:30px;height:30px;fill:currentColor}
.product_rating_noc{color:#5f6368;text-align:center}
.product_rating_score_count span:first-child{font-size:60px}
.product_rating_score_count span:last-child{font-size:16px;color:#5f6368}
.product_rating_right{flex:1;max-width:328px}
.product_rating_right ul{margin:0;padding:0}
.product_rating_right ul li{font-size:12px;color:#5f6368;line-height:normal;list-style:none;margin:0;padding:0}
.product_rating_right ul li:not(:last-child){margin-bottom:6px}
.progress_inner{display:flex;align-items:center;gap:8px}
.progress_inner span:first-child{font-weight:700;width:10px}
.progress_inner span:last-child{background-color:#0a0a0a12;border-radius:100px;width:100%;height:6px}
.progress_inner span:last-child i{display:block;background-color:#ffc400;border-radius:100px;width:0;height:100%}
.review_sort_section{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:30px}
.review_sort_star ul{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.review_sort_star ul li{display:flex;align-items:center;gap:4px;background-color:rgba(0,0,0,.05);border-radius:8px;height:40px;cursor:pointer;list-style:none;margin:0;padding:0 15px}
.review_sort_star ul li:hover{background-color:#e0ac3333;color:#e0ac33}
.review_sort_star ul li.selected{background-color:#e0ac331f;border-color:#e0ac33;color:#e0ac33}
.review_sort_star ul li svg{width:16px;height:16px;fill:#ffc400}
.review_sort_new_old{display:flex;align-items:center;gap:8px}
.review_sort_new_old .review_sort_button{background-color:rgba(0,0,0,.05);border-radius:8px;border:unset;height:40px;cursor:pointer;margin:0;padding:0 15px}
.review_sort_new_old .review_sort_button:hover{background-color:#e0ac3333;color:#e0ac33}
.review_sort_new_old > span{font-weight:700}
.review_sort_new_old_list{position:relative}
.review_sort_new_old_list ul{position:absolute;top:40px;right:0;left:0;background-color:#ffffff;box-shadow:0 2px 4px -1px #000 0 4px 5px 0 #000 0 1px 10px 0 #000;border-radius:8px;z-index:1;margin:0;padding:0;overflow:hidden}
.review_sort_new_old_list ul li{cursor:pointer;list-style:none;margin:0;padding:10px 15px;position:relative}
.review_sort_new_old_list ul li:hover{background-color:#0a0a0a12}
.review_sort_new_old_list ul li.selected:before{content:'';background-color:#e0ac33;position:absolute;top:10px;bottom:10px;left:0;width:3px}
html[dir="rtl"] .review_sort_new_old_list ul li.selected:before{right:0;left:unset}
.review_holder ol,.review_holder ul{margin:0;padding:0}
.review_holder.sort_by_newest ol{display:flex;flex-direction:column-reverse}
.review_holder ol li,.review_holder ul li{list-style:none;margin:0;padding:0}
.review_holder ol li{border-bottom:1px solid;border-color:#dadce0;margin-bottom:15px;padding-bottom:15px}
.review_holder > ol.star_sorted_1 li,.review_holder > ol.star_sorted_2 li,.review_holder > ol.star_sorted_3 li,.review_holder > ol.star_sorted_4 li,.review_holder > ol.star_sorted_5 li{display:none}
.review_holder > ol.star_sorted_1 li[data-star="1"],.review_holder > ol.star_sorted_2 li[data-star="2"],.review_holder > ol.star_sorted_3 li[data-star="3"],.review_holder > ol.star_sorted_4 li[data-star="4"],.review_holder > ol.star_sorted_5 li[data-star="5"]{display:block}
.rating_from_users{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.rating_icon_star{display:flex;align-items:center;line-height:0}
.rating_icon_star svg{width:14px;height:14px;fill:#0a0a0a12}
.review_user[data-star="1"] .rating_icon_star svg:nth-child(1),.review_user[data-star="2"] .rating_icon_star svg:nth-child(1),.review_user[data-star="2"] .rating_icon_star svg:nth-child(2),.review_user[data-star="3"] .rating_icon_star svg:nth-child(1),.review_user[data-star="3"] .rating_icon_star svg:nth-child(2),.review_user[data-star="3"] .rating_icon_star svg:nth-child(3),.review_user[data-star="4"] .rating_icon_star svg:nth-child(1),.review_user[data-star="4"] .rating_icon_star svg:nth-child(2),.review_user[data-star="4"] .rating_icon_star svg:nth-child(3),.review_user[data-star="4"] .rating_icon_star svg:nth-child(4),.review_user[data-star="5"] .rating_icon_star svg:nth-child(1),.review_user[data-star="5"] .rating_icon_star svg:nth-child(2),.review_user[data-star="5"] .rating_icon_star svg:nth-child(3),.review_user[data-star="5"] .rating_icon_star svg:nth-child(4),.review_user[data-star="5"] .rating_icon_star svg:nth-child(5){fill:#ffc400}
.review_date{font-size:12px;color:#5f6368;line-height:normal}
.review_head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.review_avatar{flex:0 0 auto;line-height:0}
.review_avatar img{width:32px;height:32px;border-radius:50%}
.review_author{font-weight:700}
.review_author a{color:#34364a}
.review_author.s a{display:flex;align-items:center;gap:5px}
.review_author a:hover{color:#e0ac33}
.review_author.s .seller{background-color:#e0ac331f;color:#e0ac33;border-radius:4px;font-size:10px;padding:2px 5px}
#comment-editor{background-color:transparent;border:none;color-scheme:none}
.review_form .widget_title{font-size:16px}
.provide_ratings{line-height:0}
.provide_ratings ul{display:inline-flex;align-items:center;margin:0;padding:0}
.provide_ratings ul li{color:#0a0a0a12;cursor:pointer;list-style:none;margin:0;padding:0}
.provide_ratings ul:hover li{color:#ffc400}
.provide_ratings ul li:hover~li{color:#0a0a0a12}
.review_form.selected ul li.active{color:#ffc400}
.review_form.selected ul li:not(.active){color:#ffc400}
.review_form.selected ul li.active~li{color:#0a0a0a12}
.provide_ratings ul li svg{fill:currentColor}
.review_message{margin-top:15px}
.review_message a:hover{text-decoration:underline}
.review_add .review_button{background-color:rgba(0,0,0,.05);border-radius:8px;border:unset;height:40px;cursor:pointer;margin:0;padding:0 15px}
.review_add .review_button:hover{background-color:#e0ac3333;color:#e0ac33}
svg{width:24px;height24px}

Các bạn có thể sửa lại CSS cho phù hợp với từng template, CSS mình cung cấp chỉ để tham khảo.

Bước 3: Thêm đoạn JQuery dưới đây vào phía trên thẻ </body>.

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'/>
<b:if cond='data:widgets.Blog.first.allBylineItems.comments and data:view.isSingleItem'>
<script>//<![CDATA[
function bloggerComment() {
    var e = document.getElementById("comment-editor"),
        a = e.getAttribute("data-src");
    if (e.setAttribute("src", a), 1 == comment) {
        var n = document.getElementsByClassName("reply_to"),
            o = document.getElementById("threaded_review_form"),
            r = n.length,
            c = function(e, a, n, o) {
                e.addEventListener("click", function() {
                    var r = e.getAttribute("data-reply-to");
                    document.getElementById("c" + r).appendChild(a), document.getElementById("threaded_review_form").className = "review_replybox_single", n.src = o + "&parentID=" + r
                })
            };
        for (i = 0; i < r; i++) c(n[i], o, e, a);
        var s = document.getElementsByClassName("review_form")[0];
        document.getElementById("addcomment").addEventListener("click", function() {
            s.appendChild(o), document.getElementById("threaded_review_form").className = "review_replybox_thread", document.getElementById("addcomment").className = "hidden", e.src = a
        })
    }
}
var reviewButton = $(".review_button"),
    reviewForm = $(".review_form");
reviewButton.click(function() {
    $(this).remove(), reviewForm.removeClass("hidden"), bloggerComment()
});
function calculateRating() {
    var e = 0,
        a = 0;
    $(".review_holder > ol > li .review_text").each(function() {
        var n = $(this).find("em"),
            o = n.text(),
            r = parseInt(o);
        0 === o.length ? r = 5 : (r = parseInt(o), n.remove());
        var c = $(this).closest(".review_user");
        !isNaN(r) && (r > 5 && (r = 5), c.attr("data-star", r), e += r, a++)
    }), $(".total_number_reviews").each(function() {
        var e = parseInt($(this).closest("li").attr("class").split("_").pop()),
            a = 0;
        $(".review_user").each(function() {
            parseInt($(this).attr("data-star")) === e && a++
        }), $(this).text(a)
    });
    var n = a > 0 ? e / a : 5;
    $(".product_rating_score_count span:first-child").text(n.toFixed(1)), $(".progress_bar_1 i").css("width", 100 * getStarPercentage(1) + "%"), $(".progress_bar_2 i").css("width", 100 * getStarPercentage(2) + "%"), $(".progress_bar_3 i").css("width", 100 * getStarPercentage(3) + "%"), $(".progress_bar_4 i").css("width", 100 * getStarPercentage(4) + "%"), $(".progress_bar_5 i").css("width", 100 * getStarPercentage(5) + "%")
}
function getStarPercentage(e) {
    var a = 0;
    $(".review_text").each(function() {
        var n = $(this).closest(".review_user");
        parseInt(n.attr("data-star")) === e && a++
    });
    var n = $(".review_text").length;
    return n > 0 ? a / n : 0
}
function copyToClipboard(e) {
    var a = document.createElement("textarea");
    a.value = e, document.body.appendChild(a), a.select(), document.execCommand("copy"), document.body.removeChild(a)
}
calculateRating(), $(".review_form ul li").click(function() {
    $(".review_form ul li").removeClass("active"), $(this).addClass("active"), $(".review_form").addClass("selected");
    var e = $(this).attr("data-star"),
        a = 'The rating code is copied successfully, paste the code in the comment section.\nExample: "<em>' + e + '</em> Type a review message..."';
    alert(a), copyToClipboard("<em>" + e + "</em> ")
});
var reviewSortStarItems = $(".review_sort_star ul li");
reviewSortStarItems.click(function() {
    var e = "star_sorted_" + $(this).attr("class").slice(-1);
    $(this).hasClass("selected") ? ($(this).removeClass("selected"), $(".review_holder > ol").removeClass().addClass(e)) : (reviewSortStarItems.removeClass("selected"), $(this).addClass("selected"), $(".review_holder > ol").removeClass().addClass(e))
});
var reviewSortButton = $(".review_sort_button"),
    reviewSortButtonLabel = $(".review_sort_button span"),
    reviewSortOL = $(".review_sort_new_old_list ul"),
    reviewSortList = $(".review_sort_new_old_list ul li"),
    reviewSortListTop = $(".review_sort_new_old_list ul li:first-child"),
    reviewSortListNew = $(".review_sort_new_old_list ul li:last-child"),
    reviewSortListFirstText = reviewSortListTop.text(),
    reviewHolder = $(".review_holder");
reviewSortButtonLabel.text(reviewSortListFirstText), reviewSortButton.click(function() {
    reviewSortOL.toggleClass("hidden")
}), reviewSortList.click(function() {
    reviewSortList.removeClass("selected"), $(this).addClass("selected"), reviewSortOL.addClass("hidden");
    var e = $(this).text();
    reviewSortButtonLabel.text(e)
}), reviewSortListTop.click(function() {
    reviewHolder.removeClass("sort_by_newest")
}), reviewSortListNew.click(function() {
    reviewHolder.addClass("sort_by_newest")
}), $(document).on("click", function(e) {
    0 === $(e.target).closest(".review_sort_new_old_list").length && $(".review_sort_new_old_list ul").addClass("hidden")
})
//]]></script>
</b:if>

Nếu template của bạn có thư viện JQuery rồi thì có thể xoá bỏ đoạn <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'/> trong code trên.

Bước 4: Lưu lại và kiểm tra.

Lời kết

Các bạn cần biết một chút về mã nguồn Blogger để có thể thực hiện được thủ thuật này, nếu bạn không biết thì mình không khuyến khích các bạn làm tuy không ảnh hưởng nhiều đến template nhưng chưa chắc bạn thực hiện thành công.

Go to Link
0/5
0 ratings
5
4
3
2
1
Tags:
Duy
View More Posts
Có những thứ luôn quẩn quanh cuộc đời bạn và đôi lúc không có lời giải thích, liệu rằng đó có phải là duyên số?!
Admin

Đăng nhận xét

Your email address will not be published.

Enter Image URL / Code Snippets / Quotes / name tag, then click parse button accordingly that you have entered. then copy the parse result and paste it into the comment field.


Maybe You Like

Follow
Google Translate