Вывод похожих записей в конце
каждой статьи на 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 == "item"'>
<script
type='text/javascript'>
var
defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA1NMi7AOuxGl5cWPlOa1-SvqgK83DaaE5gr9KPElzRjDqOotAPpHbX4f1UXjK4INXS3OH39ZFqTxedsuTY_9UP-wQgtFZDL_plPy9tNXvAq9q9ALS4zSCgbzCOkWVpbByTejR8Lxi1RHT/s1600/no_image.jpg";
var maxresults=3;
var
splittercolor="#fff";
var
relatedpoststitle="Related Articles:";
</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]=»https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA1NMi7AOuxGl5cWPlOa1-SvqgK83DaaE5gr9KPElzRjDqOotAPpHbX4f1UXjK4INXS3OH39ZFqTxedsuTY_9UP-wQgtFZDL_plPy9tNXvAq9q9ALS4zSCgbzCOkWVpbByTejR8Lxi1RHT/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 == "item"'>
<div
id='related-posts'>
<b:loop
values='data:post.labels' var='label'>
<b:if
cond='data:label.isLast != "true"'>
</b:if>
<script
expr:src='"/feeds/posts/default/-/" + data:label.name +
"?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"'
type='text/javascript'/></b:loop>
<script
type='text/javascript'>
removeRelatedDuplicates_thumbs
();
printRelatedLabels_thumbs
("<data:post.url/>");
</script>
</div></b:if>
Теперь сохраните шаблон и откройте любую из ваших статей. Вывод похожих записей в статье на Blogger выполнен.
Татьяна, сделала вывод похожих записей так, как вы написали, сохранила, но наверное у меня нет похожих статей, они не вышли в список.
ОтветитьУдалитьСпасибо большое за такую полезную информацию !
ОтветитьУдалитьОля, это очень сложная настройка и не у всех получается её выполнить. У меня получилось, но только на этом блоге.
Удалить