Saturday, January 1, 2011

Cara membuat artikel terkait di blogspot


Membuat navigasi blog adalah hal penting untuk meningkatkan page view web/blog, salah satunya adalah Membuat link artikel terkait, artikel yang berhubungan, Related post atau nama lain yang berdasarkan kategori atau label yang diberikan tiap postingan. 

Berikut ini tahap-tahap untuk menambahkan script Arttikel Terkait ke dalam Template Blog.

1. Login/masuk  ke Blogger.com jika belum log in.

2. Pada halaman Dasboard masuk ke Layout ( tata-letak ), pilih tab Edit Html.

3. Kemudian tandai/centang kotak di samping tulisan “Expand Template Widget”

4. Setelah itu tempatkan script berikut ini di bawah tag ]]></b:skin>

<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>


5 Kemudian cari bagian ini, dan tambahkan seperti kode yang di beri warna

<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'/>

<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>
</b:if>
</span>



6. Sekarang cari kode baris post-footer berikut ini.

    <div class='post-footer-line post-footer-line-3'>

kemudian masukan di bawahnya script ini.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='related-posts'>
<h4>Posts Terkait:</h4>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
</b:if>


Simpan Perubahan ( save template ).

Jika ingin memberi style atau gaya pada tampilan Widget Related Post ini. kita bisa menambahkan pada halaman Css-nya, script berikut, sebelum tag ]]></b:skin>

.related-posts h4{
margin: 0 0 0 10px;
padding: 0 0 0;
font-size: ukuran font;
color: #nilai warna;
}


Untuk List

.related-post ul{
margin: 0 0 0;
padding: 0 0 0;
list-style-type:none;}
.related-posts li{
margin: 0 0 0;
padding: 2px 0px 0px;
list-style-type:none;
font-size: ukuran font;}
.related-posts li a{color: #nilai warna}
.related-posts li a:hover{color: #nilai warna; text-decoration:none;}

di tulis dari berbagai sumber.
Q9T6VC9KFZQU 

13 comments:

  1. kawand, mau gak tukaran link... bdw kamu baru ngeblog yagh???/
    mau tau gak knp jarang komentar yg masuk di blog mu???
    jawabannya karena kamu tidak mengatur komentarmu, coba degh liat blogku klo di klik pada bagian komentar ada pilihan nama atau anonim. klo mau tau lebih lanjut ke blogku dulu, lalu komen di sana. key... nigh alamatnya: http://beritasangatbohong.blogspot.com

    ReplyDelete
  2. Haha yg baru ngeblog itu kyaknya >> http://beritasangatbohong.blogspot.com deh :D
    coba tuh atur blogmu, nonaktifkasn pengaturan adult konten

    ReplyDelete
  3. Mantap gan tipsnya, makasih infonya

    ReplyDelete
  4. kok di blog saya gak bisa sih?? kenapa ya??
    apa karena tema yang saya gunakan???
    liat aja di http://t-you.blogspot.com

    ReplyDelete
  5. tank's infonya gan,,
    mantabs,,

    ReplyDelete
  6. Waduh panjang betul langkahnya, tapi gpp patut dicoba krn related post sangat penting untuk membuat backlink halaman kita harapannya nanti bisa mendongkrak trafik Peluang Bisnis Online Tanpa Ribet

    ReplyDelete
  7. Kalo Bikin yg ada gambarnya gmn gan?
    kyk di blog ini you might also like

    Thnkz kk

    ReplyDelete
  8. Wkwkwk,,,ternyata sudah ada postingan nya disini. Maaf ga baca-baca dulu. nice Blog :)

    ReplyDelete
  9. mantap gan boleh ane coba... cuma masih binggung... harus baca 3 kali nih.... sewa tenda cikaranga

    ReplyDelete
  10. wah info yg bermanfaat nih gan mantap deh

    ReplyDelete
  11. makasih infonya sangat membantu sekali untuk yang belum pasang, nice share and happy blogging

    ReplyDelete

LinkWithin

Related Posts Plugin for WordPress, Blogger...