Sehubungan ada sohib yang subuh-subuh sudah sms nanyain tentang bagaimana cara bikin Related Post (Artikel Terkait), akhirnya harus nulis juga mengenai Related Post ini meski baru aja semalam aku curat-coret di blog ini. Ga pa pa kan? Demi sohib dan kamu semua aku rela mati (baca: makan timbel) deh, hehehe...
Sebenarnya apabila kita searching mengenai Related Post ini maka akan muncul puluhan tulisan seputarnya, baik yang dalam bahasa asing maupun bahasa kita (sayang blum ada dalam bahasa sunda unk). Tapi kalo kamu males “kakaratak” and milih-milih artikel yang pas, baca aja tulisan ini, mudah-mudahan bisa kamu terima dengan suka cita dan lapang dada, hehehe...
Fungsi Related Post adalah untuk menunjukkan artikel-artikel yang berhubungan dengan suatu kategori atau label dari sebuah tulisan. Dengan adanya Related Post ini, si pembaca dapat langsung melihat artikel terkait sehingga bisa langsung meg-klik-nya tanpa harus membuka-buka Blog Archieves.
Untuk menambahkan Related Post dalam blog, kamu bisa mengikuti langkah-langkah berikut :
Mudah kan? Nah, sekarang kamu tinggal melihat hasilnya.
Selamat mencoba...
Referensi: Dari berbagai sumber
Sebenarnya apabila kita searching mengenai Related Post ini maka akan muncul puluhan tulisan seputarnya, baik yang dalam bahasa asing maupun bahasa kita (sayang blum ada dalam bahasa sunda unk). Tapi kalo kamu males “kakaratak” and milih-milih artikel yang pas, baca aja tulisan ini, mudah-mudahan bisa kamu terima dengan suka cita dan lapang dada, hehehe...
Fungsi Related Post adalah untuk menunjukkan artikel-artikel yang berhubungan dengan suatu kategori atau label dari sebuah tulisan. Dengan adanya Related Post ini, si pembaca dapat langsung melihat artikel terkait sehingga bisa langsung meg-klik-nya tanpa harus membuka-buka Blog Archieves.
Untuk menambahkan Related Post dalam blog, kamu bisa mengikuti langkah-langkah berikut :
- Login terlebih dahulu ke akun blogger kamu.
- Dari halaman Dashboard klik Tata Letak dan pilih Edit HTML.
- Kemudian centrang pada Expand Template Widget.
- Carilah kode <data:post.body/> (gunakan Control F atau F3).
- Letakkan kode script berikut di bawahnya:
<!-- Mulai Related Post --> <b:if cond='data:blog.pageType == "item"'> <div style='margin-top:20px; padding:0px 10px; border:2px solid #CCC'> <div class='related-posts'> <div class='widget-content'> <h4>Artikel terkait dengan kategori ini:</h4> <div id='datablogku' style='margin:10px 0px 10px 0px'/> <script type='text/javascript'> var homeUrl3 = "<data:blog.homepageUrl/>"; var maxNumberOfPostsPerLabel = 4; var maxNumberOfLabels = 10; maxNumberOfPostsPerLabel = 100; 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('datablogku').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></div> <!-- Terimakasih karena anda tidak menghapus link ini --> <div style='font-size:85%; float:right; margin-top:3px;'><a href='http://ruangsc.blogspot.com/2009/06/menampilkan-related-post-artikel.html' target='_blank' title='Cara membuat Related Post'>Widget by SC Community</a> </div></div> </b:if> <!-- Akhir Related Post -->
Catatan:» Ukuran yang diberi warna merah bisa kamu ubah.
» Jika kamu sudah menggunakan script Readmore ini, letakkan kode tersebut di bawah <data:post.body/> yang pertama (paling atas). Jika berbeda, kamu bisa mencobanya di bawah <data:post.body/> yang kedua (paling bawah).
» Jika kamu sudah menambahkan Icons Social Bookmarking atau Addthis Sharing Tools, letakkan kode tersebut dibawah script Icons Social Bookmark atau Addthis Sharing Tools. - Simpan hasil edit kamu dan ucapkan Alhamdulillah....
Mudah kan? Nah, sekarang kamu tinggal melihat hasilnya.
Selamat mencoba...
Referensi: Dari berbagai sumber
27 komentarPosting Komentar
udah nyoba tapi belum jadi, waktu posting harus masukin data lagi ga yang dibawah judul
Betulan keren sekali ni blog,, 2 jempol buat sampeyan mas,, :D
asslamualikum..aku udah nambah kan skrip atikel yang terkait di blog, tapi ga muncul2 juga ya? kenap?padahal udah sesuai yang di anjurkan.
@Rev Technology For All
Trima kasih atas complainnya. Ternyata setelah dicek memang ada sedikit kesalahan pada penulisan scriptnya. Alhamdulillah sekarang sudah diperbaiki.
Mudah-mudahan sekarang tidak ada masalah lagi dengan scriptnya. Maklum dah tua, hehe...
makasih, udah saya coba bikin ...sukses
TErima kasih mas :)
makasih sob artikelnya, ak mo coba praktekin ya :)
blog psikologi
Pa kalo gak ada data:post.body nya gimana?
@Rep Andika:
Pasti ada. Mungking blum dicentrang meureun Expand Template Widget-na.
berat neh blog nya...
ganool blogspot
Wah nyunda pisan si kang Admin euy.. lam kenal
kang.. siap jadi tukang nongkrong baru di blog ieu nya :P
gimana aq coba kok nggak muncul? mohon bantuanya???
mantab kang stelah gw coba2, ternyata berhasil jg kodenya diletakan dibawah yg kedua... bkn yg pertama.
tq infonya fathur..
pantes gw letakan di yg pertama kaga bisa..
@Fathur dan Isnan:
Iya sob, memang bisa juga diletakkan di <data:post.body/> yang kedua.
Aku sudah coba, dibebarapa template memang bisa diletakkan di bawah <data:post.body/> pertama.
Thanks atas koreksinya
kok gk bisa kang, kan nya ada dua yang satu diatas yang satu dibawah kalo readmore saya yang pakai di bawah terus gimana? kalo kode ini dimana?
@Ikhsan:
Kalo script readmore-nya seperti punya SC, coba letakkan di kode <data:post.body/> yang pertama atau paling atas sob
oh. saya ikutin kang rohman waktu itu soalnya
asslamualikum..aku udah nambah kan skrip atikel yang terkait di blog, tapi ga muncul2 juga ya? kenap?padahal udah sesuai yang di anjurkan.
@Badruddin:
Wa'alaikum salam....
Artikel terkaitnya tidak muncul karena sobat tidak menuliskan label (kategori) pada setiap tulisannya. Seharusnya label-nya ditulis, misal nama labelnya: Tips Bisnis, Politik, Pendidikan, dll.
kang kalo cara ngilanginnya gimana ?
Trima kasih infonya...
Langsung ke TKP...
Sukses selalu. Amin...
terima kasih .
Mantap Gan! Saya cari-cari cara nambahin widget "related post". Udah muter tujuh keliling akhirnya nemu yang paling simple. Mantap pokoknya!
pengen pakek widget ini tp saya udah pasang yg ada gambarnya n bingung hapusnya mas
Bos saya sudah coba, tapi di blog saya kok gak well formed ya? Katanya gak bisa di parse karena ada kesalahan. Mohon pencerahannya gan.
:(
http://ribuan-cara.blogspot.com
http://thousand-tips.blogspot.com
dicoba dulu gan.. :)
Tambahkan Komentar
Terimakasih atas semua apresiasi yang sobat berikan.