Cara Membuat Widget Related Post List dengan Thumbnail di Bawah Postingan

Santos el Salam

21 Juni 2021

Selain pentingnya membuat artikel berkualitas dan pengetahuan tentang SEO, hal yang juga tidak kalah pentingnya yaitu bagaimana membuat pengunjung tersebut agar betah dan tidak segera beranjak meninggalkan blog kita. Salah satu di antara caranya yaitu dengan menawarkan konten-konten lain di blog kita untuk dibaca. Itulah kenapa seorang blogger biasanya memasang beberapa widget tertentu di blognya untuk maksud tersebut. 

Satu di antara widget-widget tersebut yaitu widget Related Post atau kalau dalam bahasa Indonesianya biasa disebut widget "Artikel Terkait". Berbeda dengan widget-widget lainnya, widget related post ini memang biasanya akan memunculkan link-link artikel yang masih berkaitan pembahasannya dengan artikel yang sedang dibaca sehingga lebih kuat dalam menarik perhatian pengunjung untuk membaca juga artikel-artikel yang ditawarkan dalam widget tersebut. 

Beberapa waktu lalu, Santos Blog pernah membahas tentang cara pembuatan widget Related Post tampilan grid yang disertai dengan gambar. Nah, kali ini kita juga akan coba untuk membuat widget related pots masih disertai thumbnail (gambar) namun tampilannya berbentuk list ke bawah. Widget ini juga cocok untuk anda pasang di bagian bawah postingan atau di bawah tombol share. Adapun tampilannya kurang lebih seperti berikut ini. 

Jika anda berminat memasangnya di blog anda, silahkan simak langkah-langkah berikut ini untuk penerapannya. 

1. Buka akun blogger anda. 

2. Pilih menu thema dan klik edit html. 

3. Cari kode ]]></b:skin> atau </style> lalu letakkan kode berikut ini di atasnya. 

/* Related Post List Style */

.related-postbwrap{position:relative;margin:0;padding:20px}

