Ditulis oleh: Ditulis pada: 8/20/2021
Related Posts Blogger Support HTML5, HTTPS, dan Gambar Pihak Ketiga - Baru-baru ini Blogger dibuat heboh karena urusan gambar postingan Blogger. Setelah sebelumnya gambar blogger tidak muncul karena diblock ISP karena terdeteksi spam, kini Blogger mengganti tempat penyimpanan gambar yang semula di domain bp.blogspot.com menjadi blogger.googleusercontent.com.
Yang menjadi masalah, ternyata URL baru untuk gambar Blogger tersebut tidak atau belum mendukung thumbnail Blogger. Alhasil, banyak blog yang tidak mendukung gambar pihak ketiga menjadi tidak muncul gambar thumbnail di homepage, popular post, related posts, dan widget blogger lainnya yang menggunakan thumbnail Blogger.
Untuk itu, saya akan coba membantu memberikan solusi pada permasalahan ini satu per satu.
Yang sekarang ini akan saya bagikan yaitu widget related posts. Widget ini kena imbasnya juga karena banyak blog yang menggunakan kode thumbnail Blogger. Artinya related posts ini gambarnya akan blank atau tidak muncul jika gambar bukan thumbnail blogger atau tidak diupload di postingan atau gambar yang tidak menggunakan hosting image blogger bp.blogspot.com.
Jadi widget related post ini mendukung gambar yang disimpan di hosting selain bp.blogspot.com seperti hosting image Blogger terbaru, imgur atau lainnya.
Sebenarnya ini menggunakan kode widget related posts lama, namun saya perbaiki agar valid HTML5 sehingga mendukung label 2 kata atau lebih, support HTTPS dengan memperbaiki mixed content, dan memperbaharui CSS untuk mengatur tampilannnya.
Related post ini menggunakan format grid 2 baris dan 3 kolom. Jika Anda ingin mencobanya silahkan gunakan kode-kode berikut ini.
Silahkan gunakan kode CSS berikut ini.
#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;}
}Kemudian silahkan simpan kode berikut ini di tempat yang Anda inginkan untuk menampilkan related post, biasanya di bawah postingan.
<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" loading="lazy"/><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>Related posts ini akan mengambil 8 posts terbaru, jika ingin mengambil post-post lama juga, silahkan ubah angka 8 yang ditandai dengan jumlah yang diinginkan misalnya 9999.
Widget related posts di atas belum support lazyload untuk image dari lazysizes.js, Jika blog Anda menggunakan lazyload image, silahkan ganti kode image-nya yang ditandai dengan kode berikut ini.
<img class="img_item lazyload" alt="'+randomTitles[r]+'" width="16" data-src="'+thumburl[r]+'" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAJAQMAAAAB5D5xAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCNdjwA0AABsAAQrj5HwAAAAASUVORK5CYII=" title="'+randomTitles[r]+'" height="9" loading="lazy"/>
Jika sebelumnya blog Anda sudah menggunakan related post, silahkan ganti kode-kode related posts lama dengan kode related posts yang ini.
Untuk contohnya bisa dilihat di blog Nulis Info.
Selamat mencoba dan semoga bermanfaat.