Cách thêm tiện ích sơ đồ trang web trong Blogspot Blog

     ,  , 



Sơ đồ trang web là thứ thiết yếu nhất mà mọi blogger nên thêm vào blog của mình. Đây không chỉ là một trang mà còn giúp giảm rất nhiều tỷ lệ thoát ngay lập tức bằng cách cung cấp điều hướng trực tiếp đến nhãn bài đăng cụ thể. Tiện ích sơ đồ trang web mà chúng tôi sẽ thêm hôm nay sẽ hiển thị danh sách các bài viết về thứ tự được xuất bản mới nhất theo từng danh mục, Tiện ích này dựa trên ajax để nó tải nhanh và không ảnh hưởng đến hiệu suất của blog của bạn.
Hãy di chuyển xa hơn và xem Cách Thêm tiện ích Sơ đồ trang web trong Blogspot Blog . Bạn có thể kiểm tra bản xem trước trực tiếp của tiện ích Hộp tác giả bằng cách nhấp vào nút bên dưới.
Xem bản xemtrước bảndemotrực tiếp

Hãy bắt đầu Bước 1 ( Thêm CSS ) 

Trước khi chỉnh sửa, chúng tôi khuyên bạn nên tạo bản sao lưu mẫu của mình, để mọi thứ không ổn, bạn vẫn có thiết kế blog an toàn.

Điều đầu tiên bạn cần làm là đăng nhập vào tài khoản Blogger của bạn và truy cập >> Mẫu >> Chỉnh sửa HTML và tìm kiếm thẻ kết thúc ]]> </ b: skin> và ngay phía trên nó dán mã sau đây.

/* ######## Navigation Menu Css by sorabloggingtips.com ######################### */
.mapasite {
    margin-bottom: 10px;
    background-color: #F8F8F8
}
.mapasite.active .mapa {
    display: block
}
.mapasite .mapa {
    display: none
}
.mapasite h2 {
    background-color: #EEE;
    color: #000;
    font-size: 15px;
    padding: 10px 20px;
    border-radius: 2px;
    margin-bottom: 0;
    cursor: pointer;
    font-weight: 700
}
.mapasite h2 .botao {
    font-size: 18px;
    line-height: 1.2em
}
.botao .fa-minus-circle {
    color: #f30
}
.mapapost {
    overflow: hidden;
    margin-bottom: 20px;
    height: 70px;
    background-color: #FFF
}
.mapa {
    padding: 40px
}
.map-thumb {
    background-color: #F0F0F0;
    padding: 10px;
    display: block;
    width: 65px;
    height: 50px;
    float: left
}
.map-img {
    width: 65px;
    height: 50px;
    overflow: hidden;
    border-radius: 2px
}
.map-thumb a {
    width: 100%;
    height: 100%;
    display: block;
    transition: all .3s ease-out!important;
    -webkit-transition: all .3s ease-out!important;
    -moz-transition: all .3s ease-out!important;
    -o-transition: all .3s ease-out!important
}
.map-thumb a:hover {
    -webkit-transform: scale(1.1) rotate(-1.5deg)!important;
    -moz-transform: scale(1.1) rotate(-1.5deg)!important;
    transform: scale(1.1) rotate(-1.5deg)!important;
    transition: all .3s ease-out!important;
    -webkit-transition: all .3s ease-out!important;
    -moz-transition: all .3s ease-out!important;
    -o-transition: all .3s ease-out!important
}
.mapapost .wrp-titulo {
    padding-top: 10px;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.3em;
    padding-left: 25px;
    padding-right: 10px;
    display: block;
    overflow: hidden;
    margin-bottom: 5px
}
.mapapost .wrp-titulo a {
    
}
.mapapost .wrp-titulo a:hover {
    color: #f30;
    text-decoration: underline
}
.map-meta {
    display: block;
    float: left;
    overflow: hidden;
    padding-left: 25px;
}
.mapasite h2 .botao {
    float: right
}

Bước 2 ( Thêm tập lệnh HTML ) 

Bây giờ đây là phần thiết yếu nhất của hướng dẫn và bạn phải thực hiện nó rất cẩn thận. Trong mẫu, tìm kiếm thẻ </ body> và ngay phía trên nó dán Mã hóa HTML sau đây.

 <script type='text/javascript'> 
            //<![CDATA[
var text_month = [, "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sept", "Oct", "Nov", "Dec"];
var no_image_url = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmGMmVCR-f_eV7XIjS21BRuqALF67yot4nW3DBmJgurXypPVIr6SKResDm1HEaReV8z1gXyWU7UN-aHBYYxHXMDNPfiRJYtg11zjcar_xHSB9WXRB0A9i_CnJFbB3561nx0OeVdEUMICA/s1600-r/nth.png";

           var static_page_text = $.trim($('.static_page .post-body').text());
