Виджет похожие сообщения в виде списка под каждым постом в 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(http://4.bp.blogspot.com/-Bt0JYGRHfpk/T7ZpN5RNSQI/AAAAAAAAGJQ/zQtrWVZwgHA/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


19 комментариев:

  1. Здравствуйте, Виктория! Вопрос немного не по теме статьи, но не знаю, где его еще задать. У вас на блоге не нашел информации о том как поставить шрифты для заголовков гаджетов. На моем блоге все заголовки написаны обычным Georgia и смотрится как-то скучно.

    Тоже самое относится и к комментариям – очень раздражают эти огромные надписи «Комментариев нет» и «Отправить комментарий». Буду рад, если поможете решить проблему.

    P.S. А вообще у Вас очень интересный и полезный блог. И еще раз прошу прощения, что вопрос задал не по теме.

    ОтветитьУдалить
    Ответы
    1. Здравствуйте Александр. Про размер и расположение всех заголовков почитайте здесь. http://www.shpargalochki.ru/2015/01/vyrovnjat-zagolovki-po-centru.html таким же образом можно задать и стиль шрифта.
      Вот здесь http://www.indeep76.com/Style/Example007/fonts.html кое-что предложено. Можно для заголовков использовать некоторые веб шрифты. Пост по теме http://www.shpargalochki.ru/2015/02/Web-shrifty-dlja-bloga.html

      Удалить
  2. Вика, что-то у меня ничего не отображается. Больше нет кодов для похожих постов? Дело в том, что у меня гугл заблокировал 30 страниц с адресом LinkWithin в блоге VDV.
    Было все нормально два года, а здесь блокировка, ничего не пойму.

    ОтветитьУдалить
    Ответы
    1. Оль, попробуй поставить под post-footer-line-2 или 3 у всех по разному. У меня нормально работает смотри тут http://deladomahnie.blogspot.ru/2015/10/na-chto-obratit-vnimanie-pri-vybore-shtor.html#more
      Вот есть ещё с картинками. http://www.shpargalochki.ru/2014/08/pohozhie-stati-s-miniatjurami.html
      Сейчас ещё один тебе на почту скину как у меня на этом блоге. Отлично работает.

      Удалить
  3. Вика, ставила и под 2, и под 3, пусто. По почте получила, вечером займусь, отпишусь. Спасибо.

    ОтветитьУдалить
    Ответы
    1. Наворочено наверное в шаблоне за всё это время. Бывает.

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

    ОтветитьУдалить
  5. Здравствуйте Cy Frog, да такое бывает когда статей ещё не много. Мне такой вариант , поверьте, больше всего нравится из всех, что я пробовала. У меня на новом блоге http://www.dela-domashnie.ru/ тоже самое. Потом всё наладится. Удачи Вам.

    ОтветитьУдалить
    Ответы
    1. Этот комментарий был удален автором.

      Удалить
    2. Спасибо. А можно ли как-то менять размер и тип шрифта в тексте ссылок ?

      Удалить
    3. Cy Frog, цвет ссылок отображается именно так , как они настроены в шаблоне блога. А размер можно поменять добавив , например font-size:20px; перед text-indent в стилях CSS

      Удалить
    4. В этом блоге у Вас курсив на похожих статьях - я именно об этом. Размер шрифта поменял, спасибо, получилось. Но можно-ли узнать, как менять тип шрифта, например жирный/не жирный, или вообще поставить другой шрифт, не Arial ?

      Удалить
    5. Добавьте в стили CSS , допустим font-style:italic; или жирный font-weight:bold; Вообще о семействе шрифтов могу посоветовать этот учебник http://www.webremeslo.ru/css/glava3.html
      А здесь самый полный по всем стилям http://htmlbook.ru/css/font-family.
      Сама по нему училась.

      Удалить
  6. Доброго времени суток Вика! Поздравляю с "новосельем", с первого раза не поняла, что попала к вам! С удовольствием буду наблюдать за вашим новым видением, дизайном блога. Я тоже наконец-то привела свой блог в какой-то порядок, будет время welcome в гости ehzoterika.ru, будет интересно ваше мнение. Вика, установила вышеуказанные похожие сообщения, но у меня они не отражаются нигде. пробовала после всех post-footer-line 1,2,3 (это под строками 1574, 1614, 1715, 1788) их несколько, оставила после post-footer-line 3 (строка 1800) чтоб вы посмотрели. Может что-то сделала не так? Первый код установила перед skin. С уважением Тата.

    ОтветитьУдалить
  7. Тата, там у Вас всего столько могут уже и не работать. В этом коде после homePage написали адрес вашего блога. Не надо. Берите как есть и меняйте только то что отмечено в сообщении. И Вы там ещё указали после Array ярлыки, что ли. Попробуйте не указывать.

    ОтветитьУдалить
  8. Вика, я ничего не меняла и не добавляла, только картинку точку на галочку поменяла. Сейчас все проверила весь ваш указанный код как есть без изменений! С уважением Тата.

    ОтветитьУдалить
  9. Я посмотрела код Вашей страницы там так прописано. Скорее всего, со всеми скриптами не идёт этот.

    ОтветитьУдалить
  10. Это один из самых полезных блогов о Блоггере, которые я встречала. Спасибо автору.

    ОтветитьУдалить
    Ответы
    1. Akula-Z спасибо за ваш визит и доверие. мне очень приятно.

      Удалить

Пользовательский поиск