Artikel Terbaru :
Home » » Cara Membuat Artikel Terkait (Related Post) Di Bawah Postingan

Cara Membuat Artikel Terkait (Related Post) Di Bawah Postingan

Sabtu, 09 Maret 2013 | 32komentar

Cara Membuat Artikel Terkait (Related Post) Di Bawah Postingan -  Dengan adanya related post atau artikel terkait di setiap postingan, tentu saja ini akan memberikan backlink kepada posting yang lama dan visitor bisa mengunjungi postingan tersebut walaupun sudah lama dipublish. Cara Membuat Related Post/Postingan Terkait? Silahkan baca step-step nya Di Bawah:

1. Login ke Blogger.com --> Design --> Edit HTML
2. Lalu tandai kotak kecil Expand Widget
3. Lalu cari kode <data:post.body/> jika menemukan banyak kode tersebut, gunakan kode yang ke-2
4. Copy-paste kode berikut di bawah kode <data:post.body/>

Lihat Code
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<p style='font-style:bold;'>ARTIKEL TERKAIT:</p>
<div class='rbbox'>
<div style='margin:0; padding:10px;height:150px;overflow:auto;border:1px solid #ccc;'>
<div id='albri'/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 15;
maxNumberOfPostsPerLabel = 50;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;albri&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
<script type='text/javascript'>RelPost();</script>
</div>
</b:if>

5. Kemudian cari kode ]]></b:skin>
6. Copy-paste code CSS berikut ini tepat diatasnya

Lihat Code
.rbbox{border: 1px solid #000000;padding: 5px;
background-color: #F2F2F2;-moz-border-radius:5px; margin:5px;}
.rbbox:hover{background-color: #EFFBEF;}
.rbbox ul li {
display : block;
background : url(http://i1237.photobucket.com/albums/ff469/indolaron/icon/007.png) no-repeat 0px 0;
margin-left : -10px;
padding-top : 0;
padding-right : 0px;
padding-bottom : 1px;
padding-left : 20px;
margin-bottom : 5px;
line-height : 1em;
border-bottom:1px dotted #cccccc;}

 Terakhir klik Save/Simpan
KETERANGAN:
*ARTIKEL TERKAIT,bisa Anda ganti sesuai keinginan...misal:Related Post,Baca Juga,dll
*maxNumberOfPostsPerLabel = 50; adalah jumlah posting atau artikel terkait yang ingin di tampilkan *maxNumberOfLabels = 3; adalah jumlah label terkait yang ingin ditampilkan
*background-color: #F2F2F2; adalah warna background kotakan(bisa anda ganti sesuai keinginan)
*background-color: #EFFBEF; adalah warna background waktu disorot kursor(bisa diganti sesuai keinginan)
*http://i1237.photobucket.com/albums/ff469/indolaron/icon/007.png adalah icon didepan link(bisa diganti sesuai keinginan,usahaka size gambarnya kecil)
Contoh hasilnya:


 Catatan: karena semua template berbeda-beda maka jangan salahkan saya yah kalo ga berhasil yang jelas cara ini sudah saya praktekan dan berhasil sesuai gambar di atas atau di dalam blog ini
Share this article :

ARTIKEL TERKAIT:

32 komentar:

  1. thanks gan, ane praktekkin dulu

    BalasHapus
  2. Ok,,,Top banget saya sudah praktekin ga eror,,,

    BalasHapus
  3. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
    Balasan
    1. artikel dan code css nya ga ada yang salah karna sudah sit coba dan brhasil bu hamidah ... tapi karna template code berbeda" mungkin code ini ga cocok untuk template mu :)

      Hapus
  4. mksh atas info'x sob sangat membantu sekali bagi saya yang pemula..

    BalasHapus
    Balasan
    1. sama" trima kasih atas kunjungannya

      Hapus
  5. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
    Balasan
    1. mungkin anda kurang teliti atau ada kesalahan saat memasukan code nya coba di ulang dengan tliti kalo tetp ga bisa mungkin template mu emang ga cocok

      Hapus
  6. terimakasih,,iya bu, tapi sudah saya betulin,,sekarang jadi muncul semuanya,tereimaksih atas artikel artikelnya

    BalasHapus
  7. Oooh iya ba saya mau requst nih,, bikin dong artikel cara membuat iklan baris di blog, atau cara membuat blog iklan baris,, terima kasih

    BalasHapus
    Balasan
    1. insyallah ya mba sit usahakan .... untuk sekarang" siti nya lagi banyak kesibukan di dunia ofline :)

      Hapus
    2. ok ba saya tunggu yah,,soalnya resp resepnya pada manjur,,

      Hapus
  8. artikel ini sangat bermafaat bagi semua pengunjung, termasuk saya

    BalasHapus
  9. ok gan, trimakasih untuk ilmunya

    BalasHapus
  10. mau coba dulu di pasan di blog ane

    BalasHapus
  11. saya tunggu post yang berikutnya..

    BalasHapus
  12. Kalo membuatnya pada tampilan template yang baru gimana ya mba mohon pencerahaannya
    thankz..

    BalasHapus
  13. Kalo untuk template baru gimana ? kode ada 4 . terimakasih~ kunjung balik yaaa jkt48files.blogspot.com

    BalasHapus
  14. Sangat bermanfaat.... Working 100%, Visit my blog ya, ditunggu sarannya, Thanks

    BalasHapus
  15. Maaf mbak saya sangat newbie banget mohon bantuanya diketawain juga gpp kq, hehe :
    saya bingung kenapa setelah kode2 diatas tersebut sudah saya pasang di blog saya koq hasilnya blank alias gk ada tulisan apa2 didalam kotak " komentar terkait " ? gimana ya mbk cara ngisinya ?
    tolong dong jelasin or kirim ke Email : rafacom69@gmail.com
    Terima Kasih.

    BalasHapus
  16. salam kenal sob, sangat membantu artikelnya...

    BalasHapus
  17. kalo udah berhasil, tapi di kotaknya kosong ga ada apa-apanya, itu gimana cara ngisinya ya..??
    tolong kasih saran oke :)

    BalasHapus
  18. boleh neh dipraktekit, thanks sob,, mampir2 yo di blog sederhana saya

    BalasHapus
  19. makasih bos dah di coba ok juga tapi punya bos kok iconya bergerak ya
    salam
    http://britanas.blogspot.com/
    terus kalo mau buat kotak komentar bisa di hide kayak punya bos gimana caranya

    BalasHapus
  20. makasih sis,,
    salam kenal,,
    mampir ia,,
    www.mcholieq.com

    BalasHapus

Silahkan tinggalkan komentar sobat , tapi mohon jangan Nyepam ya..! Komentar dengan menyertakan LINK / ANCHOR TEXT atau promosi produk tertentu akan saya hapus karena blog ini bukan tempat untuk mempromosikan produk yang dijual di blog anda.

 
Support : Copyright © 2011. Tips Trik Blog | Dan Cara Buat Website - All Rights Reserved
Template Modify by Siti Saleha
Proudly powered by Blogger| Thanks For Visiting