Похожие статьи с миниатюрами под каждым постом в блоге

<.noindex>

Приветствую всех, кто читает мои шпаргалки. В последнее время ко мне обратились уже несколько постоянных читателей, у которых возникает проблема с установкой виджета  похожие статьи блога с миниатюрами под каждым постом от сервиса LinkWithin.
Да такое недоразумение существует. И причину этого мне подсказала моя "коллега по цеху" Ольга Протасова в своём блоге http://www.bdblogov.ru.

Дело в том, что если виджет был установлен до декабря 2013 он работает корректно. А вот, кто устанавливал его после этой даты, столкнулись с тем, что картинки не отображаются. Не работает автозагрузка. Есть ещё один подобный сервис   nRelate. Признаюсь, когда я пробовала его у себя в блоге, отображались только последние сообщения. А это не то.

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

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

1. Заходим в панель администратора. Вкладка шаблон. Обязательно делаем резервную копию.
2. С помощью клавиш Ctrl+F находим, закрывающийся тег </head> и прямо над ним вставляем следующий код.

<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: #EEEEEE;}
#related-posts h2{margin-top: 10px;background:none;font:16px Oswald;padding:3px;color:#999999; text-transform:uppercase;}
#related-posts .related_img {margin:5px;border:2px solid #f2f2f2;width:100px;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 {color:#666;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>

Здесь по желанию можно изменить цвет фона, заголовка, размер текста. Я выделила синим. Красным-размер изображения.

 3.Теперь необходимо найти  такую строчку. Также используя клавиши Ctrl+F.

 <b:includable id='postQuickEdit' var='post'>

Сейчас внимательно посмотрите на скриншот, чтобы понять куда будем вставлять следующий код.

Жёлтым выделена  искомая строка. Над ней, закрывающийся элемент </b:includable>.

4. Вот сразу над ним и  вставим следующий код.

<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=4&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=4;
var relatedpoststitle=&quot;<b>похожие сообщения:</b>&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/>
</b:if>

Красным в двух местах - это количество миниатюр, которые будут выводиться. И синим ваш заголовок.

Должно получиться приблизительно следующее:

</div>

тут весь код

</b:includable>

<b:includable id='postQuickEdit' var='post'>

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

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

источник http://helplogger.blogspot.ru

Хватит на сегодня информации. Если постараться, то всё получится. Главное терпение.

Удачи всем нам. 

Ой, а что это там ниже? Ну надо же! Нажимаем!

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

введите пожалуйста свой адрес электронной почты :