if (static_page_text === "[sitemap]") {
    var postbody = $('.static_page .post-body');
    $.ajax({
        url: "/feeds/posts/default?alt=json-in-script",
        type: 'get',
        dataType: "jsonp",
        success: function(dataZ) {
            var blogLabels = [];
            for (var t = 0; t < dataZ.feed.category.length; t++) {
                blogLabels.push(dataZ.feed.category[t].term)
            }
            var blogLabels = blogLabels.join('/');
            postbody.html('<div class="siteLabel"></div>');
            $('.static_page .post-body .siteLabel').text(blogLabels);
            var splabel = $(".siteLabel").text().split("/");
            var splabels = "";
            for (get = 0; get < splabel.length; ++get) {
                splabels += "<span>" + splabel[get] + "</span>"
            }
            $(".siteLabel").html(splabels);
            $('.siteLabel span').each(function() {
                var mapLabel = $(this);
                var mapLabel_text = $(this).text();
                $.ajax({
                    url: "/feeds/posts/default/-/" + mapLabel_text + "?alt=json-in-script",
                    type: 'get',
                    dataType: "jsonp",
                    success: function(data) {
                        var posturl = "";
                        var htmlcode = '<div class="mapa">';
                        for (var i = 0; i < data.feed.entry.length; i++) {
                            for (var j = 0; j < data.feed.entry[i].link.length; j++) {
                                if (data.feed.entry[i].link[j].rel == "alternate") {
                                    posturl = data.feed.entry[i].link[j].href;
                                    break
                                }
                            }
                            var posttitle = data.feed.entry[i].title.$t;
                            var author = data.feed.entry[i].author[0].name.$t;
                            var get_date = data.feed.entry[i].published.$t,
                                year = get_date.substring(0, 4),
                                month = get_date.substring(5, 7),
                                day = get_date.substring(8, 10),
                                date = text_month[parseInt(month, 10)] + ' ' + day + ', ' + year;
                            var tag = data.feed.entry[i].category[0].term;
                            var content = data.feed.entry[i].content.$t;
                            var $content = $('<div>').html(content);
                            var src2 = data.feed.entry[i].media$thumbnail.url;
                            htmlcode += '<div class="mapapost"><div class="map-thumb"><div class="map-img"><a href="' + posturl + '" style="background:url(' + src2 + ') no-repeat center center;background-size: cover"/></div></div><h3 class="wrp-titulo"><a href="' + posturl + '">' + posttitle + '</a></h3><div class="map-meta"><span class="p-author">' + author + '</span><span class="p-date">' + date + '</span></div></div>'
                        }
                        htmlcode += '</div>';
                        mapLabel.replaceWith('<div class="mapasite"><h2>' + mapLabel_text + '<span class="botao"><i class="fa fa-plus-circle"></i></span></h2>' + htmlcode + '</div>');
                        $(document).on('click', '.mapasite h2', function() {
                            $(this).parent('.mapasite').addClass('active');
                            $(this).find('.botao .fa').removeClass('fa-plus-circle').addClass('fa-minus-circle');
                        });
                        $(document).on('click', '.mapasite.active h2', function() {
                            $(this).parent('.mapasite').removeClass('active');
                            $(this).find('.botao .fa').addClass('fa-plus-circle').removeClass('fa-minus-circle');
                        });
                    }
                });
            });
        }
    });
}
            //]]>
</script>

Bây giờ Lưu mẫu của bạn và đi đến các trang để thêm sơ đồ trang web.

Lưu ý : - tiện ích hoạt động trên jquery vì vậy bạn phải cài đặt plugin jquery nếu bạn chưa cài đặt nó ..

Bước 3 ( Thêm sơ đồ trang web trong trang ) - Quan trọng nhất !!

Bây giờ đây là phần thiết yếu nhất của hướng dẫn và bạn phải thực hiện nó rất cẩn thận. Truy cập trang tổng quan blogger của bạn> Trang> Thêm trang mới. 
Trên nội dung trang mới sau khi thêm tiêu đề trang và ẩn các bình luận bằng các tùy chọn, hãy thêm đoạn mã sau vào vùng nội dung trang.
 [sơ đồ trang web]
Để hiểu rõ hơn, hãy kiểm tra khu vực được tô sáng trong hình dưới đây.




Bây giờ bấm vào nút xuất bản và kiểm tra trang đã xuất bản để xem tiện ích sơ đồ trang web mới được thêm vào. ;)

Phần kết luận

Chúc mừng !! Bạn đã làm nó. bây giờ bạn đã biết rằng Làm thế nào để thêm tiện ích sơ đồ trang web trong Blogspot Blog . Ghé thăm blog của bạn và kiểm tra tiện ích tuyệt vời trực tiếp, hy vọng bạn thích hướng dẫn này, nếu bạn thích thì hãy chia sẻ nó với bạn bè của bạn, chúng tôi đang nỗ lực để phát triển thêm các tiện ích tuyệt vời như vậy, hãy theo dõi chúng tôi.




    1. nhân xet: