Selamat siang para blogger, Melanjutkan pertemuan sebelumnya yang membahas mengenai Cara Membuat Read More (baca selengkapnya) pada Blog. Maka kali ini saya akan membagi pengetahuan maupun pengalaman saya mengenai Cara Membuat Releated Post atau Artikel Terkait Pada Blog yang terdapat di bawah posting. Langsung saja kita mulai dan berikut langkah demi langkahnya :
- Buka dan masuk pada akun blog anda.
- Kemudian pilih elemen Template. Dan dilanjutkan dengan edit HTML.
- Jika sudah, Carilah kode </head>. Untuk mempercepat pencarian tekan Ctrl+F dan kemudian akan muncul tabel seperti yang saya beri tanda anak panah pada gambar di bawah. Lalu ketik </head> dan enter jangan lupa.
- Dan jika sudah ketemu kode </head> copy kode di bawah ini dan anda paste persis di atas kode </head> tersebut.
<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/AVvXsEhn2jR2gVKAjaDhn4vqHoKorOitgB1l9WlDEOx9ABVv1ZyfLSs0p9lh43mN5H6NWvhy7NafN_Ny5vRlbcCitTMZHSyQAs0PNItYsEVd4Jetpq0i20wx7-3lEwV4Oy8DDRGorKTsvoRLHIs/") 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='http://yourjavascript.com/11631137121/related_post_pelajaran_blog.js' type='text/javascript'/> - Atau jika anda masih bingung, bisa melihat pada gambar di bawah ini. Bagian yang saya block tersebut adalah kode HTML yang harus anda paste ke dalamnya. Perhatikan juga letak posisi kode HTML tersebut (persis di atas kode </head>.
- Langkah berikutnya adalah anda cari kode berikut <data:post.body/>. Kemudian copy kode HTML di bawah ini dan kemudian anda paste persis di bawah kode <data:post.body/>.
<br/><br/><b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != "true"'>,</b:if><b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=5"' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script></div></b:if> - Dikarenakan kode <data:post.body/> terdapat banyak sekali, maka saya akan membantu letak posisi kode HTML yang anda copy tadi. Lihat gambar dan perhatikan letak atau posisi kode HTML yang harus anda paste ke dalamnya.
- Simpan dan lihat hasilnya... (Sempurna)
Saya kira cukup artikel saya kali ini dan semoga bermanfaat buat anda semua. Dan seperti biasa, apabila terdapat pertanyaan; saran; maupun kritik mengenai artikel saya kali ini, bisa anda coret-coretkan pada tabel komentar di bawah. Wassalamu'alaikum Wr Wb dan salam sukses
