» » Виджет связанных статей для blogger

Виджет связанных статей для blogger

Часто на блогах и сайтах можно увидеть под сообщением ссылки с картинками или без на похожие темы, которые имеются на ресурсе. Данного гаджета на Блоггере нет, но его можно установить самостоятельно. Виджеты бывают разного вида и оформления - с картинкой и без, с анонсом (описанием) похожих статей, с датой написания поста или обычные ссылки. 
Виджет связанных статей помогает посетителям находить новые интересные статьи на сайте. 
Он показывает посетителю ссылки на статьи с таким же ярлыком (рубрикой), по-этому, если вы не используете на сайте гаджет ярлыки, у вас он работать не будет. 
Предложенный вашему вниманию сегодняшний виджет без маленьких картинок, только ссылки на посты. Подойдёт для тех, кто старается сделать блог быстрее, ведь с миниатюрами ресурс будет загружается медленнее. 
У виджета несколько вариантов оформления. Нашла коды на сайте allbloggertrick4u.blogspot.com

Установка гаджета 

Переходим к шаблону и нажимаем Тема / Изменить html".
Ищем </head> и выше него добавляем один из вариантов кода:

Вариант 1

картинка
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {margin: 10px 5px;}
#related-posts h2 {letter-spacing: 1px;font-size: 18px; color: #222;margin-bottom: 15px;position: relative;left: 5px; top: 10px;}
#related-posts a {font-size: 14px; color: #999;text-transform: capitalize;}
#related-posts a:hover {text-decoration: none;color: #555;}
#related-posts ul {list-style-type: none; margin: 0 0 0px 0;padding: 5px;}
#related-posts ul {list-style-type: none;}
#about { float: right; font-size: 12px; }
#related-posts li {padding: 12px;border-bottom: 2px solid #fff;border-left: 5px solid #BCC2B9;background-color: #F4F4F4;}
#related-posts li:hover {background: #F4F4F4;font-weight:bold;background-color: #eee;border-left: 5px solid #188DD7;}
</style>
<script type='text/javascript'>
var relatedpoststitle=&quot;Похожие статьи:";
</script>
<script src='https://rawgit.com/101Helper/docs/master/related-post.js' type='text/javascript'/>
</b:if>
Меняем цвета - выделила в коде красным. Первые два - цвет полосы и боковая линия. Вторые 2 - цвет при наведении курсора. 
Текст названия виджета, меняем на свой - в коде выделила оранжевым. Идеи для текста:
  • Похожие сообщения
  • Вам будет интересно
  • Рекомендуем
  • Ещё на сайте
  • Другая информация на сайте
  • Рекомендуем почитать
  • Похожие темы

Вариант 2

вариант 2
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {margin: 13px 5px;background-color: #6d3301;}
#related-posts h2 {color: #FFFFFF;margin-bottom: 13px;left: 7px;top: 10px;font-family: Trebuchet ms;}
#related-posts a {font-size: 14px;color: #999;text-transform: capitalize;}
#related-posts a:hover {text-decoration: none;color: #555;}
#about { float: right; font-size: 12px; }
#related-posts ul {list-style-type: none;margin: 0 0 0px 0;padding: 5px;}
#related-posts li {padding: 12px;border-bottom: 3px solid #eaeaea;background-color: #FFFFFF;}
</style>
<script type='text/javascript'>
var relatedpoststitle=&quot;Похожие статьи:&quot;;
</script>
<script src='https://rawgit.com/101Helper/docs/master/related-post.js' type='text/javascript'/>
</b:if>
Меняем цвет рамки - выделила красным.
Текст названия виджета пишем свой - в коде выделила оранжевым.
Шрифт и его размер - зелёным.

Вариант 3

Цвет меняется при наведении курсора.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts h2 {letter-spacing: 1px;font-size: 18px; color: #222;margin-bottom: 15px;position: relative;left: 5px; top: 15px;}
#related-posts a {font-size: 14px; color: #fff;text-transform: capitalize;text-decoration:none;}
#related-posts ul {list-style-type: none; margin: 0 0 0px 0;padding: 5px;}
#related-posts li {border-radius: 2px;padding: 10px;margin-top: 3px;background-color: #777777; border: 1px solid #777777;}
#about { float: right; font-size: 12px; }
#related-posts li:hover {background: #F4F4F4;border: 1px solid #3079ED;background-color: #4D90F0;}
#related-posts { padding-bottom: 45px; }
</style>
<script type='text/javascript'>
var relatedpoststitle=&quot;Похожие статьи:";
</script>
<script src='https://rawgit.com/101Helper/docs/master/related-post.js' type='text/javascript'/>
</b:if>
Меняем цвет:
Цвет фона и рамки - выделила красным.
Цвет фона и рамки при наведении курсора - выделила синим.
Текст названия виджета пишем свой - в коде выделила оранжевым.

Выбрав стиль, ищем в шаблоне фрагмент кода:
<div class='post-footer'>
Отрезок кода может встречаться несколько раз, нам нужен второй.
Вставьте код, представленный ниже, чуть выше указанного фрагмента кода:
<b:if cond='data:blog.pageType == &quot;item&quot;'><div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != &quot;true&quot;'> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'> var maxresults=6; removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;); </script></div></b:if>
Изменить количество ссылок можно поменяв число 6, на нужное -  выделила розовым цветом.

Ваши комментарии:

Комментарии со спамом удаляются.