Как установить похожие сообщения с миниатюрами под каждым постом в Blogger

Доброго времени суток, читатели и гости блога. Для того чтобы вывести похожие статьи с миниатюрами в конце каждого сообщения блога, мы часто прибегаем к сторонним сервисам. Самые популярные, наверное, это    Linkwithin, nRelate и Engageya.
Сегодня предложу ещё один вариант.


 Как установить похожие сообщения  с миниатюрами под каждым постом в Blogger.

Мне очень приглянулся этот скрипт. Он достаточно лёгкий, особой нагрузки на блог нет. К тому же есть возможность подогнать его под любой дизайн.  Я его подглядела на сайте http://helplogger.blogspot.ru. Вся установка делается в 2 шага.



Для начала копируем оба кода себе в блокнот и разберём настройки.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts{float:left;width:auto;}
#related-posts a{border-right: 1px dotted #eaeaea;}
#related-posts a:hover{background: #CCCCCC ;}
#related-posts h2{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999 ; text-transform:uppercase;}
#related-posts .related_img {margin:5px;border:2px solid #f2f2f2;width:110px;height:100px;transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;-webkit-border-radius: 5px;  -moz-border-radius: 5px; border-radius: 5px; }
#related-title {width:110px;height:100px; ;text-align:center;padding: 0px 5px 10px;font-size:12px;width:110px; height: 40px;}
#related-posts .related_img:hover{border:2px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style>
<script type='text/javascript' src='http://helplogger.googlecode.com/svn/trunk/relatedposts.js' />
</b:if>

background: #CCCCCC-цвет фона при наведении. 

color:#999999 - цвет заголовка (похожие сообщения).
font:18px-размер шрифта заголовка.
width:110px;height:100px;-ширина и высота миниатюры.

<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>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=5&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle=&quot;<b>Похожие сообщения:</b>&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/>
</b:if>

Цифра 5 это количество отображаемых постов. название можно придумать своё.

Приступим к установке. Заходим во вкладку шаблон и обязательно делаем резервное копирование. Нажимаем изменить HTML. И с помощью клавиш Ctrl+F находим закрывающийся тег </head>. Кто пока не знает, как это легко сделать прочитайте пост об этом. Сразу над ним вставляем первый код.

Далее.Там, где в шаблоне вся секция инклубов, найдите вот это <b:includable id='post' var='post'>. Нажмите на чёрную стрелочку (маркер) напротив, чтобы раскрыть всё содержимое. Посмотрите на скриншот. 

И здесь нам понадобится строка <div class='post-footer'>. Или одна из следующих (если их несколько нам нужна последняя).

<div class='post-footer-line post-footer-line-1'>.
<div class='post-footer-line post-footer-line-2'>
<div class='post-footer-line post-footer-line-3'>

Сразу под ней устанавливаем второй код.

Нажмите просмотреть шаблон и сохранить если всё нормально. Что должно получиться посмотрите у меня в конце сообщения. А мне остаётся на этом поставить точку и пожелать вам удачи. До новых встреч.Спасибо, что читаете мои шпаргалки.

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

Введите Ваш email