Карта сайта - самая важная вещь, которую каждый блоггер должен добавить в свой блог

Карта сайта - самая важная вещь, которую каждый блоггер должен добавить в свой блог. Это не просто страница, но и помогает значительно снизить частоту отказов, предоставляя прямую навигацию для записи на ярлыке. Виджет sitemap, который мы собираемся добавить сегодня, показывает список статей по последнему опубликованному заказу по каждой категории. Этот виджет основан на ajax, поэтому он будет быстро загружаться и не повлияет на производительность вашего блога. Перейдем дальше и посмотрим, как добавить виджет Sitemap в Blogspot Blogs . Вы можете проверить предварительный просмотр виджета Author Box, нажав кнопку ниже.

См. Демонстрационныйпросмотр в реальном времени

Начнем с шага 1 ( добавление CSS ) 

Перед редактированием мы рекомендуем сделать резервную копию вашего шаблона, так что что-то пойдет не так, у вас все еще есть безопасный блог.

Первое, что вам нужно сделать, это войти в свою учетную запись Blogger и перейти к >> Шаблонам >> Редактировать HTML и найти конец ]]> </ b: skin>, а чуть выше его вставить следующий код.

/* ######## 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: $(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
}

Шаг 2 ( добавление HTML-скрипта ) 

Теперь это самая важная часть учебника, и вы должны сделать это очень осторожно. В шаблоне найдите тег </ body> и чуть выше его вставьте следующий код HTML.

 <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/AVvXsEiz_xfnJNayHtb-e-hsp7N11ZNEqYYpsct7nOy2ipVC28QdUwl-8YtbdtsQAMznpQwJUuTZ8w8Y7T6wyDRcesamBWiz-yvXohNAbOB_n-cuPRtOcZFr_xw2Q7JQYHTjCWhnr-M95YUpEio/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>

Теперь сохраните свой шаблон и перейдите на страницы, чтобы добавить карту сайта.

Примечание . - Виджет работает на jquery, поэтому вам нужно установить плагин jquery, если вы еще не установили его.

Шаг 3 ( Добавление файла Sitemap на страницах ) - Самое важное!

Теперь это самая важная часть учебника, и вы должны сделать это очень осторожно. Попасть в свою панель инструментов Blogger> Страницы> Добавить новую страницу. 
В новом содержимом страницы после добавления заголовка страницы и скрытия комментариев с помощью параметров добавьте следующий код в область содержимого страницы.

 [Карта сайта]

Для лучшего понимания проверьте выделенную область на изображении ниже.

Теперь нажмите кнопку публикации и проверьте опубликованную страницу, чтобы увидеть новый добавленный виджет Sitemap. ;)

Вывод

Поздравляю! Вы сделали это. теперь вы узнали, что как добавить Sitemap Widget в Blogspot Blogs . Посетите свой блог и посмотрите на потрясающий виджет в действии, надеюсь, вам понравился этот урок, если вам понравилось, пожалуйста, поделитесь им со своими друзьями, мы прилагаем все усилия, чтобы развить больше таких удивительных виджетов, пожалуйста, следите за обновлениями с нами. До свидания  ! (До свидания по-английски !! хахаха).