Google+ Вывод похожих записей в статье на Blogger : Бизнес-центр Татьяны Ошариной

 

▼ Создание блога на Blogger

Практический тренинг


 

      ▼ Создай страницу подписки!         

Практический

тренинг


 

▼ Школа-студия «Вдохновение»  

Регистрация


 

▼ Как создать сайт на WordPress?

Практический

тренинг


 

10.19.2014

Вывод похожих записей в статье на Blogger

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


Для чего нужен вывод похожих записей в конце каждой статьи?

Нужно показать посетителям имеющиеся на блоге материалы, статьи, чтобы посетители могли найти дополнительную информацию по теме и провели на блоге больше времени, а также для того, чтобы на блоге было меньше отказов (отказ – длительность посещения блога посетителем менее 15 сек.).

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

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





Как в Blogger  сделать вывод похожих записей  в конце каждой статьи –несколько статей с картинками и заголовками постов блога?


В административной панели блога, нажмите поочерёдно на вкладки «Шаблон» - «Изменить HTML».
В открывшемся коде найдите элемент кода </head> и поставьте выше этого тега следующий код:

<style>
#related-posts {
float: left;
width: 650px;
border-bottom: 1px solid #ddd;
height: 290px;
}
#related-posts h2 {
margin-top: 50px;
border-bottom: 0px;
border-top: 1px solid #ddd;
padding-top: 20px;
margin-bottom: 10px;
margin-left: 3px;
color: #666;
font-size: 16px;
}
</style>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
var defaultnoimage=&quot;http://3.bp.blogspot.com/-PpjfsStySz0/UF91FE7rxfI/AAAAAAAACl8/092MmUHSFQ0/s1600/no_image.jpg&quot;;
var maxresults=3;
var splittercolor=&quot;#fff&quot;;
var relatedpoststitle=&quot;Related Articles:&quot;;
</script>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
var thumburl = new Array();
function related_results_labels_thumbs(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
try
{thumburl[relatedTitlesNum]=entry.media$thumbnail.url;}
catch (error){
s=entry.content.$t;a=s.indexOf («<img»);b=s.indexOf («src=\»",a);c=s.indexOf («\»",b+5);d=s.substr (b+5,c-b-5);
if ((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="«))
{thumburl[relatedTitlesNum]=d;} else {if (typeof (defaultnoimage) !== 'undefined') thumburl[relatedTitlesNum]=defaultnoimage; else thumburl[relatedTitlesNum]=»http://3.bp.blogspot.com/-PpjfsStySz0/UF91FE7rxfI/AAAAAAAACl8/092MmUHSFQ0/s1600/no_image.jpg";}
}
if (relatedTitles[relatedTitlesNum].length>35) relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring (0, 35)+"...";
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
}
}
}
}
function removeRelatedDuplicates_thumbs () {
var tmp = new Array (0);
var tmp2 = new Array (0);
var tmp3 = new Array (0);
for (var i = 0; i < relatedUrls.length; i++) {
if (!contains_thumbs (tmp, relatedUrls[i]))
{
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp3.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
tmp3[tmp3.length - 1] = thumburl[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
thumburl=tmp3;
}
function contains_thumbs (a, e) {
for (var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels_thumbs (current) {
var splitbarcolor;
if (typeof (splittercolor) !== 'undefined') splitbarcolor=splittercolor; else splitbarcolor="#DDDDDD";
for (var i = 0; i < relatedUrls.length; i++)
{
if ((relatedUrls[i]==current)||(!relatedTitles[i]))
{
relatedUrls.splice (i,1);
relatedTitles.splice (i,1);
thumburl.splice (i,1);
i--;
}
}
var r = Math.floor ((relatedTitles.length — 1) * Math.random ());
var i = 0;
if (relatedTitles.length>0) document.write ('<h2>'+relatedpoststitle+'</h2>');
document.write ('<div style="clear: both;"/>');
while (i < relatedTitles.length && i < 20 && i<maxresults) {
document.write ('<a style="text-decoration:none;padding:5px;float:left;');
if (i!=0) document.write ('border-left:solid 0.5px '+splitbarcolor+';"');
else document.write ('"');
document.write (' href="' + relatedUrls[r] + '"><img style="width:200px;height:120px;border:0px;" src="'+thumburl[r]+'"/><br/><div style="padding-left:3px;height:65px;border: 0pt none ; margin: 3px 0pt 0pt; padding: 0pt; font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; line-height: normal; font-size-adjust: none; font-stretch: normal;">'+relatedTitles[r]+'</div></a>');
i++;
if (r < relatedTitles.length — 1) {
r++;
} else {
r = 0;
}
}
document.write ('</div>');
relatedUrls.splice (0,relatedUrls.length);
thumburl.splice (0,thumburl.length);
relatedTitles.splice (0,relatedTitles.length);
}
//]]>
</script>
</b:if>

Обязательно скопированные коды сохраняйте в блокноте, а уж потом и ставьте к себе на блог! 

Выполнив этот шаг, найдите в шаблоне тег <data:post.body/> и чуть ниже него вставьте следующий HTML код. 
В случае если вы не найдете <data:post.body/>, поищите <div class='post-footer-line post-footer-line-1'></div>  и вставьте код ниже него:


<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=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs ();
printRelatedLabels_thumbs (&quot;<data:post.url/>&quot;);
</script>
</div></b:if>


Теперь сохраните шаблон и откройте любую из ваших статей. Вывод похожих записей  в статье на Blogger выполнен.



3 комментария :

  1. Татьяна, сделала вывод похожих записей так, как вы написали, сохранила, но наверное у меня нет похожих статей, они не вышли в список.

    ОтветитьУдалить
  2. Спасибо большое за такую полезную информацию !

    ОтветитьУдалить
    Ответы
    1. Оля, это очень сложная настройка и не у всех получается её выполнить. У меня получилось, но только на этом блоге.

      Удалить