Cara Membuat Artikel Terkait di Bawah Postingan dengan Thumbnail

Membuat artikel terkait atau recent post di bawah potingan dengan gambar atau tumbnail seperti blog Mas Nicko ini sebenarnya sangat mudah. Beberapa kali saya mencari di google dan ada beberapa yang membuat saya kebingungan. Nah, akhirnya saya menemukan cara yang paling mudah dan akan saya share kepada teman teman semuanya.

Kegunaan menggunakan artikel terkait atau recent post, selain berguna dalam optimalisasi SEO, juga memudahkan pembaca menemukan artikel yang mungkin dirasa berguna juga. jadi gak sia sia dong kita posting dan akan langsung terlihat oleh pembaca tampa memilih milih lagi. Siapa tau pebaca tertarik untuk membaca lebih jauh lagi. Selain itu, blog akan  terlihat lebih rapi dan teratur, jadi enak dilietnya.

Oke, langsung saja simak baik baik cara membuat artikel terkait di bawah postingan:

1. Buka rancangan (jangan lupa back up template dahulu) --> Edit HTML
2. Jangan lupa centang "Expand Template Widget"
3. Pertama, tekan Ctrl + F untuk membuka kolom pencarian, lalu masukkan ke dalam kolom </head> lalu sisipkan kode berikut di atasnya:


<!--Kode Artikel Terkait dengan gambar start--> <!-- remove --><b:if cond='data:blog.pageType == "item"'> <style type='text/css'> #related-posts { float:center; text-transform:none; height:100%; min-height:100%; padding-top:5px; padding-left:5px; } #related-posts h2{ font-size: 1.6em; font-weight: bold; color: black; font-family: Georgia, “Times New Roman”, Times, serif; margin-bottom: 0.75em; margin-top: 0em; padding-top: 0em; } #related-posts a{ color:black; } #related-posts a:hover{ color:black; } #related-posts a:hover { background-color:#d4eaf2; } </style> <script type='text/javascript'> var defaultnoimage="http://4.bp.blogspot.com/-sCQy7v-L2bo/T3OYPnm7LuI/AAAAAAAABl4/cbteumcrZSU/s1600/noimage.png"; var maxresults=6; var splittercolor="#d4eaf2"; var relatedpoststitle="Artikel Terkait"; </script> <script src='http://julak-project.googlecode.com/files/relposts.js' type='text/javascript'/> <!-- remove --></b:if> <!--Kode Artikel terkait dengan gambar End-->


4. Langkah selanjutnya, masukkan lagi ke dalam kolom pencarian <div class='post-footer-line post-footer-line-1'> atau <div class='post-footer-line post-footer-line-2'> atau terkadang <div class='post-footer-line post-footer-line-3'> tergantung dimana kamu mau menempatkannya. Untuk percobaan pertama bisa kamu taruh di line 1, nanti kalo tidak pas bisa dipindah. Sisipkan kode berikut di bawahnya:


<!-- Related Posts with Thumbnails Code Start--> <!-- remove --><b:if cond='data:blog.pageType == "item"'> <div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != "true"'> </b:if> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop> <script type='text/javascript'> removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs("<data:post.url/>"); </script> </div> <div style='clear:both'/> <!-- remove --></b:if>


5. Kemudian, save atau simpan template. langsung lihat hasilnya. Tergantung bagaimana model template anda, kalo kudang pas, bisa kamu pindah kode yang ke 2.

Demikian cara membuat artikel terkait atau recent post di bawah postingan. Semoga bermanfaat :)