Ads

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

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!

Cùng bình luận bài viết

  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