Да добавим Sitemap в блог на Blogspot

Карта на блога е най-важното нещо, което всеки блогър трябва да добави в своя блог. Това не е само една статична страница, но подпомага много да се намали степента на отпадане на посетителите, като осигурява директна навигация до конкретна публикация. Sitemap, която ще добавим днес, показва списък на публикациите по категории. Можете да я използвате, за да създадете и рубрики. Основава се на аjax, така че ще се зарежда сравнително бързо и няма да повлияе на работата на вашия блог.

Но да вървим нататък. Можете да проверите как работи на живо картата на блога, която предлагам, като щракнете върху бутона по-долу.


Демо
Нека започнем.

Първа стъпка - Добавяне на CSS

Преди редактиране ви препоръчвам да направите резервно копие на вашата тема, така че ако нещо се обърка, да имате сигурен дизайн на блога си.
Първото нещо, което трябва да направите, е да влезете в акаунта си в Blogger и да отидете на Тема ➔ Редактиране на HTML кода ➔ намерете реда ]]></b:skin>. Точно над него поставете следния код:

CSS код

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

Втора стъпка - Добавяне на HTML код

Сега това е най-съществената част от урока и трябва да я направите много внимателно. В кода на темата потърсете </body> и точно над него поставете следния HTML код:

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/AVvXsEh0OOFdVjFtZ6B0DhhcEbXsEeHKKPPQ5ZHa_9Lgf1uQtFVIFxboIrnuXHboqMXX8DZaUY5MNx1R7OnhVSGkA1Ez73puXYZ0uOyo6dNiXNPWm0m0fZKHcxU8J-J49QQ92WIkh_utiii9bss/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>

Сега запазете промените, които направихте в кода на темата.

Трета стъпка - Добавяне на Sitemap страница - Най-важно !!

Това е най-съществената част от урока и трябва да я направите много внимателно. Отидете на таблото за управление на блога си ➔ Страници ➔ Нова страница. В съдържанието на новата страница, след добавяне на заглавието и скриване на коментарите с помощта на опциите в лявата ѝ страна, добавете следния код, но в HTML режим:

[sitemap]

Щракнете върху бутона за публикуване и проверете как изглежда ново добавената карта на блога.

Заключение

Поздравления !! Вие го направихте. Сега научихте, как да добавите Sitemap в блогове на Blogspot. Съвременна, работеща карта на блога. Посетете блога си и проверете страхотната Sitemap на живо в действие.
Надявам се, че този урок ви е харесал.

За въпроси моля, в коментарите. А може и на тази страница. Ще съм благодарна да оцените моя труд. Моля, гласувайте за блога ми на:


Здраве за всички вас! Не забравяйте да правите добро на други хора!