Membuat Relate Post Thumbnail/Gambar Vertikal V.2

Membuat Relate Post Thumbnail/Gambar Vertikal V.2 - Sebelumnya saya telah mengulas cara membuat relate post Thumbnail/gambar vertikal, sebut saja ini merupakan pada Relate Post Thumbnail/Gambar Vertikal version dua. Menurut saya Artikel Terkait Bergambar ini pretty good jika ditambahkan di bawah postingan artikel blog anda, karena loading pada relate post ini cukup cepat dan menampilkan judul dan gambar.

Pada pemasangan Relate post Thumbnail/Gambar Vertikal V.2 tidak menyulitkan anda, cukup mudah dalam pemasangannya, untuk anda yang tertarik ingin memasang Relate Post Thumbnail/Gambar Vertikal V.2 pada blog anda berikut ini tahapan-tahapannya :

Membuat Relate Post Thumbnail/Gambar Vertikal V.2

1. Login keakun Blogger
2. Pilih Template => Edit HTML
3. Selanjutnya dengan bantuan Ctrl+f anda cari kode <div class='post-footer'>
4. Kemudian anda copy kode dibawah ini dan terapkan dibawahnya :

<b:if cond='data:blog.pageType == "item"'>
<style scoped='scoped'>
#related_posts{padding:0;overflow:hidden;display:inline;}
#related_posts h4{padding-left:5px;padding-bottom:10px;color:#3358CC;font-family:Mistral;font-size:23px;line-height:23px;text-align:left; letter-spacing:normal;}
ul#relpost_img_sum{margin:0;padding:0;text-align:justify;display:inline;}
ul#relpost_img_sum li{list-style:none;padding:3px;margin:0;width:275px;height:70px;float:left;display:inline;}
ul#relpost_img_sum li a{display:block}
ul#relpost_img_sum li img{float:left;width:90px;height:65px;margin-right:7px;padding:0 auto;border:none;}
ul#relpost_img_sum li a.relinkjdulx{display:block;overflow:hidden;margin-bottom:3px;background-image:none;font-weight:normal;font-size:12px;width:160px;line-height:20px; float:left;text-align:left;}
</style>
<script type='text/javascript'>
//<![CDATA[
var relnojudul = 0;var numpost = 6;var numchars = 0;var reljudul=new Array();var relurls=new Array();var relcuplikan=new Array();var relgambar=new Array();function saringtags(g,h){var e=g.split("<");for(var f=0;f<e.length;f++){if(e[f].indexOf(">")!=-1){e[f]=e[f].substring(e[f].indexOf(">")+1,e[f].length)}}e=e.join("");e=e.substring(0,h-1);return e}function relpostimgcuplik(h){for(var e=0;e<h.feed.entry.length;e++){var g=h.feed.entry[e];reljudul[relnojudul]=g.title.$t;postcontent="";if("content" in g){postcontent=g.content.$t}else{if("summary" in g){postcontent=g.summary.$t}}relcuplikan[relnojudul]=saringtags(postcontent,numchars);if("media$thumbnail" in g){postimg=g.media$thumbnail.url}else{postimg="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRP9_CMZHB04QG48ZO6F0MOP-bd9gRR72sD-bkNDLpdAXsJdcaE5H4SWWOU8k50sCBCq3qmiN8MT7lgINf3077197s4zRSVvsruzSbBm3fAR-GQi6zGXc8KiM886k8oN_DLaNRXXP-l9s/s1600/grey.png"}relgambar[relnojudul]=postimg;for(var f=0;f<g.link.length;f++){if(g.link[f].rel=="alternate"){relurls[relnojudul]=g.link[f].href;break}}relnojudul++}}function contains(a,e){for(var f=0;f<a.length;f++){if(a[f]==e){return true}}return false}function artikelterkait(){var v=new Array(0);var w=new Array(0);var x=new Array(0);var A=new Array(0);for(var u=0;u<relurls.length;u++){if(!contains(v,relurls[u])){v.length+=1;v[v.length-1]=relurls[u];w.length+=1;w[w.length-1]=reljudul[u];x.length+=1;x[x.length-1]=relcuplikan[u];A.length+=1;A[A.length-1]=relgambar[u]}}reljudul=w;relurls=v;relcuplikan=x;relgambar=A;for(var u=0;u<reljudul.length;u++){var B=Math.floor((reljudul.length-1)*Math.random());var i=reljudul[u];var s=relurls[u];var y=relcuplikan[u];var C=relgambar[u];reljudul[u]=reljudul[B];relurls[u]=relurls[B];relcuplikan[u]=relcuplikan[B];relgambar[u]=relgambar[B];reljudul[B]=i;relurls[B]=s;relcuplikan[B]=y;relgambar[B]=C}var r=0;var D=Math.floor((reljudul.length-1)*Math.random());var z=D;var q;var t=document.URL;while(r<numpost){if(relurls[D]!=t){q="<li class='news-title clearfix'>";q+="<a href='"+relurls[D]+"' rel='nofollow' target='_top' title='"+reljudul[D]+"'><div class='overlayb'></div><img src='"+relgambar[D]+"' /></a>";q+="<a class='relinkjdulx' href='"+relurls[D]+"' target='_top'>"+reljudul[D]+"</a>";q+="<span class='news-text'>"+relcuplikan[D]+"</span>";q+="</li>";document.write(q);r++;if(r==numpost){break}}if(D<reljudul.length-1){D++}else{D=0}if(D==z){break}}};
//]]>
</script>
<div style='width:570px;height:250px; margin-bottom:10px; margin-top:15px;'>
<div id='related_posts'>
<h4>Artikel Terkait</h4>
<b:loop values='data:post.labels' var='label'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=relpostimgcuplik&max-results=19"' type='text/javascript'/>
</b:loop>
<ul id='relpost_img_sum'>
<script type='text/javascript'>artikelterkait();</script>
</ul>
</div>
</div>
</b:if>

5. Simpan Tempalte

Note :

Anda perhatikan pada setiap kode yang saya beri warna:

Pada kode #3358CC, size:23px dan Artikel Terkait: merupakan pengaturan nama, warna, jenis huruf dan besarnya sesuai keinginan.
Pada kode 275px;height:70px; : merupakan pengaturan maksimal-Lebar dan Tinggi Artikel Terkait yang ditampilkan.
Pada kode var numpost = 6 : merupakan pengaturan untuk jumlah tampilan judul dan gambar.
Pada kode width:570px;height:250px; : merupakan pengaturan Lebar dan Tinggi Dari Fitur.

Demikian cara Membuat Relate Post Thumbnail/Gambar Vertikal V.2 , selamat mencoba dan semoga bermanfaat!