Struktur artikel terkait ini bisa dikatakan cukup rapi dengan menampilkan gambar dan judul di area bawah postingan, selain bisa menghemat ruangan, tentu juga bisa memanjakan pengunjung. Lebih jelas lagi silakan klik demo bawah ini.
01. Sebelum memulai Anda harus pastikan blog Anda sudah tersimpan font Droid Sans dan Oswald, jika sudah maka abaikan langkah ini, jika belum silakan simpan font bawah ini tepat di bawah
<head><link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>02. Simpan CSS ini di atas
]]></b:skin>#related_posts{
padding:0;
overflow:hidden;
display:inline;
}
#related_posts h4{
background:#698CD3;
padding:3px 0 5px 10px;
color:#fff;
font:30px Oswald;
line-height:1.3em;
text-align:left;
text-shadow: 0px 1px 1px #444;
letter-spacing:normal;
}
ul#relpost_img_sum{
margin:0;
padding:0;
text-align:justify;
display:inline;
}
ul#relpost_img_sum li{
background:#fff;
list-style:none;
padding:10px 0px 0px 0px;
margin:0;
width:320px;
height:70px;
float:left;display:inline;
}
ul#relpost_img_sum li a{
display:block;
}
ul#relpost_img_sum li img{
float:left;
width:100px;
height:65px;
border:5px solid #E5CED8;
margin:-5px 7px 0 0;
padding:0 auto;
}
ul#relpost_img_sum li img:hover{
border:5px solid #B6F9B6;
}
ul#relpost_img_sum li a.relinkjdulx{
display:block;
overflow:hidden;
margin-bottom:3px;
font:15px Droid Sans;
line-height:1.4em;
font-weight:400;
width:200px;
color:#444;
float:left;
text-align:left;}
ul#relpost_img_sum li a.relinkjdulx:hover{
text-decoration:underline;
}03. Selanjutnya cari kode
<div class='post-footer'> atau <data:post.body/>, dan simpan tepat dibawahnya. (Setiap struktur template berbeda-beda, maka Anda harus cukup teliti untuk menyimpannya).<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
var relnojudul = 0;var numpost = 8;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="http://1.bp.blogspot.com/-Xz4yd0i8yX0/UWmBGpGDn4I/AAAAAAAAELY/b-BxtwST5cE/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>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
var dimension = 150;
$('#related_posts').find('img').each(function(n, image){
var image = $(image);
image.attr({src : image.attr('src').replace(/s\B\d{2,4}/,'s' + dimension)});
image.attr('width',dimension);
image.attr('height',dimension);
});
});
//]]>
</script>
<div style='width:660px;height:250px;margin-bottom:0px;margin-top:15px;'>
<div id='related_posts'>
<h4>Viewed Articles:</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>Sudah berhasil atau belum? Masih ada pertanyaan? Tinggalkan komentar Anda dikolom komentar bawah ini, saya akan memaksimalkan untuk menjawabnya.
Bagi anda yang kesulitan untuk instalasi template, saya ada buka jasa desain dengan harga terjangkau, klik disini
2 komentar
kalo sudah terpasang, cara ngisi link di artikel terkait itu gimana mbhak?
artikel terkait menurut label, jadi otomatis, kecuali blog anda tidak menggunakan label, maka akan blink
Apapun alasannya saya hanyalah manusia biasa seperti Anda dengan keterbatasan kemampuannya, disini kita sama-sama belajar agar bisa berkembang di dunia maya. Maaf, jika ada komentar yang tidak terjawab adalah mungkin di luar kemampuan saya. Terima kasih telah membaca coretan kecil saya ini. Semoga bermanfaat untuk Anda.
Show EmoticonHide EmoticonShow Konversi KodeHide Konversi Kode