Cara membuat artikel terkait /related post tampilan gambar degan mudah pada blog

Cara mudah membuat artikel terkait /related post  dengan tampilan gambar  pada blog, artikel terkait atau releted post memang sangat diperlukan dalam meningkatkan rating sebuah blog, sebab dengan adanya artikel terkait dapat mengarahkan pengunjung blog membaca artikel artikel yang terkait dalam blog sehingga pembaca akan lebih lama lagi berada dalam blog kita.  Biasanya para newbi / pemula sangat ingin tahu bagaimana cara memasang artikel terkait / related post dengan gambar atau pun tanpa tampilan gambar. Namun tidak perlu bingung sebab disini saya akan memberitahu cara mudah membuat artikel terkait / related post dengan tampilan gambar  pada blog.
Caranya sangat mudah yaitu dengan mengikuti setiap arahan yang saya buat.

• Log in ke akun blog  anda 
• Masuk kedasbor kemudian pilih Template
• Kemudian Pilih Edit HTML
• Sebaiknya sebelum anda mengutak atik template anda ada baiknya anda memback up terlebih dahulu template anda.
• cari dan temukan code </head> , untuk lebih mudah menemukan kode tersebut gunakan Ctrl + F pada kotak template anda.

• setelah itu  copy kode dibawah ini dan pastekan code dibawah ini tepat di atas kode </head>

<!--Related Posts with thumbnails Start--> <b:if cond='data:blog.pageType == &quot;item&quot;'> <style type='text/css'> #related-posts{float:left;width:auto;} #related-posts a{border-right: 1px dotted #eaeaea;} #related-posts a:hover{background: #f2f2f2;} #related-posts h2{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;} #related-posts .related_img {margin:5px;border:2px solid #f2f2f2;width:90px;height:75px;transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;} #related-title {color:#0033cc;text-align:center;padding: 0 5px;font-size:12px Arial; line-height:16px;text-shadow:0 2px 2px #fff;height:28px;width:100px;} #related-posts .related_img:hover{border:2px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style> <script type='text/javascript' src='http://helplogger.googlecode.com/svn/trunk/relatedposts.js' /> </b:if> <!--Related Posts with thumbnails End-->

kode yang berwarna biru merupakan ukuran dari gambar yang akan ditampilkan dalam artikel terkait / related post ,ukuran tersebut bisa anda ubah sesuai dengan keinginan anda. misalnya Width (panjang gambar) 100 px , dan height(tinggi gambar ) 80 px.

• Langkah berikutnya yaitu cari kode <div class='post-footer'> pada template anda. (untuk memudahkan gunakan CTRL + F )

Biasanya akan ada lebih dari satu kode <div class='post-footer'> pilihlah yang terakhir. Lalu copy 

kode dibawah ini kemudian paste kan tepat di atas kode <div class='post-footer'>

<!-- Related Posts with Thumbnails Code Start--> <b:if cond='data:blog.pageType == &quot;item&quot;'><div id='related-posts'><b:loop values='data:post.labels' var='label'> <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_thumbs&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> <script type='text/javascript'> var currentposturl=&quot;<data:post.url/>&quot;; var maxresults=10; var relatedpoststitle=&quot;<b>Related Posts:</b>&quot;; removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(); </script> </div><div class='clear'/> </b:if> <!-- Related Posts with Thumbnails Code End-->

Kode yang berwarna merah merupakan jumlah dari artikle terkait/related post yang ingin anda tampilkan, jumlah tersebut bisa anda ubah sesuai keinginan anda.

Selanjutnya klik save template dan lihat lah hasilnya.

Sekian tutorial dari saya mengenai cara  membuat artikel terkait / related post tampilan gambar  gambar degan mudah pada blog. Selamat mencoba ,semoga bermanfaat.