Выводим похожие сообщения с миниатюрами под всеми постами блога

Вывод похожих сообщений, то есть сообщений, схожих по смыслу, с тем сообщением, которое посетитель прочитал, помогает повысить посещаемость страниц блога почти на 10% и предоставляет дополнительное удобство для читателей блога.

Кроме того, это повышает количество ссылок на сообщения блога и способствует правильной внутренней перелинковке страниц блога в автоматическом режиме.

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

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



1.  Заходим на вкладку: Шаблон и кликаем: Изменить HTML.

2.  Ставим галочку в чекбокс: Расширить шаблоны виджета и ищем с помощью клавиш CTRL+ F фрагмент кода: </head>.

3. Сразу перед фрагментом кода: </head>  вставляем следующий код:

<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;

margin-bottom: 20px; 

 }
#related-posts a:hover{
color:black;
}
#related-posts a:hover {
background-color:#d4eaf2;

margin-bottom: 20px; 

 }
</style>
<script src='http://dl.dropbox.com/u/48089857/relatedthumbs19.js' 

type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

4. Далее таким же образом ищем фрагмент кода:

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

В зависимости от выбранного вами шаблона вы можете не найти данный фрагмент кода. В таком случае ищем вот такой фрагмент кода:

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

 5.  Сразу после найденного фрагмента кода вставляем следующий скрипт:

<!-- Related Posts with Thumbnails Code Start-->
<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 + 

"?alt=json-in-script&

callback=related_results_labels_thumbs&max-results=6"' 

type='text/javascript'/></b:if></b:loop><a href='#' style='display:none;'>

Related Posts with thumbnails for blogger</a>

<a href='#' style='display:none;'>blogger widgets</a>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=7;
var relatedpoststitle="Похожие сообщения";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

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

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

Выделенная красным фраза: Похожие сообщения также может быть изменена на ту, которая подходит вам больше.

6.  Сохраняем сделанные изменения.

Если вы все сделали правильно, то у вас должна получиться примерно такая картинка под вашим сообщением:

Схема вывода похожих сообщений под всеми постами блога была позаимствована у блоггера Сергея Разгуляева здесь.

 На следующем занятии мы продолжим совершенствовать навигацию на нашем блоге.




Если вы случайно попали на эту страницу и хотите присоединиться к тренингу, вы можете сделать это через эту подписную форму:

Ваше имя: * Ваш e-mail: * В тренинге участвуют: слушателей

Забрать на свою страничку: