Hari ini amir ingin berkongsi satu tutorial cara membuat widget post yang berkaitan dalam blogger dengan thumbnail. Widget ini akan memaparkan tajuk dengan gambar yang pertama dalam artikal atau entry anda. Jika dalam artikal anda tiada gambar akan memaparkan gambar default. gambar default ini anda boleh mengantikan dengan gambar yang anda sukai.

Ok, Jom ikuti tutorial dibawah ☺

1.Login blogger > Templete > Edit HTML > Ctrl + A (untuk select semua) > Ctrl + C( untuk copy semua)

2.Setelah selesai copy pergi ke laman web ini dan pastekan dalam laman web ini

3. Ctrl + F untuk mencari

</ Head>

dan dibawah  </ Head> pastekan kod dibawah

<!--Related Posts with thumbnails Scripts and Styles Start--> <!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'> <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: 18px; letter-spacing: 2px; font-weight: bold; text-transform: none; color: #5D5D5D; font-family: Arial Narrow; margin-bottom: 0.75em; margin-top: 0em; padding-top: 0em; } #related-posts a{ border-right: 1px dotted #DDDDDD; color:#5D5D5D; } #related-posts a:hover{ color:black; background-color:#EDEDEF; } </style> <script type='text/javascript'> var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3QedmqNlhSZFI6OfMZJn-FRUkbVw56Qk3sbcq94fWl9lSHyrpTl19m_qnjxSD2yDgZp60V_V8xRlDMwcgz789aNCF9sPyWnrychOAO64Svavr-aOOTzJCYj_njG7BBqbo_V5KVRBfJra2/s1600/no_image.jpg&quot;; var maxresults=5; var splittercolor=&quot;#DDDDDD&quot;; var relatedpoststitle=&quot;Related Posts&quot;; </script> <script src='http://helplogger.googlecode.com/svn/trunk/related-posts-with-big-thumbnails.js' type='text/javascript'/> <!-- remove --></b:if> <!--Related Posts with thumbnails Scripts and Styles End--> </head>

4. Untuk ubah default image  anda boleh ubah tulisan warna hijau tersebut dan letakkan URL gambar yang anda ingin letakkan.. kalau tak nak tukar tak apa. ☺

5. Untuk mengubah tajuk "Related Posts" anda boleh tukar tulisan warna unggu dengan teks yang anda inginkan.

var relatedpoststitle=&quot;Related Posts&quot;;

6. sekarang cara kod ini pula

<div class='post-footer'>

7. Copy code dibawah dan paste dibawah kod <div class='post-footer'>

<!-- Related Posts with Thumbnails Code Start--> <!-- remove --><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> <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=6&quot;' type='text/javascript'/></b:loop> <script type='text/javascript'> removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;); </script> </div><div style='clear:both'/> <!-- remove --></b:if> <b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'> <a href='http://www.helpfulbloggertips.com/'><img alt='Helpful Blogger Tips' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwNm4ITldVJXwSKe34O6aAzxUuClr4IpJDhgq8tov6dLZO6xl6lmIS_ZdsI3kCPUjuSfsZGiIx6lEkOHVSPgVcAXYj7NMjftOcHF8JX-7lKEqRrH79xJb3LukDWIaXkKUWMO0R4WSOjLuJ/s1600/best+blogger+tips.png'/></a> </b:if></b:if> <!-- Related Posts with Thumbnails Code End-->

8. untuk edit bilangan related post yang dipaparkan setiap artikal anda, anda hanya edit  max-results=6 dan letakkan nombor yang anda inginkan.

9. kamu juga boleh memaparkan related post pada home page anda dengan membuang kod berwarna biru.

10. sekarang semua selesai, anda mestilah copy semua kod html yang anda paste dalam laman web edit html.

11. Dan paste kembali kod tadi dalam Templete > Edit HTML

12. selesai.

P/s: jika anda tidak faham @ tidak berjaya sila komen dibawah.. insyaAllah amir akan bantu. ☺

P/s: sebenarnya ada cara lebih mudah untuk membuat related post anda boleh daftar di LinkWithin ataupun Nrelate anda hanya perlu tekan install sahaja dalam blog. semua proses dilakukan secara automatik.