Создаем карту блога на blogspot



Как создать карту блога

Здравствуйте посетители и читатели моего блога. Пришло время создать карту блога, то есть содержание всех статей на одной странице. Создание карты намного облегчит посетителям находить нужную информацию в блоге.

PS: Обновлено 17.04.2017 г. Карта для блогов, в которых не более 150 сообщений. Не помню, с какого времени, но Google разбивает Sitemap на 3 карты по 150 постов. Если будет больше, то ранние посты не будут отображаться в ярлыках, а также в карте блога.

В этом блоге мне пришлось написать содержание вручную. Поэтому рекомендую по мере написания постов, начинайте постепенно писать карту ручками. Пример на скриншоте или сходите посмотрите в тестовом блоге, в меню карта блога (слева).
Создаем карту для блога блоггер. Скрипт для вставки в шаблон.

Все статьи в блоге должны быть разбиты по ярлыкам. В админ панели нажимаем тема (бывшее название шаблон), делаем резервную копию. Далее изменить и выше закрывающего тэга </head> вставьте скопированный ниже скрипт.

<style type='text/css'>
.btnt-sitemap { border-bottom: 4px solid #03b4cc; }
.btnt-toc-wrap { display: inline-block; font-family: &quot;Century Gothic&quot;,sans-serif; width: 100%; }
.btnt-toc-wrap .btnt-cat { background: #03b4cc; border-radius: 2px; color: #fff; font-size: 15px; font-weight: bold; padding: 10px 20px; text-transform: capitalize; }
.btnt-toc::before { background: #03b4cc; bottom: 0; content: &quot;&quot;; left: 20%; margin-left: -10px; position: absolute; top: 0; width: 4px; }
.btnt-toc { margin: 0; padding: 30px 20px; position: relative; }
.btnt-toc li { list-style: none; margin: 0; padding: 0; position: relative; }
.btnt-toc &gt; li .toc-date { color: #000; display: block; font-size: 14px; font-weight: bold; position: absolute; text-transform: uppercase; top: 25px; width: 15%; }
.btnt-toc &gt; li .btnt-icon { background: #fff; border-radius: 50%; box-shadow: 0 0 0 4px #03b4cc; color: #fff; font-size: 1.4em; font-style: normal; font-variant: normal; font-weight: normal; height: 10px; left: 20%; line-height: 10px; margin: 0 0 0 -25px; position: absolute; text-align: center; text-transform: none; top: 30px; width: 10px; }
.btnt-toc &gt; li .btnt-post::after { border-color: transparent #f8f8ff transparent transparent; border-style: solid; border-width: 10px; content: &quot; &quot;; height: 0; pointer-events: none; position: absolute; right: 100%; top: auto; width: 0; }
.btnt-toc &gt; li .btnt-post { background: #f8f8ff; border-radius: 5px; display: block; font-size: 15px; line-height: 15px; margin: 0 0 15px 23%; padding: 25px 30px; position: relative; }
.btnt-toc &gt; li .btnt-post a { color: #000; font-weight: bold; }
.btnt-toc &gt; li .btnt-post a:hover { color: #000; }
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js' type='text/javascript'/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<script type='text/javascript'>
  /*<![CDATA[*/
$(document).ready(function(){var static_page_text=$.trim($(".post-body").text());var text_month=[,"Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sept","Oct","Nov","Dec"];if(static_page_text==="[sitemap]"){var postbody=$(".post-body");$.ajax({url:"/feeds/posts/default?alt=json-in-script",type:"get",dataType:"jsonp",success:function(e){var t=[];for(var n=0;n<e.feed.category.length;n++){t.push(e.feed.category[n].term)}var t=t.join("/");postbody.html('<div class="btnt-sitemap"></div>');$(".post-body .btnt-sitemap").text(t);var r=$(".btnt-sitemap").text().split("/");var i="";for(get=0;get<r.length;++get){i+="<span>"+r[get]+"</span>"}$(".btnt-sitemap").html(i);$(".btnt-sitemap span").each(function(){var e=$(this);var t=$(this).text();$.ajax({url:"/feeds/posts/default/-/"+t+"?alt=json-in-script",type:"get",dataType:"jsonp",success:function(n){var r="";var i='<ul class="btnt-toc">';for(var s=0;s<n.feed.entry.length;s++){for(var o=0;o<n.feed.entry[s].link.length;o++){if(n.feed.entry[s].link[o].rel=="alternate"){r=n.feed.entry[s].link[o].href;break}}var u=n.feed.entry[s].title.$t;var a=n.feed.entry[s].published.$t,f=a.substring(0,4),l=a.substring(5,7),c=a.substring(8,10),h='<span class="day">'+c.replace(/^0+/,"")+'</span><span class="month">'+text_month[parseInt(l,10)]+' </span><span class="year">'+f+"</span>";i+='<li><div class="toc-date">'+h+'</div><div class="btnt-icon"></div><span class="btnt-post"><a href="'+r+'">'+u+"</a></span></li>"}i+="</ul>";e.replaceWith('<div class="btnt-toc-wrap"><div class="btnt-cat">'+t+'</div>'+i+"</div>")}})})}})}});
  /*]]>*/
</script></b:if>

Сохраняете шаблон, следующий шаг-нажимаем создать страницу, переходим вверху по вкладке HTML и вставить [sitemap] (со скобками). Придумайте название страницы (карта, содержание, все темы или записи) и опубликовать.

На этом закончу, все вопросы по установке и настройке задавайте в комментариях или контакты, форма для связи. Всего доброго.




Автор статьи ✎ Olga Protasova Выпуск ✹ 8/20/2013 Ярлыки ►


Открыть комментарии →

9 коммент. :

  1. Оля, код не работает. Пробовала в нескольких блогах.

    ОтветитьУдалить
    Ответы
    1. Татьяна, пробуйте вставить другой скрипт, смотрите в сообщении, дописала.

      Удалить
  2. Ольга, здравствуйте. Попробовала новый скрипт в нескольких блогах, присваивала ярлыки, делала по 10 сообщений, но код так и не работает.

    ОтветитьУдалить
    Ответы
    1. Здравствуйте Татьяна. Странно, у меня были сомнения по первому коду, но второй должен работать. Скажите, а как понять "делала по 10 сообщений". После вставки кода все сообщения блога автоматически разбиваются по присвоенным ярлыкам. И адрес блога написан верно? надо так: http://www.bdblogov.ru, это на примере моего адреса. Посмотрите еще раз внимательно. Если не поможет, значит что то в настройках браузера.

      Удалить
  3. Безумно понравилась эта карта блога, но все таки скорость загрузки она будет тормозить не по детски. :)

    ОтветитьУдалить
  4. Сайхан, карта красивая, она у меня была установлена в этом блоге. Но временами скрипт тормозит, читатели даже на почту писали, что карта не отображается. На других блогах встречала такую карту, работает. Вообще в блоггер с этими картами беда, у одних работает, у других нет.

    ОтветитьУдалить
  5. Перестала работать карта! Хееелп!!!

    ОтветитьУдалить
    Ответы
    1. Лія Олійник, в связи с перенаправлением блогов блоггер по протоколу HTTPS с шифрованием, много скриптов не работают, в том числе и карт.
      Я уже давно вручную написала содержание статей.

      Удалить
  6. Лія Олійник, попробуйте вставить скрипт карты по этой ссылке:

    http://www.bdblogov.ru/2014/08/Sitemap-c-picture-and-number-comments.html

    Правда она не разбивает по ярлыкам, и не все шаблоны поддерживают. На многих родных шаблонах блоггер пока работает, в нестандартных в одном из трех.

    ОтветитьУдалить

Ув. читатели! Для вставки HTML кода в комментарии, воспользуйтесь в меню Генератором преобразования HTML кода.

 
Технологии Blogger.

Форма для связи

Имя

Электронная почта *

Сообщение *