Langkah-langkah Membuat Related Post
1. Login ke Blogger.com --> Design --> Edit HTML2. 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 == "item"'> <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 = "<data:blog.homepageUrl/>"; var maxNumberOfPostsPerLabel = 4; var maxNumberOfLabels = 15; maxNumberOfPostsPerLabel = 50; maxNumberOfLabels = 3; function listEntries10(json) { var ul = document.createElement('ul'); var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ? json.feed.entry.length : maxNumberOfPostsPerLabel; for (var i = 0; i < maxPosts; i++) { var entry = json.feed.entry[i]; var alturl; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { alturl = entry.link[k].href; break; } } var li = document.createElement('li'); var a = document.createElement('a'); 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 < json.feed.link.length; l++) { if (json.feed.link[l].rel == 'alternate') { var raw = json.feed.link[l].href; var label = raw.substr(homeUrl3.length+13); var k; for (k=0; k<20; k++) label = label.replace("%20", " "); var txt = document.createTextNode(label); var h = document.createElement('b'); h.appendChild(txt); var div1 = document.createElement('div'); div1.appendChild(h); div1.appendChild(ul); document.getElementById('albri').appendChild(div1); } } } function search10(query, label) { var script = document.createElement('script'); script.setAttribute('src', query + 'feeds/posts/default/-/' + label + '?alt=json-in-script&callback=listEntries10'); script.setAttribute('type', 'text/javascript'); 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 = "<data:label.name/>"; var test = 0; for (var i = 0; i < labelArray.length; i++) if (labelArray[i] == textLabel) test = 1; if (test == 0) { labelArray.push(textLabel); var maxLabels = (labelArray.length <= maxNumberOfLabels) ? labelArray.length : maxNumberOfLabels; if (numLabel < 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)
mantap cuy, blog ane juga pakai related post,,
ReplyDeletesukses selalu buat ente,,
cuy oh yah ditunggu Comment backnya,,, :)
wah nice share sobat, sangat membantu dan bermanfaat
ReplyDeletemain ke sini ya sonat www.agung-info.web.id
wah, nice tricks..
ReplyDeletetp sayang ga support sama template blogku :p
@Yayas
ReplyDeleteSupport untuk blogspot kok bro.....
informasi yang membangun..maju terus !!
ReplyDeleteBoleh dicoba nihh..keep posting sob
ReplyDeletemuantap sob, bermafaat sekali untuk yang belum memasang di blognya
ReplyDeleteboleh juga nih, ijin nyobain gan..
ReplyDelete@cucunguk rieut
ReplyDeleteMonggo...Silahkan di praktek-kan Gan :)
beberapa tulisan artikelnya di letakkan dimana Gan....
ReplyDeleteterima kasih
sudah bisa nih, makasih infonya
ReplyDeleteBro mo tanya, maksud dari script ini (dari script artikel di atas)apa?
ReplyDeletevar maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 15;
maxNumberOfPostsPerLabel = 15;
maxNumberOfLabels = 3;
Mohon penjelasannya. terimakasih
bermanfaat sekali sob..
ReplyDeleteWah di template aku ga bisa om -_-
ReplyDeleteNice share ya om
mampir dong ke http://blog.robockop.com/
Wah sebenarnya saya bth bgt. tapi sayang gan tidak suport ma templatenya.. hehe thx gan..
ReplyDeletejempol
ReplyDeletesukseesss gan hahaha akhirnya berhasil juga
ReplyDeleteberhasil berhasil berhasil
#voice of dora
:rolled:
\0/
gan kok di ane gk working gan ??? kenapa ya gan ??? bisa di bantu gk gan ???
ReplyDeletenih blof ane www.3nura.blogspot.com
@Aksatriya Diwangkara Nusantarabisa gan ... ternyata ane naro kodenya di yang pertama seharusnya yang kedua gan hehehe
ReplyDelete@Aksatriya Diwangkara Nusantara
ReplyDeleteIya Gan ...khan emang di Tutorial-nya saya tulis:
"jika menemukan banyak kode tersebut, gunakan kode yang ke-2"
Gan, mau nanya. Kalau mau masukin artikel-artikel yang terkaitnya, dimana ya gan?Maklum gan, newbie nih gan, baru belajar blog.
ReplyDeleteTerima kasih sebelumnya gan.
Ane Coba gan tutorialnya,,sukses n dtunggu kunjungan baliknya...
ReplyDeletemakasih gan infonya...aku lg butuh tips ini...aku udah praktekin di blog ku dan berhasil..sekali lg makasih gan...sukses selalu...
ReplyDeletexV
ReplyDeleteijin coba..
good
ReplyDeletenice tips gan,lanjut....
ReplyDeleteboleh juga nih di coba..
ReplyDeletebtw cara ngasih emoticon di komentar, gmna tuh? \o/
Thx gan saranya ... ijin memperbanyak yah gan :)
ReplyDeleteberat gaa ya buat blog ane.??,, nanti ane coba yaa :-bd
ReplyDeletekunjungi my blog :
achmad-buahbuahan.blogspot.com
gan kalo gak pakek kotak gimana caranya,,,biar trasparan gituhh,,,?
ReplyDelete@TS UAD
ReplyDeleteTerima 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
Thanks sudah berbagi ilmunya, sukses selalu....
ReplyDeletegan 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@getextension
ReplyDeletexV 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
@indolaron aganya baik bgt ixixiiiixx... :D terimakasih gan sudah saya pake dan berhasil :)
ReplyDeleteartikel yang bagus sob ..
ReplyDeletelike this ..
mampir ke blog terbaik djarumnews.blogspot. com
mksi :)
Info yang Bagus, Terima Kasih Ilmunya
ReplyDeleteTerima kasih atas ilmunya...
ReplyDeleteBermanfaat sekali
Saya Newbie Tolong Bantuannya Agar Blog Saya Banyak DiKunjungi Dan Terimakasih Atas Informasinya Posting Lg Yang Menarik Ya :rolled:
ReplyDeleteJangan Lupa Kunjungi Blog Saya >>hanifahputrialamsyah51.blogspot.com
SEO-nya mantap, untuk keyword "Cara Membuat Related Post" bisa muncul di halaman pertama Google.
ReplyDeleteoh sudah bisa ,, YEEY
ReplyDeleteRelated postx kena sama simbol rss gan, gmana solusinya??
ReplyDeletesilakan mampir di sehatpikiran.blogspot.com
@Mizar Younghusband
ReplyDeletePengen 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 :)
terimakasih atas tipsnya..........sangat membantu!!!!
ReplyDeletetopcomit.blogspot.com
sekali lagi terimakasih,,,,,,,,,,,langsung bs diterapkan
ReplyDeletetopcomit.blogspot.com
@wais alqurny
ReplyDeleteOK sobat, senang jika akhirnya Artikel ini bermanfa'at :-d
wah anda emang mantab sobat...
ReplyDeletesaya sudah berhasilll
terimakasih banyak atas bantuannya :)
Waah saya sudah lakukan dan bisa sob
ReplyDeletemakasi yaaa
:D :p :-d ^:D
@Andie Shinigami
ReplyDeleteO.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:
Supar sekali bang!!! saya sudah coba dan berhasil...
ReplyDeletearikelnya sangat bagus dan mudah di terapkan..!!!
iya sob, saya akan lihat - lihat dulu artikel disini
ReplyDeleteterutama tentang seo, saya tertarik sekali
:D
^:D
salam kenal dan salam berbagi
gan..di blog ane ko gk bisa gan
ReplyDeleteijin nerapin ilmunya sob, ane masih newbie...
ReplyDeleteThanks gan
ReplyDeletethanks gan atas tutornya,namun ane masih bingung karen blm bisa coba cek http://serbafakta.blogspot.com/
ReplyDeletemakasih gan
ReplyDeleteIni dia yang saya cari, thnks gan infonya.
ReplyDeleteberkunjung yah. http://clints01.blogspot.com/ \o/
makasih gan
ReplyDelete@Clinton Simanjuntak
ReplyDeleteSip makasih teman :)
Coba di blogku ahhhh
ReplyDeleteterima kasih,,,
ReplyDelete:-d trimakasih :-d
ReplyDelete@Kumpulan Resep Masakan Praktis : Silahkan kawan dicoba & otak-atik sesuai selera :)
ReplyDelete@dodolanweb : Sama-sama
@blogkita : O.K kawan,makasih juga dah mau mampir :-d
Mantap sob, thanks buat tips keren ini
ReplyDeletemakasih bang work nih :D
ReplyDelete@Batak Musik: Sama-sama sobat
ReplyDelete@Abang Musik: Sip dech klo work, Thanks juga dah berkunjung :)
Gan, mau tanya klo buat masukin artikel terkaitnya gimana caranya ya?
ReplyDeletesudah oke gan,, trimms atas tutorialnya,,
ReplyDeletethanks infonya mas
ReplyDeletekok gak ada gambarnya bro!!! :(
ReplyDelete@Hamzah Nugraha
ReplyDeleteMaf ya gan, sepertinya file kedelete :'(
coba url gmbr-nya pake ini:
http://i1237.photobucket.com/albums/ff469/indolaron/icon/007.png
makasih gan untuk tutorialnya sangat bermanfaat dan yang terpenting di blog ane langsung bisa gan!
ReplyDeletemksh atas share cara membuat related post
ReplyDeletekalo script yg diatas tuh memberatkan loading blog ato enggak bang
ReplyDeletewew, keren..
ReplyDeletekunjungan malam sob...
ReplyDeletejangan lupa berkunjung ke blog saya ..
http://felickerz.blogspot.com/
maaf kalau masih sepi, masih baru soalnya.
salam blogger. :)
sip gan, makasih tipsnya \o/
ReplyDelete@Marchel Hadi
ReplyDeleteSama-sama sobat, silahkan diotak-atik sendiri kodenya (sesuai dengan selera masing2) :-d
Terima kasih ya Mas Info nya..., sangat membantu benar sungguh....!
ReplyDeleteNewBie Bro Eh, dapat tips baru, Nice Artikel ^:D
ReplyDeleteTerima 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@DIKA
ReplyDeleteBner 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
terimakasih atas infonya, senang bisa mengunjungi blog anda, semoga bermanfaat bagi para pembaca, nice post :-d \o/
ReplyDeletewah pertamax gan tulisannya, thaks yah
ReplyDeletesungguh tulisan yang sangat menambah info dan pengetahuan, terimakasih bnyak yah, salam kenal. thaks
ReplyDelete@Pulau Tidung
ReplyDeleteSaya akan selau berusaha untuk memberikan info yang bermanfaat, salam kenal juga brother :)
cool topic and well written article, I really like your site and will be reading it a lot more!
ReplyDeletegood tutorial.. terima kasih
ReplyDelete