Chens Blog - Related post adalah kaitan artikel dengan tema atau kategori yang sedang ditampilkan saat itu dimana kaitan itu ditujukan pada berita yang dipilih pada label atau kategori. Sehingga dengan adanya skrip related post ini maka 5 postingan dari kategori yang sama akan ditampilkan linknya dibawah dari berita yang terbaca saat itu. seperti yang tampak pada blog sederhana ini,dimana selain Cara Membuat Related Post di Blogspot ini anda bisa melihat beberapa judul artikel kami sebelumnya dalam kategori yang sama yaitu Tips.
Cukup menarik bukan? beberapa sumber web master menyebutkan jika dengan memasang related post ini bertujuan untuk meningkatkan view halaman, sehingga setiap pengunjung akan bisa lebih lama dalam blog tersebut karena memiliki banyak pilihan berita yang berkaitan. inilah tujuan untuk pemasangan dari related post pada blogspot. Saudara Web Master yang terhomat, cara cara ini mungkin telah anda terapkan sebelumnya atau bisa jadi lebih baik dari cara ini. Jadi, artikel ini bertujuan untuk mengingatkan anda yang newbie seperti saya yang harus selalu mengingat dan mengulang bila memerlukannya.
Salam hormat saya untuk webmaster senior, semoga ini berguna untuk yang baru belajar seperti saya ini. Tidak lupa saya sampaikan terima kasih atas kunjunganya. inilah skrip dari cara membuat related post yang kami sebutkan diatas.
<style>
#related-posts {
float : left;
width : 540px;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 13px Arial;
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 : #f1c232;
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;}
#related-posts a {
color : #b45f06;
font-size : 12px;
text-decoration : none;}
#related-posts a:hover {
color : #00ff00;
text-decoration : none;}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;}
display : block;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 16px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #ffffff;}
</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, bila tidak ada masalah. lanjutkan dengan mencari kode <data:post.body/> kemudian dibawahnya letakkan kode berikut :
<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<font face='Arial' size='3'><b> Artikel Terkait : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != "true"'>,</b:if><b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=5"' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>
Selamat Mencoba, semoga sukses...
thx gan infonya.. uda aku coba dan sukses... siipp...
ReplyDeleteMaturnuwun monggo mampir
ReplyDeletemakasih sob, udah saya praktekin dan berhasil...
ReplyDeletemakasih gan infonya
ReplyDeletetpi bagaimana ya kalau di html blognya
tidak ada
mohon di jawab ya master
salam kenal
Infonya sangat bermanfaat sekali Gan, terutama buat saya pribadi. Thanks dah share semoga makin exist az di dunia blogers.
ReplyDeletekok aneh gan?
ReplyDeleteane ada 3?? yg mana yg ditaruh?? visit jga di sini mas :)
boleh juga nih dicoba, mudah2an pas dihati :)
ReplyDeleteoke terima kasih, sudah saya coba dan bisa :)
ReplyDeletepunya saya koq gagal gan
ReplyDeletemakasih bro
ReplyDeletedari smua yang aku coba hny artikel ini yg berhasil
follow blog aku ntar follow back
http://sharingcommunitysc.blogspot.com/
thx btw :)
cara mengatur jumlah yang ditampilkan gimana gan,,, kontak kesini ya Kasax Kusux
ReplyDeleteSiiip gan, makasi gan. sangat membantu.
ReplyDelete