Cara Membuat Related Post / Artikel Terkait dibawah Postingan

 Well langsung saja tanpa basa-basi, aku bakalan ngasi sedikit tips ngedit blog bagi para blogger pemula neh..

Tapi sebelumnya, related post / artikel terkait tuh apa sih??

Hmm dengan bahasa yang tidak sulit, Related  Post / Artikel Terkait itu adalah postingan yang saling berhubungan satu sama lain sesuai dengan label yang diberikan pada masing² postingan kamu.

Misalnya, postingan kamu tentang handphone,laptop atau gadget lainnya, lalu kamu kasi labelnya gadget. Nah, ketika postingan kamu tadi dibuka/diklik maka pada bagian bawah postingan kamu akan muncul, postingan² yang berhubungan dengan gadget.

Dst... begitulah kira² sedikit penjelasannya.

Dah ngerti kan??? pasti udah donk.. pinterr.... hehe

Well, untuk memasangnya di blog kamu, kamu harus sedikit mengotak atik di bagian edit HTML. Nggak sulit kok, kamu ikutin aja cara² di bawah ini ya...

• Pertama, kamu harus login terlebih dahulu pada blog kamu, lalu klik rancangan => edit HTML kemudian donwload template lengkap (untuk antipasi) , centang/klik pada bagian kotak "expand template widget"

• Kemudian, dengan bantuan F3 atau Ctrl+F  pada keyboard kamu cari kode ini </head>

• Copy  script dibawah ini, kemudian paste, letakkan tepat diatas kode </head>

<style>

#related-posts {
float : left;
width : 540px;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 11px Verdana;
margin-bottom:10px;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
color : #940f04;
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
color : #054474;
font-size : 11px;
text-decoration : none;
}
#related-posts a:hover {
color : #054474;
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url("http://www.dogphilosophy.net/graphics/sample1.jpg") no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 16px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}

</style>

<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>

• Selanjutnya cari kode ini : <p><data:post.body/></p>  atau  <data:post.body/>

• Kalau sudah ketemu, lalu copy script di bawah ini dan paste letakkan tepat di bawah kode <p><data:post.body/></p>  atau  <data:post.body/>

<b:if cond='data:blog.pageType == "item"'>

<div id="related-posts">

<h2>Related Posts on <b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><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=related_results_labels&amp;max-results=10&quot;' type='text/javascript'/></b:if></b:loop> </h2>

<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script>

</div></b:if>

ctt : 

- Tulisan  Related Posts yang berwarna hitam , dapat diganti dengan tulisan yang kamu inginkan 

- Jika kamu memakai readmore otomatis, maka letakkan script yang di atas tadi, di bawah kode <data:post.body/> yang kedua.

• Kemudian simpan template.

Pastikan semua langkah² diatas sudah kamu ikuti semua, jika benar insyallah kamu sukses melakukannya. Tetapi jika kamu belum berhasil juga, jangan menyerah ! coba terus sampai berhasil..Oke..

hasilnya akan sepeti ini :

Kunjungi juga situs ini untuk mendapatkan informasi lain!!

DWI JUAN'S BLOG English version

Posted in: blogtips