Cara Membuat Related Post Simpel plus Gambar di Blogger

Baca Juga

Related Post (Artikel Terkait) adalah widget blog berupa daftar tulisan yang memiliki kategori atau label yang sama.

Related post biasanya ditampilkan di bawah setiap posting blog, tapi ada juga related post yang disimpan di tengah-tengah postingan.

Related Post berfungsi sebagai navigasi sekaligus tautan internal. Daftar judul tulisan terkait ini mendorong pembaca melihat posting lainnya.

Related post juga baik untuk SEO dan meningkatkan pageviews atau jumlah halaman yang dibuka oleh pengunjung.

Cara Menambahkan Related Post

Berikut ini Cara Membuat Related Post Simpel plus Gambar di Blogger sebagaimana gambar di atas. Kode berikut ini akan menampilkan judul, ringkasan, dan gambar kecil sehingga lebih menarik. Kodenya dari Maskolis.

1. Klik Tema > Edit HTML
2. Copas kode berikut ini di atas kode </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/* Related Post */
#related_posts{margin-top:15px} #related_posts h4{color:#000;background:#f0f0f0;padding:10px;margin:0 0 5px;font-size:120%;} #related_img{margin:0;padding:0;} #related_img:hover{background:0} #related_img ul{list-style-type:none;margin:0;padding:0} #related_img li{min-height:62px;border-bottom:1px solid #f1f1f1;list-style:none;margin:0 0 5px;padding:5px;} #related_img li a{color:#2672a0;} #related_img li a:hover{text-decoration:underline} #related_img .news-title{display:block;font-weight:bold!important;margin-bottom:5px;font-size:14px;} #related_img .news-text{display:block;text-align:justify;font-weight:normal;text-transform:none;color:#333;font-size:12px;} #related_img img{float:left;margin-right:7px;border:1px solid #ccc;padding:2px;width:60px;height:60px;max-width:100%;background:#fff} </style> <script type='text/javascript'>/*<![CDATA[*/var relnum=0;var relmaxposts=5;var numchars=135;var morelink=" ";function saringtags(r,l){for(var e=r.split("<"),n=0;n<e.length;n++)-1!=e[n].indexOf(">")&&(e[n]=e[n].substring(e[n].indexOf(">")+1,e[n].length));return e=e.join(""),e=e.substring(0,l-1)}function relpostimgthum(r){for(var l=0;l<r.feed.entry.length;l++){var e=r.feed.entry[l];reljudul[relnum]=e.title.$t,postcontent="","content"in e?postcontent=e.content.$t:"summary"in e&&(postcontent=e.summary.$t),relcuplikan[relnum]=saringtags(postcontent,numchars),postimg="media$thumbnail"in e?e.media$thumbnail.url:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQ1H1ElZX6mtH4dHCJ9ZrPAlbqkbpdAmRkhQfncY6yoX57ZM7F7sALkdIp9c3TKqg45-XLa6i3cBB_5N7zhkziC-3frZExJXtWfiUJBDdpYJBaZuwlhVMBa2nEedzjLU6LBkNCQQ8AHkUy/d/noimagethumb.gif",relgambar[relnum]=postimg;for(var n=0;n<e.link.length;n++)if("alternate"==e.link[n].rel){relurls[relnum]=e.link[n].href;break}relnum++}}function contains(r,l){for(var e=0;e<r.length;e++)if(r[e]==l)return!0;return!1}function relatpost(){for(var r=new Array(0),l=new Array(0),e=new Array(0),n=new Array(0),t=0;t<relurls.length;t++)contains(r,relurls[t])||(r.length+=1,r[r.length-1]=relurls[t],l.length+=1,l[l.length-1]=reljudul[t],e.length+=1,e[e.length-1]=relcuplikan[t],n.length+=1,n[n.length-1]=relgambar[t]);reljudul=l,relurls=r,relcuplikan=e,relgambar=n;for(var t=0;t<reljudul.length;t++){var a=Math.floor((reljudul.length-1)*Math.random()),u=reljudul[t],s=relurls[t],i=relcuplikan[t],o=relgambar[t];reljudul[t]=reljudul[a],relurls[t]=relurls[a],relcuplikan[t]=relcuplikan[a],relgambar[t]=relgambar[a],reljudul[a]=u,relurls[a]=s,relcuplikan[a]=i,relgambar[a]=o}for(var g,m=0,h=Math.floor((reljudul.length-1)*Math.random()),c=h,d=document.URL;m<relmaxposts&&(relurls[h]==d||(g="<li class='news-title clearfix'>",g+="<a href='"+relurls[h]+"' rel='nofollow' target='_top' title='"+reljudul[h]+"'><img src='"+relgambar[h]+"' /></a>",g+="<a href='"+relurls[h]+"' target='_top'>"+reljudul[h]+"</a>",g+="<span class='news-text'>"+relcuplikan[h]+" ... <a href='"+relurls[h]+"' target='_top'>"+morelink+"</a><span class='news-text'>",g+="</li>",document.write(g),m++,m!=relmaxposts))&&(h<reljudul.length-1?h++:h=0,h!=c););}var reljudul=new Array,relurls=new Array,relcuplikan=new Array,relgambar=new Array;/*]]>*/</script> </b:if>

3. Copas kode berikyt ini di bawah kode <data:post-body/> yang kedua atau  di atas kode <div class='post-footer'> 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='clear:both;'/>
 <div id='related_posts'>
 <h4>Related Posts :</h4>
 <b:loop values='data:post.labels' var='label'> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=relpostimgthum&amp;max-results=50&quot;' type='text/javascript'/> </b:loop> <ul id='related_img'> <script type='text/javascript'>relatpost();</script> </ul> </div> </b:if>

4. Simpan Template!

Demikian Cara Membuat Related Post Simpel plus Gambar di Blogger. (blogromeltea.blogspot.com).*