Виджет похожие сообщения в виде списка под каждым постом в Blogger.

Привет, друзья. Сегодня для вас симпатичный, скромненький и вполне элегантный виджет похожие сообщения (related-post) в виде списка под каждым постом блога.
Чтобы связать сообщения похожие по тематике и направить наших посетителей за информацией на другие страницы блога,


зачастую авторы устанавливают виджет похожие сообщения под каждой статьёй. Это влияет и на поведенческие факторы и улучшает навигацию в блоге.

Самым востребованным, на мой взгляд, это гаджет похожих постов от LinkWithin. Не менее популярным в последнее время стал сайт engageya.com. Который предлагает свой код для отображения связанных постов. Сейчас о нём много информации. Если кому интересно найдите его в поиске. Ещё подобные сервисы генерации кода похожих статей 2leep.com и nRelate.

Тут уж вы сами определяетесь какому отдать предпочтение. Существует много готовых кодов, которые неплохо себя зарекомендовали. Один из таких был предложен здесь.

Я в своём блоге испробовала не мало таких вариантов и остановилась на гаджете без миниатюр. Который уже давно отображает статьи по теме на этом блоге. Показалось, что перебор картинок режет глаз посетителю. Но это сугубо моё личное мнение.

 Вот так будет выглядеть статьи по теме в конце поста, код которого я сегодня вам предлагаю.

В Блогере он устанавливается всего в 2 шага. Как всегда предлагаю скопировать коды сначала в блокнот, чтобы понять где и что можно изменить. Первый код.

#related-post background:none;width:100%;margin-top:35px;margin-bottom:10px;padding:5px 0 10px 0px}
#related-post h4{font-size:150%;text-transform:uppercase;margin:0 0 15px;padding:0;font-weight:normal}
#related-post li{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH9jZ3afQgfN8xdmAlSHfn2MV04lkOt-0qw9y1Aut6NytMOa_OvM4hK_GIiR-YX6LvYfpxYTboPDwLepLgMao8qW32bnEdg5PiQxbUyry2vNntYdGpFZUbIWKYLM4SDmugUGd_Klp3Fvcu/s1600/bullet.png) no-repeat 1px 5px;color:#2c3e50;text-indent:0;line-height:1.6em;margin:0;padding:0 0 3px 19px}
#related-post .widget{margin:0;padding:0}
#related-post ul{list-style:none;margin:0;padding:0}

Синим цветом выделен адрес иконки в виде кнопочки. Можно поставить свою.

Второй код.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <div id='related-post' class='related-post'/>
  <script type='text/javascript'>
  var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
          &quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
      </b:loop></b:if>];
  var relatedPostConfig = {
      homePage: &quot;<data:blog.homepageUrl/>&quot;,
      widgetTitle: &quot;&lt;h4&gt;Похожие статьи блога:&lt;/h4&gt;&quot;,
      numPosts: 5,
      titleLength: &quot;auto&quot;,
      containerId: &quot;related-post&quot;,
      newTabLink: false,
      widgetStyle: 1,
      callBack: function() {}
  };
  </script>
  <script type='text/javascript' src='https://kang-is.googlecode.com/svn/trunk/javascript/related-post.min.js'/>
</b:if>

Здесь цветом выделен заголовок виджета. Что захотите напишите в этой строке. И цифра 5 отвечает за количество отображаемых ссылок.

А теперь сама установка. Заходим во вкладку шаблон. Не забываем сделать резервную копию. Находим строку ]]></b:skin> и над ней устанавливаем первый код. Далее ищем в шаблоне строку.

<div class='post-footer-line post-footer-line-1'>

Сразу под ней вставляем второй код. Нажмите просмотр.Если не будет замечаний, то всё вы сделали верно. Смело нажимаем сохранить. Вернитесь в блог и порадуйтесь результату.

Вот, и всё. Не так это сложно. Надеюсь, что вы с этим справитесь. Удачи вам. Спасибо за ваш визит.

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email