Как добавить виджет - похожие статьи с превью?

Всем привет!
Сегодня я хочу вам помочь разобраться как же все-таки сделать виджет  "подобные статьи" на своем сайте.
Я столкнулась с этой проблемой на моем блоге для изучения английского языка, и вот какое решение я нашла смотрите сразу после статьи.

Это очень удобный инструмент для пользователей вашего блога.
Итак  приступим:
1.) Заходите в панель вашего блога - шаблон изменить HTML.

2.) В открывшемся окне щелкните в любом месте и активируйте поиск с помощью комбинации клавиш CTRL+F.

3.) Ищем с помощью поиска тег </head>
4.) Вставляем выше этого тега:
Код для вставки

<<!--Related Posts with thumbnails Scripts and Styles Start--> <b:if cond='data:blog.pageType == "item"'> <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/AVvXsEjcNDIGb7cwjTmIpuh6Zwc8xZUEJ9uPLJbq_yLvvoEOHtYZ0WYLUrMNOQjAqiXIPK6c2SBQKN_VbTD-Klla4pBj-EcSTIAXUB1I0XZQ2reAbB1RNapFI_r3mJCIM5A6Ek3aiC6e6Qsrom1z/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-->>
Для того,чтобы настроить размеры превью в этом коде, редактируем 110px;height:100px; на нужный вам размер.
5.) Находим с помощью поиска  <div class='post-footer'>
6.) Вставляем выше этого текста код:

Код для вставки
<<!-- Related Posts with Thumbnails Code Start--> <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=5"' type='text/javascript'/></b:loop> <script type='text/javascript'> var currentposturl="<data:post.url/>"; var maxresults=5; var relatedpoststitle="<b>Related Posts:</b>"; removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(); </script> </div> <div class='clear'/> <div style="font-size: 9px;float: right; margin: 5px;"> <a style="font-size: 9px; text-decoration: none;" href="http://helplogger.blogspot.com/2012/03/how-to-add-related-posts-widget-to.html" rel="nofollow" >Related Posts Widget</a></div> </b:if> <!-- Related Posts with Thumbnails Code End-->>
7.) В случае, если не отображается виджет, необходимо вставить этот же код перед тегом <b:includable id='postQuickEdit' var='post'>  который мы также находим с помощью поиска.
Все. Виджет готов! Спасибо вам за внимание. Жду ваших комментариев и, возможно, предложений, по более изящному методу решения этой задачи.

Блоговедение или введение.

Почему я здесь?

Всем привет! Меня зовут Алена. Я тут затем, чтоб помочь таким же блогерам, как я=)
Все дело в том, что у меня есть свой блог для изучающих английский язык http://www.english365.ru/. И вот я занимаясь этим блогом Я периодически сталкиваюсь с определенными задачами, которые необходимо решить. Поэтому я, собственно, и решила создать блог о блоге. Тут я буду описывать решение задач, с которыми я столкнулась(если я нашла это решение=)).
Мне понравилась платформа blogger и я хочу помочь другим пользователям лучше ее усвоить, ну и не только ее.
Также я стараюсь разбираться с вопросами связными с SEO. Конечно на просторах интернета можно встретить огромное множество блогов о SEO, но я, наверное, хочу этим заниматься больше для себя - чтоб лучше разобраться - ведь как известно:уча других - учишься сам.
Надеюсь, я смогу помочь кому то из вас, мои читатели. И поэтому я прошу вас не стесняться и писать свои комментарии, задавать вопросы и вести дискуссию!