Membuat List Related Post Dibawah Artikel - Reboza Sambirejo

Kali ini saya akan membahas cara membuat related post atau sering disebut artikel terkait pada blog, yang nantiya akan diletakkan di bawah postingan.

Related post yang akan kita buat pada kesempatan kali ini yaitu related post list dengan thumbnail. Untuk penampakanya kurang lebih seperti gambar berikut.

Related post sendiri juga dapat menaikkan page view blog kita. Untuk itu bagi yang ingin memasangnya silahkan simak tutorial berikut.

Buka dashboard blog anda kemudian pilih template > edit tempate

Karena related post ini terdapat font awesome silahkan pasang script font awesome terlibih dahulu, jika sudah dapat dilewati.

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css' rel='stylesheet'/>

Kemudian salin dan tempelkan kode berikut sebelum ]]></b:skin> atau </style>

#related_posts{margin:20px 0;font-size:100%;font-weight:normal;line-height:150%;padding:0 0 10px 0;overflow:hidden;box-shadow:inset 0 0 0 1px #e9e9e9}
#related_posts h4{font-size:14px;margin:0 0 10px 0;background:#4f93c5;color:#fff;padding:15px 20px;font-weight:700;position:relative;text-align:left;text-transform:uppercase;overflow:hidden}
#related_posts h4::after{display:inline-block;content:"\f02c";font-family:fontAwesome;font-style:normal;font-weight:normal;font-size:18px;background-color:#4786b5;color:#fff;top:0;right:0;padding:16px 20px;position:absolute}
#related_img{margin:0;padding:0 10px}
#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 rgba(0,0,0,0.1);list-style:none;margin:0 0 5px;padding:5px}
#related_img li a{color:#444;font-size:14px}
#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;font-weight:normal;text-transform:none;color:#888;font-size:11px}
#related_img img{background:#fafafa;float:left;margin-right:10px;width:60px;height:60px;max-width:100%}
ul#related_img li:last-child{border:0}

Lalu pasang kode berikut sesudah/didalam <div class='post-footer'> atau <div class='post-footer-line post-footer-line-1'> atau <div class='post-footer-line post-footer-line-2'> dan seterusnya. Atau juga bisa dibawah kode <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related_posts'>
  <h4><span> Related Posts</span></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>
<div style='clear:both'/>
</b:if>

Pasang scipt berikut sebelum </head>

<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/AVvXsEiLAl1UrKIrPe7zs8kdQWY-jeTYENMTDLR4Z4DC5OguCaoYOsublFW-NfMK9mmoKUptqygpt9StH1KDZeXBDOdOMG17jwRH6AXLXuzSuxWysjYfvfdkAI08di4gwxTUSWPGThvQh76KPL23/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>

Terakhir simpan template.

Untuk warna dan style lainya bisa sobat kreasikan sediri, dan jika sobat ingin menghapus icon label yang dibuat menggunakan font awesome silahkan hapus kode seperti berikut.
#related_posts h4::after{.....}