Cara Membuat Related Post seperti Arlina Design

Cara Membuat Related Post - Widget ini berguna untuk pengunjung melihat artikel lainnya yang masih terikat dalam postingan tersebut, yang akan menampilkan postingan atau artikel perlabel.

Related Post juga berguna untuk mempercantik Tampilan Blog anda, apalagi related post seperti Arlina Design yang mempunyai design yang elegan dan enak dipandang oleh mata. disini saya agak memodifikasi sedikit related postnya, kalian juga boleh memodifikasinya sesuka kalian. tanpa basi - basi lagi langsung saja caranya ada dibawah.

Caranya :

1. masuk ke Blogger > Template/Tema > Edit HTML > Copy Code CSS dibawah ini diatas kode ]]></b:skin> atau </style>

 /* Related Posts */
#related-post {margin:0 auto;padding:0;text-align:center;}
#related-post h4{font-size:14px;margin:0 0 10px 0;background:#fff;color:#424242;padding:15px 20px;font-weight:700;position:relative;text-align:left;text-transform:uppercase;overflow:hidden;border:1px solid #ddd;}
#related-post h4:after{display:inline-block;content:"\f004";font-family:fontAwesome;font-style:normal;font-weight:normal;font-size:18px;background-color:#fff;color:#e34c4c;top:0;right:0;padding:16px 20px;position:absolute;border:1px solid #ddd}
.relhead {font-size:100%;font-weight:normal;line-height:150%;padding:0 0 10px 0;overflow:hidden;box-shadow:inset 0 0 0 1px #e9e9e9;}
#relate-summary .news-text{display:block;text-align:left;font-weight:normal;color:#888;font-size:12px;margin-top:10px}
ul#relate-summary{margin:0 auto;padding:0 10px;list-style:none;word-wrap:break-word}
ul#relate-summary li{position:relative;list-style:none outside none;overflow:hidden;margin:0 10px;padding:10px 0;border-bottom:1px solid rgba(0,0,0,0.12)}
ul#relate-summary li:last-child{border:0}
ul#relate-summary li a{display:block;}
ul#relate-summary li img{background-color:#fafafa;display:block;width:100%;height:auto;max-width:90px;max-height:70px;vertical-align:middle;overflow:hidden;float:left;margin:0 10px 0 0;border:1px solid rgba(0,0,0,0.12);padding:3px;background:#fff;transition:all 1s ease-out}
ul#relate-summary li:hover img {opacity:0.96;}
ul#relate-summary li a.relinkjdulx{position:relative;color:#4c6fb8;display:block;font-weight:700;line-height:normal;overflow:hidden;text-align:left;text-transform:none}
ul#relate-summary li a.relinkjdulx:hover{color:#f8695f;} 

2. silahkan taruh kode dibawah ini di bawah kode </article>, dibawah kode share ,atau yang lainnya, mungkin saja disetiap template berbeda - beda

 <script type='text/javascript'>
//<![CDATA[
//Related Post
var relnojudul = 0;
var relmaxtampil = 5;
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]+"'><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==relmaxtampil){break}}if(D<reljudul.length-1){D++}else{D=0}if(D==z){break}}};
//]]>
</script>
  </div>
  </div>
        </div>
<div id='related-post'>
<div class='relhead'>
  <h4><span>Artikel Terkait</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='relate-summary'>
               <script type='text/javascript'>artikelterkait();</script>
          </ul>
     </div>
</div>
        </div>
 

3. Silahkan di Simpan dan Lihat hasilnya
itulah Cara Membuat Related Post seperti Arlina Design, jika anda masih bingung silahkan chat saya via FB afdo ghifariq. Semoga Bermanfaat