Membuat Artikel Terkait /Related Post

Membuat Artikel Terkait/Related Post sebenarnya sudah saya bahas pada kesempatan yang lalu, namun ada perbedaan dalam bentuknya. Jika pada kesempatan yang lalu saya memposting membuat artikel terkait/related post menggunakan fungsi scroll, namum sekarang saya akan menjelaskan membuat artikel terkait/related post menggunakan thumbnail. Agar Anda lebih memahami lihat gambar dibawah ini :

Setelah melihat gambar, seperti itulah related post tau artikel terkait menggunakan thumbnail. Namun jika kita telusuri menurut fungsinya, sebenarnya sama dengan related post yang pernah saya jelaskan sebelumnya. Sekarang tergantung selera Anda mau pakai yang mana, jika Anda ingin menggunakan dengan thumbnail perhatikan tutorial dibawah ini :

1. Seperti biasa Login terlebih dahulu ke akun blogger Anda

2. Kemudian klik rancangan

3. Klik menu Edit HTML

4. Ceklis atau centang kotak Expand Widget Templates (sebelumnya download template dahulu untuk berjaga-jaga jika terjadi kesalahan)

ceklis expand widget templates

5. Langkah berikutnya adalah cari kode </head> (gunakan ctrl + f untuk mempermudah pencarian)

6. Jika sudah dapat, sisipkan kode dibawah ini tepat diatas kode </head> tadi

<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/AVvXsEh2vFnrjbD0t25hQz4hfAVirj04jR_rWh2o9MHk0l6Ok9wh-dw-Dx5XTwCCth6qRH3a5ccEv9jUqZC9a94zY3bz6v7vlLzO8WXi6jqnW2v0q37Ujie8EmwSjWauoO0J8jKGEdg_pSTiVr4/") 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://sites.google.com/site/pujiantoroinc/Home/related_post_pelajaran_blog.js' type='text/javascript'/>

7. Lanjut kelangkah berikutnya, yaitu cari kode <data:post.body/>  (jika anda menggunakan fungsi readmore maka kode tersebut ada 2, maka letakkan kode dibawah ini tepat dibawah kode <data:post.body/> yang kedua

<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>

8. Simpan / Save dan lihat hasilnya

Nah, tutorial menarik lainnya untuk memodifikasi kotak komentar anda menngunakan theaded comments, Anda dapat membacanya dengan meng-klik link tersebut. Ok lah, saya rasa cukup sekian penjelasan yang dapat saya sampaikan, selamat mencoba dan berexperiment.