Praktek Penerapan, Postingan Terkait atau Related Post Dengan Gambar Thumbnail Responsive

Tema pada kali ini adalah Postingan Terkait atau  Related Post Responsive, begitulah kira-kira dengan judul Praktek Penerapan, Widget Postingan Terkait atau  Related Post di Blogger Dengan Gambar Thumbnail Responsive.

Ok, mari kita mulai praktek kali ini dengen menghapus terlebih dahulu semua kode related post yang ada di template anda jika sudah pernah menerapkannya dan merasa kurang puas dengan tampilan related post atau artikel terkait yang anda miliki sekaran.

Tetapi kalau anda belum pernah memasang artikel terkait atau related post di blog anda, lewati langkah di atas dan mulai ke tahap berikutnya.

1. Seperti biasa pilih Template kemudian Edit HTML. Bagi pemula jika kurang jelas lihat gambar berikut : 
   
   Bagi anda yang sudah paham abaikan gambar di atas dan lanjut ketahap selanjutnya.
2. Pasang kode CSS dan JavaScript Related Post Gambar Thumbnail Responsive berikut di atas kode </head>
   
   <!--Related Posts with thumbnails Scripts and Styles Start--> <!-- remove -->
   <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <style>
   #related-post {margin:0 auto;padding:0;}
   #related-post h4{position:relative;overflow:hidden;margin:10px 0 20px 0;font-size:120%;font-weight:700}
   #related-post h4:after{position:absolute;top:51%;overflow:hidden;width:78.3%;height:1px;
   content:&#39;a0&#39;;background-color:#ccc}
   #related-post h4 span{position:relative;display:inline-block;margin:0 10px 0 0}
   .relhead {font-size:100%;font-weight:normal;line-height:150%;overflow:hidden;padding:10px 0;}
   #related-summary .news-text {display:none;}
   ul#related-summary{margin:0 auto;padding:0;list-style:none;word-wrap:break-word}
   ul#related-summary li{position:relative;float:left;list-style:none outside none;padding:0;overflow:hidden;margin:0 10px 0 0;width:100%;max-width:175px;height:170px;transition:opacity .2s ease}
   ul#related-summary li a {display:block;}
   ul#related-summary li img{background-color:#fafafa;display:block;width:100%;height:auto;max-width:100%;max-height:100px;vertical-align:middle;overflow:hidden;margin:0 0 10px;transition:all 1s ease-out}
   ul#related-summary li:hover img {opacity:0.96;}
   ul#related-summary li a.relinkjdulx{background-image:none;color:#444;display:block;font-size:13px;font-weight:700;line-height:normal;overflow:hidden;padding:0;text-align:left;text-transform:none}
   ul#related-summary li a.relinkjdulx:hover{color:#c00;}
   @media only screen and (max-width:640px){
   ul#related-summary li {float:left;list-style:none;overflow:hidden;width:100%;border-bottom:1px solid #e6e6e6;padding:10px 0;max-width:100%;height:auto;}
   ul#related-summary li:last-child{border-bottom:none;}
   ul#related-summary li img{max-width:72px;float:left;margin:0 10px 0 0;}
   ul#related-summary li a.relinkjdulx {display:block;font-size:15px;font-weight:700;line-height:normal;overflow:hidden;padding:0 10px 10px 0;}}
   @media screen and (max-width:384px){
   ul#related-summary li img{display:none}}
   </style>
   <script type='text/javascript'>
   //<![CDATA[
   //Related Post
   var relnojudul = 0;
   var relmaxtampil = 6;
   var numchars = 120;
   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="http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.GIF"}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<relmaxtampil){if(relurls[D]!=t){q="<li class='news-title clearfix'>";q+="<a href='"+relurls[D]+"' rel='nofollow' target='_top' title='"+reljudul[D]+"'><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==relmaxtampil){break}}if(D<reljudul.length-1){D++}else{D=0}if(D==z){break}}};
   //]]>
   </script>
   <script type='text/javascript'>
   $(&quot;ul#related-summary li img&quot;).each(function(){$(this).attr(&quot;src&quot;,$(this).attr(&quot;src&quot;).replace(//s[0-9]+(-c)?//,&quot;/w175-h100-c/&quot;))});
   </script>
   </b:if>
   <!--Related Posts with thumbnails Scripts and Styles End-->
3. Langkah terahir pemasangan kode HTML di bawah kode <data:post.body/> yang kedua atau ketiga, bisa juga di bawah kode <div class='post-footer'> atau <div class='post-footer-line post-footer-line-2'> atau <div class='post-footer-line post-footer-line-3'> berikut kodenya :
   
   <!-- Related Posts with Thumbnails Code Start-->
   <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <div id='related-post'>
   <div class='relhead'>
     <h4><span>Related Posts</span></h4>
   <div class='clear'/>
             <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;amp;callback=relpostimgcuplik&amp;amp;max-results=50&quot;' type='text/javascript'/>
             </b:loop>
             <ul id='related-summary'>
                  <script type='text/javascript'>artikelterkait();</script>
             </ul>
        </div>
   </div>
   <div class='clear'/>
   </b:if>
   <!-- Related Posts with Thumbnails Code End-->

   
   
4. Save Template!

CATATAN : Jika ada masalah lebar gambar, bisa diatur pada kode CSS (bagian width), caranya cari kode berikut: max-width:175px;height:170px;transition:opacity .2s ease dan sesuaikan dengan lebar postingan anda dengan mengganti 175px sesuai lebar postingan anda.

Praktek ini di adopsi dari Contoh Blog Sebagai sumber dari admin.