Cara Membuat Related Post Simpel plus Gambar di Blogger

Romeltea | Follow @romel_tea

Cara Membuat Related Post Simpel Gambar Thumbnail di Blogger
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).*

Previous
« Prev Post
Author Image

Romeltea
Romeltea adalah onair dan online name Asep Syamsul M. Romli aka Kang Romel. Praktisi Media, Blogger, Trainer Komunikasi from Bandung, Indonesia. Follow me: facebook twitter instagram linkedin youtube

Recommended Posts

Related Posts

Show comments
Hide comments

No comments on Cara Membuat Related Post Simpel plus Gambar di Blogger

Post a Comment

No Spam, Please!