Cara Membuat Related Post di Blog

Cara membuat related post di blogspot

1. Langkah pertama Login di akun Blogger Anda.

2. Template / Edit HTML / kemudian copy dan pastekan kode CSS di bawah ini  tepat diatas kode ]]></b:skin>

.terkait{margin-bottom: 25px;text-align:left;margin-top:10px;float: left;}
.terkait ul {padding-top: 10px;
    margin: 0 0px;float: left;
    -webkit-padding-start: 0px;}
.terkait ul li{list-style-type: none!important;
    padding: 5px;
    margin: 0;height: auto;
    margin-bottom:5px;float: left;display: inline;
    }
span.news-text {
    font-size: 14px;
    line-height: 0px;
    color: #666;
}
.terkait ul li a{display:block}
.terkait ul li img{float: left;
    width: 85px;
    margin-right: 10px;
    padding: 0px 0px 0px 0px;
    border: 1px #F1F1F1 solid;}
.terkait ul li a.terkait_title{    display: block;
    margin-bottom: 5px;
    background-image: none;
    text-decoration: none;
    color: #111;font-weight: 500;}

3. Kemudian copy dan pastekan kode HTML di bawah ini tepat di bawah kode <div class=’post-footer-line post-footer-line-1′>.

Advertisement

<div class='terkait'> <h4>Baca Juga Artikel Terkait </h4> <b:if cond='data:post.labels'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:blog.pageType == &quot;item&quot;'> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=relpostimgcuplik&amp;max-results=50&quot;' type='text/javascript'/> <ul> <script type='text/javascript'>artikelterkait();</script> </ul> </b:if> </b:loop> </b:if> </div

4. Kemudian Copy dan pastekan kode di bawah ini di atasta g </head>

/*Related Post with Thumbnail & Summary 1.0 */ 
var relnojudul = 0; 
var numpost = 5; 
var numchars = 100; 
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<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='terkait_title' 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>

5. Kemudian save/simpan template. selesai silahkan reload salah satu kontent anda untuk melihat hasilnya.

Tutorial ini bekerja jika di dalam tamplate agan sudah terpasang fremwork jquery bagi yang belum silahkan copy dan paste kode di bawah ini di atas kode </head>

<script src='http://code.jquery.com/jquery-2.0.3.min.js'/>

demikianlah tutorial dari saya tentang cara membuat related post di blogspot semoga bermanfaat. jika ada pertanyaan seputar tutorial di atas silahkan tinggalkan komentar anda di bawah ini.