Membuat Artikel Terkait Keren Tanpa Thumbnail

 Cara Membuat Artikel Terkait Keren Tanpa Thumbnail

1. Masuk Blogger >> pilih Template >> Backup template agar aman jika terjadi kesalahan >> pilih Edit HTML

2. Copy kode ini: </head>
3. Letakkan kursur didalam kotak Edit HTML, tekan CTRL + F lalu CTRL + V
4. Jika sudah ketemu kode tag </head> maka copy kode script dibawah ini : Caranya klik: link ini copi KODE 1


<style> #related-posts { float : left;height:200px;overflow:auto; 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("http://lh3.ggpht.com/_cNpXRtRph18/S76dASm3WGI/AAAAAAAAEJg/AVmw4HhRdsk/rss.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='http://problogizjs.googlecode.com/files/Related-posts.js' type='text/javascript'/>

Dan paste atau letakkan semua code CSS tersebut sebelum tag </head> tadi.

5. Cari kode <data:post.body/> Sebagaimana anda tadi mencari </head> tadi lalu pilihlah <data:post.body/> yang paling bawah atau paling akhir sebagaimana sudah diulas pada cara membuat read more otomatis

6. Copy semua KODE 2 pada link tadi dan letakkan setelah <data:post.body/> tadi
<b:if cond='data:blog.pageType == "item"'> <div id='related-posts'> <font face='Arial' size='3'><b>Artikel Terkait : </b></font><font color='#151515'><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=10"' type='text/javascript'/></b:if></b:loop> </font> <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script> </div></b:if>  
7. Klik SIMPAN, lalu coba cek salah satu artikel anda apakah artikel terkaitnya sudah muncul? jika sudah maka SELESAI tapi jika belum maka coba pasang setelah <data:post.body/> yang sebelumnya ( <data:post.body/> yang ada di atasnya ), begitu seterusnya hingga berhasil sebagaimana yang terpasang pada blog ini.

Artikel terkait di bawah posting yang simple dengan icon RSS ini, tidak menggunakan thumbnail (gambar) agar loadingnya pada web browser lebih cepat. Selain itu saya senang dengan tampilan related post sederhana ini karena terlihat lebih menarik dan lebih professional apalagi dilengkapi dengan auto scroll, sehingga tidak banyak memakai halaman blog.