Thêm tiện ích sơ đồ trang web trong Blogspot

CNTTLS | Thủ thuật blogspot Hướng dãn cách thêm tiện ích sơ đồ trang web trong Blogspot nhanh gọn đơn giản

Thêm tiện ích sơ đồ trang web trong Blogspot
Sơ đồ trang web là một trang cần thiế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à nó còn giúp trang blog của bạn giảm tỷ lệ thoát  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 này 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 tải nhanh và không ảnh hưởng đến hiệu suất của blog của bạn.

Cách Thêm tiện ích Sơ đồ trang web trong Blogspot 

Xem bản demo: [Demo ##eye##]

Bước 1 ( Thêm CSS ) 

Đ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
Tìm kiếm thẻ:  ]]></b:skin> và dán đoạn code sau phía trên nó.
[/* ######## Thêm tiện ích sơ đồ trang web trong Blogspot ######################### */
.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 ) 

Trong mẫu, tìm kiếm thẻ: </body> và dán đoạn code sau phía trên nó.
 [<script type='text/javascript'>
            //<![CDATA[
var text_month = [, "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sept", "Oct", "Nov", "Dec"];
var no_image_url = "http://1.bp.blogspot.com/-eAeO-DYJDws/Vkqtj4HFBFI/AAAAAAAAB0o/Q5OLsyONXM0/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 Trang để thêm sơ đồ trang web.

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

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.
[[sitemap]]
Xem hình dưới đây.
Thêm sơ đồ trang web trong trang

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

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 .
Vào blog của bạn và kiểm tra tiện ích, 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.

BÌNH LUẬN

Tên

After Effects,1,Blogger,33,blogspot,9,CNTT,30,Code Blog,1,Facebook,3,Google,2,Google Drive,1,Kỹ năng Bootstrap,1,Kỹ năng Dreamweaver,1,Kỹ năng Excel,7,Kỹ năng Google Driver,1,Kỹ năng IELTS,6,Kỹ năng Illustrator,1,Kỹ năng lập trình,1,Kỹ năng lập trình hướng đối tượng Typescript,1,Kỹ năng Lumion 3D,1,Kỹ năng nói tiếng Anh,1,Kỹ năng Powerpoint,1,Kỹ năng thiết kế,1,Kỹ năng TOEIC,1,Kỹ năng Unity3D,1,Kỹ năng Word,1,Kỹ năng xin việc - viết CV,1,Microsoft 365,1,Microsoft Excel,4,Microsoft Powerpoint,1,Microsoft Word,2,SEO,1,Seo Blogger,6,SEO Blogspot,1,tao-blogspot-chuyen-nghiep,1,Template Blogger,6,Template Blogspot,1,Template MagOne,1,Template Wordpress,1,Thủ thuật Blogger,27,Thủ thuật Blogspot,1,Thủ thuật máy tính,1,Thủ thuật Wordpress,1,Tin học văn phòng,9,VIDEO KHÓA HỌC,6,Webmaster,2,Windows,2,Wordpress,2,Youtube,1,
ltr
item
Chia sẻ kiến thức - Thủ thuật máy tính: Thêm tiện ích sơ đồ trang web trong Blogspot
Thêm tiện ích sơ đồ trang web trong Blogspot
CNTTLS | Thủ thuật blogspot Hướng dãn cách thêm tiện ích sơ đồ trang web trong Blogspot nhanh gọn đơn giản
https://3.bp.blogspot.com/-SGfL5FQIrQQ/XH0JJOCeOII/AAAAAAAABOI/lOwoRgqR77ACFyZz-4Rb85oydo-5fnhugCLcBGAs/s1600/so-do-trang-web-blogspot.png
https://3.bp.blogspot.com/-SGfL5FQIrQQ/XH0JJOCeOII/AAAAAAAABOI/lOwoRgqR77ACFyZz-4Rb85oydo-5fnhugCLcBGAs/s72-c/so-do-trang-web-blogspot.png
Chia sẻ kiến thức - Thủ thuật máy tính
https://blog.vinhls.com/2019/03/them-tien-ich-so-do-trang-web-trong-blogspot.html
https://blog.vinhls.com/
https://blog.vinhls.com/
https://blog.vinhls.com/2019/03/them-tien-ich-so-do-trang-web-trong-blogspot.html
true
987137131202951109
UTF-8
Đã tải tất cả bài viết Không tìm thấy bài viết nào Xem tất cả Đọc thêm Trả lời Không trả lời Xóa Bởi Home PAGES POSTS Xem tất cả ĐỀ XUẤT CHO BẠN LABEL ARCHIVE SEARCH TẤT CẢ NHỮNG BÀI VIẾT Không tìm thấy bất kỳ bài viết phù hợp với yêu cầu của bạn Trở lại trang chủ Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec vừa xong 1 phút trước $$1$$ minutes ago 1 giờ trước $$1$$ hours ago Hôm qua $$1$$ days ago $$1$$ weeks ago nhiều hơn 5 tuần trước Người theo dõi Theo dõi THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Sao chép tất cả mã Chọn tất cả mã Tất cả các mã đã được sao chép vào clipboard của bạn Không thể sao chép mã / văn bản, vui lòng nhấn [CTRL] + [C] (hoặc CMD + C với Mac) để sao chép Mục lục