Похожие сообщения Blogger поддерживает HTML5, HTTPS и сторонние изображения. В последнее время Blogger заинтересовался бизнесом изображений для сообщений Blogger. После того, как ранее изображение blogger не отображалось из-за того, что оно было заблокировано провайдером из-за обнаружения спама, теперь Blogger изменил область хранения изображений, которая изначально находилась в домене bp.blogspot.com, на blogger.googleusercontent.com.
Проблема в том, что новый URL-адрес изображения Blogger не поддерживает или еще не поддерживает эскизы Blogger. В результате во многих блогах, которые не поддерживают сторонние изображения, не отображаются эскизы изображений на главной странице, в популярных сообщениях, связанных сообщениях и других виджетах Blogger, которые используют эскизы Blogger.
Для этого я постараюсь помочь найти решения этих проблем одно за другим.
Сейчас я поделюсь виджетом похожих сообщений. На этот виджет также влияет то, что многие блоги используют код эскиза Blogger. Это означает, что изображение связанных сообщений будет пустым или не появится, если изображение не является миниатюрой blogger или оно не загружено в сообщение или изображение, которые не используют хостинг изображений blogger bp.blogspot.com.
Таким образом, этот виджет похожих сообщений поддерживает изображения, хранящиеся не на bp.blogspot.com, а на других хостингах, таких как последние изображения Blogger, imgur или другие.
На самом деле здесь используется старый код виджета связанных сообщений, но я исправил его, чтобы он был действительным HTML5, чтобы он поддерживал метки из 2 слов или более, поддерживал HTTPS, исправляя смешанный контент, и обновил CSS, чтобы настроить внешний вид.
В этой связанной публикации используется сетка из 2 строк и 3 столбцов. Если вы хотите попробовать, используйте следующие коды.
Используйте следующий код CSS.
#related-posts .judul{margin:10px 0;font-size:20px;font-weight:500;padding:0;color:#333}
#related-posts .related_item{margin:0 10px 10px 0;display:block;float:left;width:calc(33.333333% — 10px);height:auto;}
#related-posts .related_items,#related-posts .related_item:nth-of-type(4n+0),#related-posts .related_item .clear{clear:both;}
#related-posts .related_items{margin-right:-10px;}
#related-posts .url_item{display:block;text-decoration:none;}
#related-posts .img_item {display:block;margin-bottom:5px;padding:0;width:100%;height:auto;transition:all 400ms ease-in-out;}
#related-posts .related_item:hover .img_item{opacity:.7;}
#related-posts .title_item{display:block;padding-right:10px;text-align:left;margin:0;color:#000;font-weight:400;line-height:1.1;transition:all 400ms ease-in-out;}
#related-posts .related_item:hover .title_item{color:#555;}
@media screen and (max-width:425px){
#related-posts .related_item{width:calc(50% — 10px);}
#related-posts .related_item:nth-of-type(4n+0){clear:none;}
#related-posts .related_item:nth-child(odd){clear:both;}
}
@media screen and (max-width:375px){
#related-posts .related_item{width:100%;}
#related-posts .related_items{margin-right:0;}
#related-posts .related_item:nth-child(odd){clear:none;}
}
Затем сохраните следующий код там, где вы хотите отображать похожие сообщения, обычно под сообщениями.
<b:if cond=’data:blog.pageType == "item"’>
<div id=’related-posts’>
<script>
//<![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.replace(/.*?:\/\//g, «//»)}else thumburl[relatedTitlesNum]=’data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC’}if(relatedTitles[relatedTitlesNum].length>300)relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,300)+»»;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(‘<div class=»judul»>’+relatedpoststitle+'</div>’);document.write(‘<div class=»related_items»/>’);while(i<relatedTitles.length&&i<20&&i<maxresults){document.write(‘<div class=»related_item»><a class=»url_item’);if(i!=0)document.write(‘»‘);else document.write(‘»‘);document.write(‘ href=»‘+relatedUrls[r]+'» title=»‘+relatedTitles[r]+'»><img class=»img_item» alt=»‘+relatedTitles[r]+'» width=»16″ src=»‘+thumburl[r]+'» title=»‘+relatedTitles[r]+'» height=»9″ /><div class=»clear»></div><div class=»title_item»>’+relatedTitles[r]+'</div></a></div>’);if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write(‘<div class=»clear»></div></div>’);relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}
//]]>
</script>
<b:loop values=’data:post.labels’ var=’label’>
<b:if cond=’data:label.isLast != "true"’/>
<script>
var RelatedLabel = "<data:label.name/>";
RelatedLabel = encodeURIComponent(RelatedLabel.trim());
(function(){var script = document.createElement('script');script.setAttribute('src', '/feeds/posts/default/-/' + RelatedLabel + '?alt=json-in-script&orderby=updated&callback=related_results_labels_thumbs&max-results=8');document.write(script.outerHTML)})();
</script>
</b:loop>
<script>
var currentposturl="<data:post.url/>";
var maxresults=6;
var relatedpoststitle="Menarik Untuk Dibaca Juga:";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div></b:if>
Эти похожие сообщения будут принимать последние 8 сообщений, если вы хотите также использовать старые сообщения, измените номер 8, который отмечен желаемым числом, например 9999.
Приведенный выше виджет похожих сообщений не поддерживает отложенную загрузку изображений из lazysizes.js. Если в вашем блоге используются изображения с отложенной загрузкой, измените код изображения который выделен жёлтым, следующим кодом.
<img class=»img_item lazyload» alt=»‘+randomTitles[r]+'» width=»16″ src=»data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAJAQMAAAAB5D5xAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCNdjwA0AABsAAQrj5HwAAAAASUVORK5CYII=» title=»‘+randomTitles[r]+'» height=»9″ />
Если ранее в вашем блоге использовались похожие сообщения, замените старые коды похожих сообщений на этот код.
