Как установить виджет похожие статьи для blogger

Posted: суббота, 15 февраля 2014 г. by Unknown in Ярлыки: , ,
0

Наверное всем хотелось бы внизу статьи наблюдать ссылки на похожие материалы вашего блога. К сожалению Blogspot не предусмотрел такой возможности, оставив только ярлыки. Но путем добавления стороннего кода в тело шаблона можно исправить эту проблему, да и смотреться будет намного красивее и более информативно.
Похожие статьи для Blogspot (Blogger) можно сделать как с миниатюрами, так и без них. Это кому как нравится. Одно могу сказать что лишняя картинка грузит блог, увеличивая время загрузки. На моем блоге тоже стоит виджет без миниатюр (картинки из статьи).


 


Как установить виджет похожие статьи



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



  Зайдите в панель инструментов Blogspot – Шаблон – Изменить HTML – Приступить. Нажмите расширить шаблоны. Для необходимого поиска необходимой строчки воспользуйтесь поиском (Ctrl+F). Найдите конец тела шаблона, строчку:



</head>



Перед ней вставьте настройку дизайна виджета:


<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;
}
#related-posts a:hover{
color:black;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://dl.dropbox.com/u/48089857/relatedthumbs19.js' type='text/javascript'/>
</b:if>
  Теперь нужно вставить код в шаблон, в код конца сообщения. У каждого шаблона по разному. Обычно у конца сообщения в шаблоне 3 линии. У меня например две. НО в стандартных должно быть три.



Опять воспользуйтесь поиском. Найдите строчку кода линии:



<div class='post-footer-line post-footer-line-1'> Или
<p class='post-footer-line post-footer-line-1'>



После строки вставьте код самого виджета:



<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_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://www.avitra.ru/' style='display:none;'>Related Posts for blogger</a><script type='text/javascript'>var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle="Похожие статьи";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>

Как настроить виджет


  Вывод количества отображаемых похожих статей, по умолчанию стоит 5 статей. Можете изменить количество на ваше усмотрение.



var maxresults=5;



  Так же есть возможность изменить саму надпись "Похожие статьи", на любую другую. В этой строчки кода:



var relatedpoststitle="Похожие статьи";


Есть возможность поменять цвет и размер шрифта, тела виджета.

0 коммент.: