16 April 2012

Cara Membuat Related Post(Postingan Terkait)

Do you want to share?

Do you like this story?

Membuat Related Post
Mendengar perkataan Related Post saya yakin para sahabat blogger sudah tahu maksudnya. Tetapi masih banyak juga yang memiliki blog dan tidak membuat related post pada postingnya. Hal ini tentu saja akan merugikan blog itu sendiri, mengapa saya katakan demikian ?? Karena 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. Bagaimana sobat, anda ingin tahu Cara Membuat Related Post/Postingan Terkait? Silahkan baca dan terapkan step-step nya:

Langkah-langkah Membuat Related Post
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/>
<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
.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
* #F2F2F2 adalah warna background kotakan(bisa anda ganti sesuai keinginan)
* #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)

ARTIKEL TERKAIT :

88 komentar :

  1. mantap cuy, blog ane juga pakai related post,,

    sukses selalu buat ente,,
    cuy oh yah ditunggu Comment backnya,,, :)

    ReplyDelete
  2. wah nice share sobat, sangat membantu dan bermanfaat

    main ke sini ya sonat www.agung-info.web.id

    ReplyDelete
  3. wah, nice tricks..
    tp sayang ga support sama template blogku :p

    ReplyDelete
  4. @Yayas
    Support untuk blogspot kok bro.....

    ReplyDelete
  5. Boleh dicoba nihh..keep posting sob

    ReplyDelete
  6. muantap sob, bermafaat sekali untuk yang belum memasang di blognya

    ReplyDelete
  7. boleh juga nih, ijin nyobain gan..

    ReplyDelete
  8. beberapa tulisan artikelnya di letakkan dimana Gan....
    terima kasih

    ReplyDelete
  9. sudah bisa nih, makasih infonya

    ReplyDelete
  10. Bro mo tanya, maksud dari script ini (dari script artikel di atas)apa?
    var maxNumberOfPostsPerLabel = 4;
    var maxNumberOfLabels = 15;
    maxNumberOfPostsPerLabel = 15;
    maxNumberOfLabels = 3;
    Mohon penjelasannya. terimakasih

    ReplyDelete
  11. Wah di template aku ga bisa om -_-
    Nice share ya om

    mampir dong ke http://blog.robockop.com/

    ReplyDelete
  12. Wah sebenarnya saya bth bgt. tapi sayang gan tidak suport ma templatenya.. hehe thx gan..

    ReplyDelete
  13. sukseesss gan hahaha akhirnya berhasil juga
    berhasil berhasil berhasil
    #voice of dora
    :rolled:
    \0/

    ReplyDelete
  14. gan kok di ane gk working gan ??? kenapa ya gan ??? bisa di bantu gk gan ???

    nih blof ane www.3nura.blogspot.com

    ReplyDelete
  15. @Aksatriya Diwangkara Nusantarabisa gan ... ternyata ane naro kodenya di yang pertama seharusnya yang kedua gan hehehe

    ReplyDelete
  16. @Aksatriya Diwangkara Nusantara
    Iya Gan ...khan emang di Tutorial-nya saya tulis:
    "jika menemukan banyak kode tersebut, gunakan kode yang ke-2"

    ReplyDelete
  17. Gan, mau nanya. Kalau mau masukin artikel-artikel yang terkaitnya, dimana ya gan?Maklum gan, newbie nih gan, baru belajar blog.
    Terima kasih sebelumnya gan.

    ReplyDelete
  18. Ane Coba gan tutorialnya,,sukses n dtunggu kunjungan baliknya...

    ReplyDelete
  19. makasih gan infonya...aku lg butuh tips ini...aku udah praktekin di blog ku dan berhasil..sekali lg makasih gan...sukses selalu...

    ReplyDelete
  20. nice tips gan,lanjut....

    ReplyDelete
  21. boleh juga nih di coba..
    btw cara ngasih emoticon di komentar, gmna tuh? \o/

    ReplyDelete
  22. Thx gan saranya ... ijin memperbanyak yah gan :)

    ReplyDelete
  23. berat gaa ya buat blog ane.??,, nanti ane coba yaa :-bd

    kunjungi my blog :
    achmad-buahbuahan.blogspot.com

    ReplyDelete
  24. gan kalo gak pakek kotak gimana caranya,,,biar trasparan gituhh,,,?

    ReplyDelete
  25. @TS UAD
    Terima kasih sobat sudah mau mampir di blog sederhana ini,jika sobat menginginkan supaya hasilnya tidak menggunakan kotakan sobat bisa lakukan stepnya:
    1.Lakukan langkahnya hanya sampai no.4
    2.Jangan langsung di SAVE,hapus code yang tercetak miring ini:
    <div class='rbbox'>
    <div style='margin:0; padding:10px;height:150px;overflow:auto;border:1px solid #ccc;'>

    .
    .
    .
    .
    </b:loop>
    </script>
    </div>
    <script type='text/javascript'>RelPost();</script>
    </div>
    </b:if>

    3.Lalu SAVE
    SEMOGA Tutorial ini bermanfaat

    ReplyDelete
  26. Thanks sudah berbagi ilmunya, sukses selalu....

    ReplyDelete
  27. gan punyaku kok malah ada 2 yang satu tepat berada di dalam postingan dan bisa di scroll yang satunya sudah mirip dengan punya agan ini, bagaimana ini gan tolong dilihat sebentar

    ReplyDelete
  28. @getextension
    xV Iya Gan...khan emang sebelum Agan menerapkan Tutorial ini,pada template agan sudah terpasang "Related Articles" atau Artikel Terkait.
    Jadi mau pake yang mana?
    1.Jika ingin menggunakan Artikel terkait bawaan tempalte,hapus code2 tutorial ini yang telah anda pasang.
    2.Jika ingin menggunakan Artikel terkait Tutorial ini,bs agan ikuti stepnya:
    - Login ke Blogger.com -> Template -> Edit HTML -> Expand Widget
    - Lalu cari kode ini dan hapus
    <div id='related-articles'>
    .............
    .............
    .............
    .............
    </script>
    </div>

    note:
    * Letaknya dibawah code <div id='under-wrapper'>
    - Lalu SAVE
    Gimana gan hasilnya,kalo ada kendala dengan senang hati mencoba membantu :-d

    ReplyDelete
  29. @indolaron aganya baik bgt ixixiiiixx... :D terimakasih gan sudah saya pake dan berhasil :)

    ReplyDelete
  30. artikel yang bagus sob ..
    like this ..
    mampir ke blog terbaik djarumnews.blogspot. com

    mksi :)

    ReplyDelete
  31. Info yang Bagus, Terima Kasih Ilmunya

    ReplyDelete
  32. Terima kasih atas ilmunya...
    Bermanfaat sekali

    ReplyDelete
  33. Saya Newbie Tolong Bantuannya Agar Blog Saya Banyak DiKunjungi Dan Terimakasih Atas Informasinya Posting Lg Yang Menarik Ya :rolled:
    Jangan Lupa Kunjungi Blog Saya >>hanifahputrialamsyah51.blogspot.com

    ReplyDelete
  34. SEO-nya mantap, untuk keyword "Cara Membuat Related Post" bisa muncul di halaman pertama Google.

    ReplyDelete
  35. Related postx kena sama simbol rss gan, gmana solusinya??
    silakan mampir di sehatpikiran.blogspot.com

    ReplyDelete
  36. @Mizar Younghusband
    Pengen saya langsung memberi komentar pada blog Agan,tapi kayanya settingan ukuran form komentar Blog Agan kurang mendukung(pake code verifikasi,tp tempat menaruh code kga kliatan) x@ :p . So jika Agan mampir lg di blog ini dan baca lagi artikel ini,silahkan:
    Coba agan edit CSS-nya:
    - Pd code: .rbbox ul li { bla bla bla }
    - Angka pd padding-left ubah mjd 30px atau 40px

    Otak-atik aj sobat code2 CSS-nya
    Jika kurang jelas bs tanyakan lgi,mudah-mudahan bisa membantu. Met Kreasi so :)

    ReplyDelete
  37. terimakasih atas tipsnya..........sangat membantu!!!!
    topcomit.blogspot.com

    ReplyDelete
  38. sekali lagi terimakasih,,,,,,,,,,,langsung bs diterapkan
    topcomit.blogspot.com

    ReplyDelete
  39. @wais alqurny
    OK sobat, senang jika akhirnya Artikel ini bermanfa'at :-d

    ReplyDelete
  40. wah anda emang mantab sobat...
    saya sudah berhasilll
    terimakasih banyak atas bantuannya :)

    ReplyDelete
  41. Waah saya sudah lakukan dan bisa sob

    makasi yaaa
    :D :p :-d ^:D

    ReplyDelete
  42. @Andie Shinigami
    O.K gan senang rasanya jika para pembaca sukses menerapkan Tutorial2 di blog ini. Silahkan cari info yang Anda cari sobat,sapa tau nemu ilmu yang lum pernah didapat....
    SALAM SUKSES :bye:

    ReplyDelete
  43. Supar sekali bang!!! saya sudah coba dan berhasil...
    arikelnya sangat bagus dan mudah di terapkan..!!!

    ReplyDelete
  44. iya sob, saya akan lihat - lihat dulu artikel disini
    terutama tentang seo, saya tertarik sekali
    :D
    ^:D

    salam kenal dan salam berbagi

    ReplyDelete
  45. ijin nerapin ilmunya sob, ane masih newbie...

    ReplyDelete
  46. thanks gan atas tutornya,namun ane masih bingung karen blm bisa coba cek http://serbafakta.blogspot.com/

    ReplyDelete
  47. Ini dia yang saya cari, thnks gan infonya.
    berkunjung yah. http://clints01.blogspot.com/ \o/

    ReplyDelete
  48. @Kumpulan Resep Masakan Praktis : Silahkan kawan dicoba & otak-atik sesuai selera :)
    @dodolanweb : Sama-sama
    @blogkita : O.K kawan,makasih juga dah mau mampir :-d

    ReplyDelete
  49. Mantap sob, thanks buat tips keren ini

    ReplyDelete
  50. @Batak Musik: Sama-sama sobat
    @Abang Musik: Sip dech klo work, Thanks juga dah berkunjung :)

    ReplyDelete
  51. Gan, mau tanya klo buat masukin artikel terkaitnya gimana caranya ya?

    ReplyDelete
  52. sudah oke gan,, trimms atas tutorialnya,,

    ReplyDelete
  53. kok gak ada gambarnya bro!!! :(

    ReplyDelete
  54. @Hamzah Nugraha
    Maf ya gan, sepertinya file kedelete :'(
    coba url gmbr-nya pake ini:
    http://i1237.photobucket.com/albums/ff469/indolaron/icon/007.png

    ReplyDelete
  55. makasih gan untuk tutorialnya sangat bermanfaat dan yang terpenting di blog ane langsung bisa gan!

    ReplyDelete
  56. mksh atas share cara membuat related post

    ReplyDelete
  57. kalo script yg diatas tuh memberatkan loading blog ato enggak bang

    ReplyDelete
  58. kunjungan malam sob...
    jangan lupa berkunjung ke blog saya ..
    http://felickerz.blogspot.com/
    maaf kalau masih sepi, masih baru soalnya.
    salam blogger. :)

    ReplyDelete
  59. @Marchel Hadi
    Sama-sama sobat, silahkan diotak-atik sendiri kodenya (sesuai dengan selera masing2) :-d

    ReplyDelete
  60. Terima kasih ya Mas Info nya..., sangat membantu benar sungguh....!

    ReplyDelete
  61. NewBie Bro Eh, dapat tips baru, Nice Artikel ^:D

    ReplyDelete
  62. Terima kasih banyak sudah memberikan cara membuat related post, saya berharap anda bisa modifikasi beberapa komentar, jujur saja banyak yang nyepam disini. Dari pengalaman saya sendiri, banyak para pengunjung yang mencari sesuatu dari komentar juga. Jadi semakin isi komentar bagus dan bermanfaat dalam artian nyambung, insya allah pengunjung balik lagi.

    ReplyDelete
  63. @DIKA
    Bner banget kata Anda, komentar yg baik adalah koment yg nyambung dengan isi artikel dan mematuhi aturan dari blog itu sendiri.
    Makasih ats komentar+masukannya, tapi saya gak paham dng komentar anda "...modifikasi beberapa komentar" itu gimana ya..??
    Mungkin maksud anda Memoderasi kali :p :p

    ReplyDelete
  64. terimakasih atas infonya, senang bisa mengunjungi blog anda, semoga bermanfaat bagi para pembaca, nice post :-d \o/

    ReplyDelete
  65. wah pertamax gan tulisannya, thaks yah

    ReplyDelete
  66. sungguh tulisan yang sangat menambah info dan pengetahuan, terimakasih bnyak yah, salam kenal. thaks

    ReplyDelete
  67. @Pulau Tidung
    Saya akan selau berusaha untuk memberikan info yang bermanfaat, salam kenal juga brother :)

    ReplyDelete
  68. cool topic and well written article, I really like your site and will be reading it a lot more!

    ReplyDelete
SILAHKAN TULIS KOMENTAR ANDA, DENGAN CATATAN :
* Komentator "Anonymous" tidak diprioritas-kan, jadi gunakan salah satu Profile untuk respon lebih cepat
* Jika anda tidak memiliki akun Google anda bisa gunakan Name/URL
   - isi Name dengan Nama Anda
   - isi URL dengan link/url profile Facebook Anda atau Twitter Anda atau yang lainnya
* Mohon jangan menyisipkan Link Hidup..!!!
* Please do not insert Live Links ....!!!

Advertisements

Advertisements

 

Cara Membuat Related Post(Postingan Terkait) Oops ! | Error 404