Как в Blogger отобразить похожие статьи в низу постов

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

Как в Blogger отобразить похожие статьи в низу постов

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

Для чего нужны похожие записи внизу каждого сообщения в Blogger?


Посетителям нужно дать дополнительные материалы, чтобы они могли так сказать заняться вашим блогом и провести на нем больше времени. Привлечь внимание читателей на более длительный период времени, является чрезвычайно полезным не только для роста поведенческого фактора или уменьшения показателей отказов, но и для увеличения доходов веб-сайта. Чем больше времени люди будут находиться на вашем сайте, тем больше шансов заработать больше денег на контекстной рекламе Adsense, Директ и т.п.

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

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

Похожие статьи

Как добавить похожие статьи внизу постов в 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. Сделайте предварительный просмотр своих сообщений, чтобы убедиться, что все работает как надо.

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

13 Комментариев к “Как в Blogger отобразить похожие статьи в низу постов

    1. Садыков ИльшатСадыков Ильшат Post author

      Привет, он работает с помощью ярлыков. Если ваши сообщения имеют более 5 постов в рамках одного ярлыка (метки), он будет отображать Похожие сообщения. Надеюсь, что я смог помочь.

  1. Ольга

    Ну вот посмотрите сами — money-flora.blogspot.com я здесь для пробы вставила код, как у Вас описано. С ярлыком «как заработать в интернете» — более пяти постов. После поста только появилось пустое место и все, ничего не отображается.

    1. Садыков ИльшатСадыков Ильшат Post author

      хм... да, я вижу код есть у вас, попробуйте обновить jquery, а то есть вставьте <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js' type='text/javascript'></script> после , не чего не произойдет пишете.

    1. Садыков ИльшатСадыков Ильшат Post author

      Так, попробуйте убрать все лишние ярлыки, то есть оставь те только Ярлыки: как заработать в интернете. Должно получиться, если нет пишем сюда опять...

    1. Садыков ИльшатСадыков Ильшат Post author

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

  2. Ольга

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>