Виджет: "Похожие сообщения" для Blogger"
Виджет "Похожие сообщения" - это список связанных статей , расположенный в середине публикации или ниже нее.
Простыми словами, это ряд статей с ярлыком, что и сама публикация. Следовательно, чтобы работал данный виджет в вашем блоге, к сообщениям должны быть прикреплены метки.
Сегодня я расскажу как установить виджет "Похожие сообщения" в Blogger. Покажу несколько вариантов с различным дизайном оформления.
Виджет "Похожие сообщения" с картинками
Сообщения в данном виджете выводятся в виде картинок с заголовками. Количество статей редактируется.
Что бы установить данный вариант "Похожих сообщений, находим в шаблоне строку: </head>. И прямо перед ней ставим следующий код код:
<!--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 h2 {margin-top: 10px;background:none;padding:3px;}#related-posts .related_img {margin:5px;border:4px solid #f2f2f2;width:105px;height:105px;transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;}#related-title {color: #222;line-height: 16px;padding: 0 10px;text-align: center;text-shadow: 0 2px 2px #fff;width: 100px;}#related-posts .related_img:hover{opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}#related-title:hover {text-decoration: underline;}</style><script type='text/javascript'>//<![CDATA[imgr=new Array();imgr[0]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpNJDBMA_lWEs8NUGKs_sWdLd8CMd7saufCxI5QyLD7M2bJK7U6azecvf_aUNdxEALWEOPE69pe5DJlH0HPPT-10jLcUCFxBnhqQ_73-SPV-FueLdo1aWWA4AQyTk9Usm5EgPn7YJn_H7D/s1600/no-thumbnail.png";showRandomImg=true;aBold=true;summaryPost=400;summaryTitle=20;numposts1=12;numposts2=4;function removeHtmlTag(strx,chop){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}s=s.join("");s=s.substring(0,chop-1);return s}function showrecentposts1(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();if(numposts2<=json.feed.entry.length){maxpost=numposts2}else{maxpost=json.feed.entry.length}for(var i=0;i<maxpost;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];break}}if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;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!=""))img[i]=d;var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break}}var daystr=day+' '+m+' '+y;pcm='<a href="'+posturl+'">'+pcm+' comments</a>';var trtd='<div class="col_maskolis"><h2 class="posttitle"><a href="'+posturl+'">'+posttitle+'</a></h2><a href="'+posturl+'"><img class="related_img" src="'+img[i]+'"/></a><div class="clear"></div></div>';document.write(trtd);j++}}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/AVvXsEjpNJDBMA_lWEs8NUGKs_sWdLd8CMd7saufCxI5QyLD7M2bJK7U6azecvf_aUNdxEALWEOPE69pe5DJlH0HPPT-10jLcUCFxBnhqQ_73-SPV-FueLdo1aWWA4AQyTk9Usm5EgPn7YJn_H7D/s1600/no-thumbnail.png'}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('<h2>'+relatedpoststitle+'</h2>');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-->
После этого, находим строку: <data:post.body/> (Если в шаблоне две таких строки, то ставим после второй по счету). Ниже ставим код:
<!-- 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><b:if cond='data:blog.pageType == "item"'><script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=9"' type='text/javascript'/></b:if></b:loop><script type='text/javascript'>var currentposturl="<data:post.url/>";var maxresults=6;var relatedpoststitle="<b>Читайте также:</b>";removeRelatedDuplicates_thumbs();printRelatedLabels_thumbs();</script></div></b:if><!-- Related Posts with Thumbnails Code End-->
Все что выделено желтым, можете поменять:
9 - максимальное число сообщений. Всегда должно быть больше на три, чем число выводимых сообщений;
6 - количество выводимых сообщений;
Читайте также: - текст выводимый перед виджетом.
Источник: JumiaAfrica.
Адаптивный виджет "Похожие сообщения с миниатюрами"
В данном виджете сообщения выводятся в виде картинок с заголовками. Его особенность заключается в том, что он легко адаптируется под любой размер экрана. Также, можно настроить желаемое количество выводимых статей.
Чтобы установить данный вариант виджета, необходимо в шаблоне найти строку: ]]></b:skin>. Прямо перед ней, вставить код:
.post-related { display: inline-block; background: #fff; padding: 10px; width:100%; } .post-box .heading { margin-bottom: 10px; text-align: center; margin-top: 10px; position: relative; } .post-box .heading:after { content: "" ; position: absolute; top: 100%; left: 50%; margin-left: -11px; width: 21px; height: 1px; margin-top: 2px; background: #b565a7; } .item-related { width: 31.6%; display: block; float: left; margin-right: 10px; height: 100%; } .item-related:last-child { margin: 0!important; } .item-related .link {display: block; margin: -1px; margin-bottom: 0;} .item-related img {margin-left:0px !important; display: block; opacity: 1; width: 100%; height: 200px; object-fit: cover; } .item-related h3 { font-weight: 400; font-size: 14px; line-height: 1.71429; font-family: Muli; text-transform: uppercase; } img.noops-smly { padding: 0 !important; margin-top: -2px !important; width: 19px; display: inline; }@media (max-width: 520px).item-related {width: 100%!important;}
После этого, найти строку: <data:post.body/>. И ниже ее вставить (Если их две, то ставим после второй):
<b:if cond='data:blog.pageType == "item"'><script id='related-posts' 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/AVvXsEiyZDP8agBAO1At2Y6UAVyPuyNB-o4Ny9B37g297TXqagc2Hpj5Ew7dIAmhKuvcO4en_01yHqTW1D5piFiRN4gBpPGYQOFc3CyNhVsJnHcwLpabzlxiDY9AYXeME_w30yZazY9NQbQ1Sbw/s1600/no_pic_available.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) { 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; while (i < relatedTitles.length && i < 20 && i<maxresults) { tmb = thumburl[r].replace('s72','s300'); document.write('<div class="item-related"><a href="' + relatedUrls[r] + '" class="link"><img width="150" height="100" src="'+tmb+'"/></a><h3><a href="' + relatedUrls[r] + '">'+relatedTitles[r]+'</a></h3></div>');i++; if (r < relatedTitles.length - 1) { r++; } else { r = 0; } } relatedUrls.splice(0,relatedUrls.length); thumburl.splice(0,thumburl.length); relatedTitles.splice(0,relatedTitles.length); } function removeHtmlTag(strx, chop) { var s = strx.split("<"); for (var i = 0; i < s.length; i++) { if (s[i].indexOf(">") != -1) { s[i] = s[i].substring(s[i].indexOf(">") + 1, s[i].length) } } s = s.join(""); s = s.substring(0, chop - 1); return s } /*]]>*/ </script><div class='post-related'><div class='post-box'><h4 class='heading common-heading'> <i class="fa fa-th-list" aria-hidden="true"></i> Читайте также</h4></div><b:loop values='data:post.labels' var='label'><script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=9"' type='text/javascript'/></b:loop><script type='text/javascript'>var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg54m11br6wCUIcAZcyYMrsGSylXfD6P-twFA3nLTbyyNZC-wd0pd3_cI_UZCunhR92FZVAbuiy7cSCgDCe-jdRP_I12ziZ8wyj1VzHIIuHdl6KL6X4kEPS1tkPWxocXK6aLB0VIa2_MsQ/s400/noimage.png";var maxresults=6; // Number Of PostsremoveRelatedDuplicates_thumbs();printRelatedLabels_thumbs("<data:post.url/>");</script></div></b:if>
Что можно изменить в коде:
Читайте также - текст перед виджетом, можете поменять на свой
9 - максимальное число сообщений, должно быть больше числа выводимых статей.
6 - число сообщений, выводимых в виджете.
Сохраняем изменения. Проверяем работоспособность. Если не работает, то после <head> вставляем:
<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/><script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
Источник Danteizm
Виджет "Похожие сообщения в середине статьи"
Сообщения в данном виджете выводятся в середине поста в текстовом виде. И обведены красивой рамочкой.
Для установки виджета похожих сообщений в середине поста, необходимо выше </head> вставить код:
b:if cond='data:blog.pageType == "item"'><script type="text/javascript">//<![CDATA[var relatedTitles = new Array(); var relatedTitlesNum = 0; var relatedUrls = new Array(); function related_results_labels(json) { for (var i = 0; i < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; relatedTitles[relatedTitlesNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') {relatedUrls[relatedTitlesNum] = entry.link[k].href; relatedTitlesNum++; break;}}}} function removeRelatedDuplicates() { var tmp = new Array(0); var tmp2 = new Array(0); for(var i = 0; i < relatedUrls.length; i++) { if(!contains(tmp, relatedUrls[i])) { tmp.length += 1; tmp[tmp.length - 1] = relatedUrls[i]; tmp2.length += 1; tmp2[tmp2.length - 1] = relatedTitles[i];}} relatedTitles = tmp2; relatedUrls = tmp;} function contains(a, e) { for(var j = 0; j < a.length; j++) if (a[j]==e) return true; return false;} function printRelatedLabels() { var r = Math.floor((relatedTitles.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < relatedTitles.length && i < 20) { document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>'); if (r < relatedTitles.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');}//]]></script></b:if>
Затем, найти строку ]]></b:skin>. Выше нее поставить:
.post-terkait{display:block;position:relative;background:#fff;padding:0;margin:15px auto 20px;width:100%}.post-terkait h4{background:linear-gradient(44deg, #f00c1f, #f3eb00, #ffffff);padding:5px 9px;font-size:13px;text-transform:uppercase;color:#fff;border-top-left-radius:21px;line-height:normal;border:0}.post-terkait h4:before{display:none}.post-terkait ul{margin:0;padding:0}.post-terkait ul li{list-style:none;padding:1px 0;line-height:1.5em}.post-terkait a{color:#07ACEC;font-size:17px}.post-terkait a:hover{color:#ff0000;text-decoration:underline}<div expr:id='"post1" + data:post.id'/><div class='post-terkait'><b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><b:if cond='data:blog.pageType == "item"'><script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=3"' type='text/javascript'/></b:if></b:loop></b:if><h4>Может быть интересно</h4><script type='text/javascript'>removeRelatedDuplicates();printRelatedLabels();</script></div><div expr:id='"post2" + data:post.id' class='artbody' itemprop='articleBody description'><data:post.body/></div><script type='text/javascript'>var obj0=document.getElementById("post1<data:post.id/>");var obj1=document.getElementById("post2<data:post.id/>");var s=obj1.innerHTML;var t=s.substr(0,s.length/3);var r=t.lastIndexOf("<br>");if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}</script>
После этого, найти строку: <data:post.body/>. И заменить ее на код:
<div expr:id='"post1" + data:post.id'/><div class='post-terkait'><b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><b:if cond='data:blog.pageType == "item"'><script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=3"' type='text/javascript'/></b:if></b:loop></b:if><h4>Может быть интересно</h4><script type='text/javascript'>removeRelatedDuplicates();printRelatedLabels();</script></div><div class='artbody' expr:id='"post2" + data:post.id' itemprop='articleBody description'><data:post.body/></div><script type='text/javascript'>var obj0=document.getElementById("post1<data:post.id/>");var obj1=document.getElementById("post2<data:post.id/>");var s=obj1.innerHTML;var t=s.substr(0,s.length/3);var r=t.lastIndexOf("<br>");if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}</script>
Источник NewsHank
Настраиваемый виджет похожих сообщений
Данный виджет похожих сообщений имеет девять разных стилей оформления:
- Отображаются только заголовки сообщений;
- Отображаются заголовки сообщений и небольшой фрагмент статьи;
- Отображаются картинки из статей, заголовки и часть текста сообщения;
- Отображаются изображения постов, заголовки и дата статьи;
- Отображаются картинки с заголовками;
- Отображаются заголовки с картинками (заголовок над картинкой);
- Отображаются только изображения;
- Отображается небольшая картинка, а справа заголовок и дата;
- Отображается небольшая миниатюра из статьи, справа заголовок и фрагмент статьи.
Чтобы добавить данный вариант виджета в свой блог на Blogger. необходимо найти строку: </head>. После нее вставить код:
<style type='text/css'>.related-posts-container{margin:55px 0px;}.related-posts-container h4{font:20px 'Open Sans', sans-serif;margin-bottom:20px;}.related-posts-container ul,.related-posts-container ul li{list-style: none;margin: 0;padding: 0;}.related-posts-container ul li a{text-transform:capitalize !important;font:bold 13px 'Open Sans', sans-serif;outline: 0;}.related-snippets{margin-top:5px;font:italic 12px 'Open Sans', sans-serif;}.related-posts-1 li{list-style:inside none disc !important;}.related-posts-1 li,.related-posts-2 li{border-top:1px solid rgba(0,0,0,0.04);padding:0.8em 0 !important;}.related-posts-1 li:first-child,.related-posts-2 li:first-child{border-top:medium none;}li.related-post-item{margin:0 3% 3% 0 !important;width:22.7%;float:left;list-style:none;position:relative;}li.related-post-item:last-child{margin:0 0 2% !important;}.related-thumb-large{width:100%;height:auto;border:none;margin:0px auto 10px;padding:0 !important;}.related-posts-8 li .related-title,.related-posts-9 li .related-title,.related-posts-9 li .related-snippets{padding-left:74px;}.related-posts-8 li:nth-child(even),.related-posts-9 li:nth-child(even){margin:0 0 4% !important;}.related-posts-8 li,.related-posts-9 li{background-color:#ffffff;box-shadow:0 0 4px rgba(180, 180, 180, 0.55);width:42% !important;float:left;margin:0 4% 4% 0 !important;padding:3% !important;}.related-thumb{float:left;height:64px;margin-right:10px;object-fit:cover;width:64px;}.related-posts-6 li,.related-posts-6 a{line-height:0 !important;}.related-posts-6 .related-thumb-large{margin-bottom:0;}.related-posts-7 li.related-post-item{margin:0 !important;width:25% !important;}.related-wrapper{position:absolute;left:0px;right:0;top:0px;bottom:0;margin:0 auto;z-index:4;background:rgba(77,77,77,0.2);}.related-wrapper-inner{position:relative;height:100%;z-index:99;width:100%;display:table;vertical-align:middle;text-align:center;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}.related-wrapper .related-title{vertical-align:middle;display:table-cell;color:#ffffff;font:bold 16px 'Open Sans', sans-serif;padding:0 20px;}.related-date{margin-top:5px;font:italic 11px 'Open Sans', sans-serif;color:#999999;}</style>
После находим строку: <data:post.body/>. Ниже добавляем код:
<b:if cond='data:blog.pageType == "item"'><div class='related-posts-container' id='related-posts-widget'/><div style='clear: both;'/><script type='text/javascript'>var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>"<data:label.name/>"<b:if cond='data:label.isLast != "true"'>,</b:if></b:loop></b:if>];var relatedSettings = {blogURL:"<data:blog.homepageUrl/>",relatedHeading:"<h4><span>Читайте также</span></h4>",relatedPosts:4,relatedStyle:4,thumbnailSize:"w300-h200-p-nu",defaultThumb:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwnW8-44V-v_AeAZTknLgvNBdwuEbJ4EqPhwuRZp6EEEcEPmcNlFHuqigsFaCawiz1J6-oEdQYKjK4H3IgVjSGdisaJ9-bharv8t11tZE-2Kv2PdtejLiklSCho6Ssf2CPTTJbSmMWfv6n/w300-c-h200/no-thumb.png",roundThumbs:false,titleLength:"auto",snippetLength:45,centerText:false,openNewTab:false};</script><script type='text/javascript'>//<![CDATA[var randomRelatedIndex,startRelated;!function(a,b,c){var d={callBack:function(){}};for(var e in relatedSettings)d[e]="undefined"==relatedSettings[e]?d[e]:relatedSettings[e];var f=function(a){var d=b.createElement("script");d.type="text/javascript",d.src=a,c.appendChild(d)},g=function(a,b){return Math.floor(Math.random()*(b-a+1))+a},h=function(a){var c,d,b=a.length;if(0===b)return!1;for(;--b;)c=Math.floor(Math.random()*(b+1)),d=a[b],a[b]=a[c],a[c]=d;return a},i="object"==typeof labelArray&&labelArray.length>0?"/-/"+h(labelArray)[0]:"",j=function(a){var b=a.feed.openSearch$totalResults.$t-d.relatedPosts,c=g(1,b>0?b:1);f(d.blogURL.replace(/\/$/,"")+"/feeds/posts/summary"+i+"?alt=json-in-script&orderby=updated&start-index="+c+"&max-results="+d.relatedPosts+"&callback=startRelated")},k=function(a){var l,m,n,o,p,q,b=document.getElementById("related-posts-widget"),c=h(a.feed.entry),e=d.relatedStyle,f=d.relatedHeading+'<ul class="related-posts-'+e+'">',g=d.openNewTab?' target="_blank"':"",i=d.centerText?"text-align:center;":"",j=d.roundThumbs?"-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;":"",k='<span style="display:block;clear:both;"></span>';if(b){for(var r=0;r<d.relatedPosts&&r!=c.length;r++){n=c[r].title.$t,o="auto"!==d.titleLength&&d.titleLength<n.length?n.substring(0,d.titleLength)+"…":n,p="media$thumbnail"in c[r]&&d.thumbnailSize!==!1?c[r].media$thumbnail.url.replace(/\/s[0-9]+(\-c)?/,"/"+d.thumbnailSize):d.defaultThumb,l=h(c[r].published.$t);for(var s=[1,2,3,4,5,6,7,8,9,10,11,12],t=["January","February","March","April","May","June","July","August","September","October","November","December"],u=l.split("-")[2].substring(0,2),v=l.split("-")[1],w=l.split("-")[0],x=0;x<s.length;x++)if(parseInt(v)==s[x]){v=t[x];break}postdate=v+" "+u+" "+w,q="summary"in c[r]&&d.snippetLength>0?c[r].summary.$t.replace(/<br ?\/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,d.snippetLength)+"…":"";for(var y=0,z=c[r].link.length;y<z;y++)m="alternate"==c[r].link[y].rel?c[r].link[y].href:"#";1==e?f+='<li><a href="'+m+'" '+g+">"+o+"</a></li>":2==e?f+='<li><a href="'+m+'" '+g+'><div class="related-title">'+o+'</div></a><div class="related-snippets">'+q+"</div></li>":3==e?f+='<li class="related-post-item" style="'+i+'"><a href="'+m+'" '+g+'><img alt="" class="related-thumb-large" src="'+p+'" style="'+j+'"><div class="related-title">'+o+'</div></a><div class="related-snippets">'+q+"</div></li>":4==e?f+='<li class="related-post-item" style="'+i+'"><a href="'+m+'" '+g+'><img alt="" class="related-thumb-large" src="'+p+'" style="'+j+'"><div class="related-title">'+o+'</div></a><div class="related-date">'+postdate+"</div></li>":5==e?f+='<li class="related-post-item" style="'+i+'"><a href="'+m+'" '+g+'><img alt="" class="related-thumb-large" src="'+p+'" style="'+j+'"><div class="related-title">'+o+"</div></a></li>":6==e?f+='<li class="related-post-item"><a href="'+m+'" '+g+'><img alt="" class="related-thumb-large" src="'+p+'" style="'+j+'"><div class="related-wrapper" style="'+j+'"><div class="related-wrapper-inner"><div class="related-title">'+o+"</div></div></div></a></li>":7==e?f+='<li class="related-post-item"><a href="'+m+'" '+g+'><img alt="" class="related-thumb-large" src="'+p+'" style="'+j+'"></a></li>':8==e?f+='<li class="related-post-item"><a class="related-post-item-wrapper" href="'+m+'" '+g+'><img alt="" class="related-thumb" src="'+p+'" style="'+j+'"><div class="related-title">'+o+'</div></a><div class="related-date">'+postdate+"</div></li>":9==e&&(f+='<li><a href="'+m+'" '+g+'><img alt="" class="related-thumb" src="'+p+'" style="'+j+'"><div class="related-title">'+o+'</div></a><div class="related-snippets">'+q+"</div></li>")}b.innerHTML=f+="</ul>"+k,d.callBack()}};randomRelatedIndex=j,startRelated=k,f(d.blogURL.replace(/\/$/,"")+"/feeds/posts/summary"+i+"?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex")}(window,document,document.getElementsByTagName("head")[0]);//]]></script></b:if>
Настройки скрипта:
Читайте также - текст, который выводится перед скриптом, можно заменить на свой;
relatedPosts:4 - количество выводимых сообщений;
relatedStyle:4, - стиль оформления виджета. Вместо четверки, ставите цифру того варианта оформления, который хотите видеть.
Источник: Helplogger
На этом все. Теперь вы знаете, как поставить виджет похожих сообщений на свой сайт Blogger. И можете установить любой из предложенных вариантов.
Комментарии