Tạo sitemap (sơ đồ) phong cách cực chất cho blogspot/blogger

Like Rê chuột vào nút Like để chọn biểu tượng cảm xúc
Sơ đồ trang web là điều quan trọng nhất mà tất cả các blogger nên thêm vào blog của mình. Nó không chỉ là một trang nhưng giúp ích rất nhiều để giảm tỷ lệ trả lại ngay lập tức bằng cách cung cấp hướng trực tiếp đến nhãn bài cụ thể.
Hôm nay mình có lướt sang một số Blogger nước ngoài, thấy mẫu Sitemap này đẹp nên mang về chia sẻ cùng mọi người.

Tạo sitemap (sơ đồ) phong cách cực chất cho blogspot/blogger

Thực hiện:
Bước 1: Các bạn dán đoan code sau trên thẻ ]]></b:skin>
.mapasite {    margin-bottom: 10px;    background-color: #F8F8F8}.mapasite.active .mapa {    display: block}.mapasite .mapa {    display: none}.mapasite h2 {    background-color: #EEE;    color: $(primary.color);    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: Các bạn dán đoạn code dưới lên trên thẻ đóng </body>
<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ước 3: Các bạn vào Trang > Trang mới > HTML và thêm đoạn code hiển thị đơn giản sau vào
[sitemap]
Tạo sitemap (sơ đồ) phong cách cực chất cho blogspot/blogger

Xuất bản và xem kết quả.

Chỉ vài bước đơn giản thôi chúng ta đã có một sitemap cực ngầu phải ko các bạn. Chúc các bạn thành công. Nếu có vấn đề gì chưa hệ cứ hỏi mình sẽ giúp đỡ cho!

Đăng nhận xét

15 Nhận xét

» Hướng dẫn nhúng hình ảnh: chỉ cần sử dụng link ảnh dán vào, vd: http://domain.com/image.png
» Tham trang khảo ảnh động cực cute: Qoobee
» Hướng dẫn nhúng link trang web: <a href="url" rel="nofollow">Link</a>
» Không chửi tục, nói bậy, quảng cáo thông qua khung Comment.
» Không spam link, chia sẻ các link không liên quan đến bài viết.
» Không xuyên tạc, bôi nhọ tổ chức hay cá nhân nào.
» Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước. Xem thêm...

  1. Quách Nhị ơi a xóa nhằm comment. Em phải nhập [sitemap] ở phần HTML nó mới hiện nha em!

    Trả lờiXóa
  2. Đúng rồi Anh, em làm vậy mà
    https://uphinhnhanh.com/images/2017/10/20/2017-10-202.png

    Trả lờiXóa
    Trả lời
    1. có thể e sai ở chỗ Css hay Javascrip ý. Nếu ko làm đc thì để mai a giúp cho.

      Xóa
  3. Phần widget facebook, rss, g+ bị lỗi kìa ông.

    Trả lờiXóa
    Trả lời
    1. Cái này tui cố tình để vậy mà :v gắn link zô là xong ý mà :D

      Xóa