Как вывести похожие записи в блогер

Здравствуй дорогой друг!
Вы наверное видели на сайтах в конце статьи блок с похожими записями. Такие блоки можно вывести и на Blogspot.

Наведя курсором мыши на картинку,они вращаются. Это очень задерживает Вашего читателя на блоге, а значит ПС учитывается поведенческий фактор. Придется Вам на этот раз потрудится своими ручками и быть предельно внимательными. Давайте уже начнем. Зайдем в панель инструментов, выберем шаблон, изменить html. Находим строчку </head c помощью клавиши СTRL+F и нажимая ENTER. Высвечивается тег и выше его вставляете следующий код.





<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedUrls = new Array();
var relatedpSummary = new Array();
var relatedThumb = new Array();
var relatedTitlesNum = 0;
var relatedPostsNum = 4; // number of entries to be shown
var relatedmaxnum = 75; // the number of characters of summary
var relatednoimage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHhYmYrjuaclZRwn5xqQi_ZaeXU1A6mRp4waNCcMjiYVZggLBGkEzSK2DuF9IOtk2df0WB2XYivtFp4rg_ZLaQIwKKXUQig1WR3EP8eJz5l7-x2S5GMiX7bnsL2jP63sIFw-h5KimWH4Ch/s1600/no_image.jpg"; // default picture for entries with no image
//]]>
</script>
<script src="http://makingdifferent.github.io/blogger-widgets/related-posts-with-thumbs-and-summaries.js" />

Здесь Вы можете указать сколько можете выводить похожих сообщений.
 Чуть выше этого же тега </head вставляете следующий код стилей.

<style>
.relatedsumposts {
float: left;
padding: 0px 10px;
overflow: hidden;
text-align: center;
/* width and height of the related posts area */
width: 120px;
height: 200px;
border-right: 1px solid #E5E5E5;
display: inline-block;
}
.relatedsumposts:hover {
background-color: #F7F7F7;
}
.relatedsumposts img:hover {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
}
.relatedsumposts a {
/* link properties */
color: #linkcolor;
display: inline;
font-size: 10px;
line-height: 1;
}
.relatedsumposts img {
/* thumbnail properties */
margin-top: 2px;
height: 82px;
padding: 5px;
width: 82px;
border: 1px solid #fff;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
overflow: hidden;
}
.relatedsumposts h6 {
/* title properties */
display: table-cell;
height: 3em;
margin: 5px 0 0;
overflow: hidden;
padding-bottom: 2px;
vertical-align: middle;
width: 130px;
}
.relatedsumposts p {
/* summary properties */
border-top: 1px solid #E5E5E5;
border-bottom: 1px solid #E5E5E5;
color: #summarycolor;
font-size: 10px;
height: 4em;
line-height: 1;
margin: 5px 0 0;
overflow: hidden;
padding: 5px 0 15px 0;
text-align: left;
}
#relatedpostssum {
background: #F3F3F3;
height: 200px; /* related posts container */
padding: 5px;
width: 100%;
}
.relatedpoststitle {
font-size: 19px;
font-weight: bold;
border-top: 3px solid #FB8227;
color: #777;
display: inline-block;
padding: 5px 10px;
width: 190px;
float: left;
margin: 0px -200px 0px 20px;
transform: rotate(90deg);
transform-origin: left top 0;
-ms-transform: rotate(90deg);
-ms-transform-origin:left top 0;
-webkit-transform: rotate(90deg);
-webkit-transform-origin:left top 0;
font-family: Gill Sans / Gill Sans MT, sans-serif;
}
</style>

Теперь ннужно найти вот такой код в шаблоне

<a expr:href='data:label.url' rel='tag'>
<data:label.name/>
</a>
<b:if cond='data:label.isLast != &quot;true&quot;'>
,
</b:if>
Далее чуть ниже, после тега </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=readpostlabels&amp;max-results=50&quot;' type='text/javascript'/>
</b:if>
Далее ищем еще одну строчку 
</b:includable>
<b:includable id='postQuickEdit' var='post'>
И выше строки </b:includable> 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='post-footer-line post-footer-line-4'>
<div class='relatedpoststitle'>ПОХОЖИЕ СТАТЬИ</div>
<div id='relatedpostssum'>
<script type='text/javascript'>showrelated();</script>
</div>
<div style='clear:both;'/>
</div>
</b:if>

Сохраняем шаблон и любуемся.
Код взят с сайта http://shkolablogger.ru/ Спасибо скажем этому человеку.

С уважением Вероника