Cara Buat/Pasang Related Post Dibawah Posting Blog

Cara Buat/Pasang Related Post Dibawah Posting Blog – Sudahkah Anda melihat perubahan pada blog Tips SEO + Blog – PC 123 ini? Yup, saya menambahkan daftar related post (atau artikel terkait) pada bagian bawah/akhir posting blog. Pemasangan daftar related post ini bertujuan untuk menekan angka bounce pada blog saya (intinya agar SEO blog saya makin baik), dan untuk membuat pengunjung blog saya betah berlama – lama di blog saya, hehehe…  Kali ini saya akan membagikan bagaimana cara memasang widget related post dibawah posting blog Anda. Oke, seperti biasa. Sebelum mencoba, silahkan lihat screen-shot-nya dibawah ini :

Berikut ini cara memasang daftar related post/artikel terkait pada blogger :

1.     Seperti biasa, buka akun Blogger Anda, lalu masuk ke menu Template.

2.     Jangan lupa untuk membuat sebuah backup dari template blog Anda. Lanjutkan dengan mengklik tombol Edit HTML.

3.     Cari kode </head> (Gunakan kombinasi tombol sakti : CTRL+F). Jika sudah ketemu, silahkan copy kode berikut, dan pastekan tepat diatas/sebelum kode </head>.

<style> #related-posts { float : left; width : 540px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAtXB1Zcy3D8J-B8XRi82QmHtYVt6lpHrIGQ3eRIO4JSbMWog6ebXsVv2Iz5SV1Ag1O770lC-oXeyhChdd7Ivd5SE3jt1v0VQbX7GUvP3kFx-EDiOvws6t5Z4IG9to3s6b1wI6vXKVjJvV/s1600/icon+bullet.png") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style> <script src='https://googledrive.com/host/0ByoCwyjwB1aDR2NLTllMaGlHeEk/' type='text/javascript'/>

4.     Jika Anda sudah melakukkan langkah nomor 3, carilah kode <data:post.body/> (seperti biasa, gunakan tombol sakti, CTRL+F). Jika sudah ketemu, copy dan pastekan kode berikut tepat dibawahnya.

Catatan : Kode <data:post.body/> umumnya ada banyak (tergantung pada setiap template). Solusinya, Anda dapat mencoba meletakkan kode berikut pada setiap kode <data:post.body/> yang Anda temui. Jika widget related post tidak mau muncul, hapus kode berikut, dan coba letakkan di kode <data:post.body/> yang lain.

<br/><br/><b:if cond='data:blog.pageType == "item"'><div id="related-posts"><font face='Arial' size='3'><b>Baca Juga : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'><script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font><script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();</script></div></b:if>

5.     Terakhir, klik Simpan. Buka blog Anda untuk melihat hasilnya.

Kustomisasi :

-         Anda dapat mengganti tulisan Baca Juga : menjadi tulisan lain. Caranya, ganti tulisan yang berwarna oranye diatas (pada kode nomor 4).

-         Anda juga dapat mengganti icon bullet pada related post. Caranya, ganti url yang berwarna merah pada langkah nomor 3. Untuk menemukan pengganti icon tersebut, Anda dapat mencarinya di situs pencari icon. Usahakan, icon yang digunakan berukuran 16 x 16 px.

Bagaimana? Selamat mencoba tutorial memasang daftar related post/artikel terkait di blog! Jangan segan – segan untuk meninggalkan komentar pada kotak komentar dibawah, dan salam blogger!