.related-postbwrap h4{background:#fff;margin:0 0 10px 0;color:#000;font-weight:bold;font-size:140%;border-bottom:2px solid #ac6730}

.related-post-style-2,.related-post-style-2 li{list-style:none;margin:0;padding:0}

.related-post-style-2 li{border-top:0 solid #eee;overflow:hidden;padding:10px 0}

.related-post-style-2 li:first-child{border-top:none}

.related-post-style-2 .related-post-item-thumbnail{width:80px;height:80px;max-width:none;max-height:none;background-color:transparent;border:none;float:left;margin:2px 10px 0 0;padding:0}

.related-post-style-2 .related-post-item-title{font-weight:bold;font-size:14px;color:#333}

.related-post-style-2 .related-post-item-summary{display:block;font-size:90%;}

4. Untuk memasangnya di bawah postingan, silahkan cari kode <data:post.body/> kemudian letakkan kode berikut ini di bawahnya.

<div class='related-postbwrap' id='bpostrelated-post'/>

<script type='text/javascript'>

var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>

          &quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>

      </b:loop></b:if>];

var relatedPostConfig = {

      homePage: &quot;<data:blog.homepageUrl/>&quot;,

      widgetTitle: &quot;&lt;h4&gt;Related Posts&lt;/h4&gt;&quot;,

      numPosts: 6,

      summaryLength: 0,

      titleLength: &quot;auto&quot;,

      thumbnailSize: 80,

      noImage: &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd1F_fisFKuaAJl5bWjBXMEv4P5nNTzxolOdlpjAOcewyN8-Q8DoKfF5Pxwq_nfd82sCHHpbpCtfzEjEB0xnX1yHwh40hZVqPWHYCDNjgEXun7qs9hvozsyK7nxQJlfsQJM9TdNsqC7vGh/s1600/no-img.png&quot;,

      containerId: &quot;bpostrelated-post&quot;,

      newTabLink: false,

      moreText: &quot;Read More&quot;,

      widgetStyle: 2,

      callBack: function() {}

};

</script>

<script type='text/javascript'>

//<![CDATA[

/*! Related Post Widget */

var randomRelatedIndex,showRelatedPost;(function(n,m,k){var d={widgetTitle:"<h4>Artikel Terkait:</h4>",widgetStyle:1,homePage:"http://www.dte.web.id",numPosts:7,summaryLength:370,titleLength:"auto",thumbnailSize:72,noImage:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",containerId:"related-post",newTabLink:false,moreText:"Baca Selengkapnya",callBack:function(){}};for(var f in relatedPostConfig){d[f]=(relatedPostConfig[f]=="undefined")?d[f]:relatedPostConfig[f]}var j=function(a){var b=m.createElement("script");b.type="text/javascript";b.src=a;k.appendChild(b)},o=function(b,a){return Math.floor(Math.random()*(a-b+1))+b},l=function(a){var p=a.length,c,b;if(p===0){return false}while(--p){c=Math.floor(Math.random()*(p+1));b=a[p];a[p]=a[c];a[c]=b}return a},e=(typeof labelArray=="object"&&labelArray.length>0)?"/-/"+l(labelArray)[0]:"",h=function(b){var c=b.feed.openSearch$totalResults.$t-d.numPosts,a=o(1,(c>0?c:1));j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&start-index="+a+"&max-results="+d.numPosts+"&callback=showRelatedPost")},g=function(z){var s=document.getElementById(d.containerId),x=l(z.feed.entry),A=d.widgetStyle,c=d.widgetTitle+'<ul class="related-post-style-'+A+'">',b=d.newTabLink?' target="_blank"':"",y='<span style="display:block;clear:both;"></span>',v,t,w,r,u;if(!s){return}for(var q=0;q<d.numPosts;q++){if(q==x.length){break}t=x[q].title.$t;w=(d.titleLength!=="auto"&&d.titleLength<t.length)?t.substring(0,d.titleLength)+"&hellip;":t;r=("media$thumbnail" in x[q]&&d.thumbnailSize!==false)?x[q].media$thumbnail.url.replace(/\/s[0-9]+(\-c)?/,"/s"+d.thumbnailSize+"-c"):d.noImage;u=("summary" in x[q]&&d.summaryLength>0)?x[q].summary.$t.replace(/<br ?\/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,d.summaryLength)+"&hellip;":"";for(var p=0,a=x[q].link.length;p<a;p++){v=(x[q].link[p].rel=="alternate")?x[q].link[p].href:"#"}if(A==2){c+='<li><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+'</a><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+'</span> <a href="'+v+'" class="related-post-item-more"'+b+">"+d.moreText+"</a></span>"+y+"</li>"}else{if(A==3||A==4){c+='<li class="related-post-item" tabindex="0"><a class="related-post-item-title" href="'+v+'"'+b+'><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"></a><div class="related-post-item-tooltip"><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+"</a></div>"+y+"</li>"}else{if(A==5){c+='<li class="related-post-item" tabindex="0"><a class="related-post-item-wrapper" href="'+v+'" title="'+t+'"'+b+'><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><span class="related-post-item-tooltip">'+w+"</span></a>"+y+"</li>"}else{if(A==6){c+='<li><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+'</a><div class="related-post-item-tooltip"><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+"</span></span>"+y+"</div></li>"}else{c+='<li><a title="'+t+'" href="'+v+'"'+b+">"+w+"</a></li>"}}}}}s.innerHTML=c+="</ul>"+y;d.callBack()};randomRelatedIndex=h;showRelatedPost=g;j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex")})(window,document,document.getElementsByTagName("head")[0]);

//]]>

</script>

Keterangan:

• Angka 6 merupakan jumlah post yang ditampilkan. Silahkan atur sesuai selera. 
• Widget di atas mendukung tampilan snippet. Jika ingin menampilkannya silahkan atur nilai 0 menjadi misalnya: 120 

5. Simpan kembali template anda dan lihat hasilnya. 

Demikianlah tadi Cara Membuat Related Post List dengan Thumbnail di Bawah Postingan. Semoga bermanfaat.

 

Labels: Blogging

Thanks for reading Cara Membuat Widget Related Post List dengan Thumbnail di Bawah Postingan. Please share...!

Facebook

Twitter