Виджет похожие сообщения с миниатюрами под каждым постом Blogger

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

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

Начинающим блогерам лучше всё пробовать на тестовых блогах. И обязательно сделать резервное копирование шаблона при работе на основном.

Шаг 1. Идём во вкладку тема - изменить HTML. В шаблоне ищем закрывающийся тег </head> и сразу над ним вставляем следующий код -

<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts{float:left;width:auto;}
#related-posts a{border-right: 1px dotted #eaeaea;}
#related-posts h4{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;}
#related-posts .related_img {margin:5px;border:2px solid #f2f2f2;object-fit: cover;width:110px;height:100px;-webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px; }
#related-title {color:#333;text-align:center;text-transform:capitalize;padding: 0px 5px 10px;font-size:12px;width:110px; height: 40px;}
</style>
<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.gform_foot.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 thumburl[relatedTitlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaLhGSx-zuZA-1eCMSulnKlFG32lsp_n9fik3xgi1w3nJ7lrFD0BZaDO_eXsbhn0DJAzZo4DNKMI1hqyaFxDMHeZS8g07d86ubKElHINLdHuJQcSsmIYC6qw9KVQ_dPIBlmpvVWOYLdUGT/s1600/no-thumbnail.png'}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(){for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==currentposturl)||(!(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('<h4>'+relatedpoststitle+'</h4>');document.write('<div style="clear: both;"/>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<a style="text-decoration:none;margin:0 4px 10px 0;float:left;');if(i!=0)document.write('"');else document.write('"');document.write(' href="'+relatedUrls[r]+'"><img class="related_img" src="'+thumburl[r]+'"/><br/><div id="related-title">'+relatedTitles[r]+'</div></a>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('</div>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}
//]]>
</script>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

Розовым цветом я отметила участок, отвечающий за стили CSS. Как я писала выше, разберём его в конце сообщения.

Шаг 2. Там же в шаблоне находим

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

или 

<div class='post-footer-line post-footer-line-3'>

Посмотрите предыдущее сообщение, ссылку на которое дала в начале статьи. Пробуйте пока с первой, поскольку шаблоны у всех разные. Устанавливайте над одной из них этот код -

<!-- Related Posts with Thumbnails Code Start-->
<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=35&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle=&quot;<b>Рекомендуем:</b>&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

Установили, нажали сохранить. Просматриваем любое сообщение в блоге. Если виджет не отображается, возвращаетесь обратно в шаблон и ставите над другими строками и так пока не добьётесь результата.

Если всё же, по каким - то причинам похожие сообщения капризничают, найдите вот такую строчку

 <b:includable id='postQuickEdit' var='post'

сразу над ней есть закрывающийся </b:includable> вот прямо над ним устанавливаем код (шаг 2).  Смотрите скриншот.

Нажмите сохранить. Сейчас похожие сообщения должны быть на месте.

Наконец, давайте разберёмся со стилями. Здесь уж всё зависит от вашей фантазии. Можно сделать совершенно неповторимый дизайн.

Допустим, вот так.

Или посмотрите у меня на этом тестовом блоге ещё один вариант.

#related-posts{float:left;width:auto;} - можно в этот код добавить фон для всего блока  #related-posts{background:#eaeaea;float:left;width:auto;}

#related-posts a{border-right: 1px dotted #eaeaea;} - это едва видимые разделители между картинками. Поиграйтесь, если нужно.

#related-posts h4{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;} - это участок заголовка. Можно задать нужный размер шрифта (font:18px), цвет шрифта (color:#999999;). По умолчанию в коде не задан фон участка заголова (background:none;). Если хотите поменяйте none на нужное значение, например  background:#eaeaea; Как на картинке выше.

#related-posts .related_img {margin:5px;border:2px solid #f2f2f2;object-fit: cover;width:110px;height:100px;-webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px; }- стили миниатюр. border:2px solid #f2f2f2; - размер и цвет рамки вокруг картинки. webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px; - округление углов. Если во всех 3-х местах заменить значение 5px на 100 они будут абсолютно круглой формы.

Обратите внимание на высоту и ширину изображений width:110px;height:100px;. Можно сделать их крупнее или мельче. Можно подкорректировать во втором коде количество отображаемых сообщений var maxresults=5;. В любом случае они перейдут во воторй ряд если не хватит места.

#related-title {color:#333;text-align:center;text-transform:capitalize;padding: 0px 5px 10px;font-size:12px;width:110px; height: 40px;}- размер, цвет и расположение текста под картинкой.

Могу предложить вам эту таблицу цветов для экспериментов.

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

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

Всё. До новых встреч.

Здесь вы можете оформить подписку на новые шпаргалки

Введите Ваш email