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

Cara Membuat Artikel Terkait (Related Post) Di Bawah Postingan

Saturday, March 9, 2013 | 30komentar

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:

30 comments:

  1. Ok,,,Top banget saya sudah praktekin ga eror,,,

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete
    Replies
    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 :)

      Delete
  3. mksh atas info'x sob sangat membantu sekali bagi saya yang pemula..

    ReplyDelete
  4. This comment has been removed by the author.

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

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

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

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

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

      Delete
  7. artikel ini sangat bermafaat bagi semua pengunjung, termasuk saya

    ReplyDelete
  8. ok gan, trimakasih untuk ilmunya

    ReplyDelete
  9. mau coba dulu di pasan di blog ane

    ReplyDelete
  10. saya tunggu post yang berikutnya..

    ReplyDelete
  11. Kalo membuatnya pada tampilan template yang baru gimana ya mba mohon pencerahaannya
    thankz..

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

    ReplyDelete
  13. Sangat bermanfaat.... Working 100%, Visit my blog ya, ditunggu sarannya, Thanks

    ReplyDelete
  14. 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.

    ReplyDelete
  15. salam kenal sob, sangat membantu artikelnya...

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

    ReplyDelete
  17. boleh neh dipraktekit, thanks sob,, mampir2 yo di blog sederhana saya

    ReplyDelete
  18. 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

    ReplyDelete
  19. makasih sis,,
    salam kenal,,
    mampir ia,,
    www.mcholieq.com

    ReplyDelete

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