Membuat Related Post Keren Dengan Thumbnail

Membuat Related Post Keren Dengan Thumbnail -

Assalamu Alaikum Wr. Wb. Semoga para Sahabat selalu dalam lindungan Allah SWT dan sukses selalu serta tetap semangat. Amiinnnn….

Pada artikel kali ini saya akan share mengenai cara membuat related post / artikel terkait dengan thumbnail yang diletakkan di bagian bawah postingan blog seperti pada gambar di bawah ini:

Sebelum kita mulai bagi Muslim jangan lupa baca

Ok langsung aja cara membuat related post dengan thumbnail di bawah postingan blog Sebagai berikut :

1.  Seperti biasa masuk ke akun blog anda 

2. Pilih rancangan 

3. Pilih edit HTML

4. Centang Expand Template Widget, Sebelum mengedit silahkan download dulu template anda untuk menjaga kalau – kalu dalam melakukan perubahan terjadi kesalahan (error)

5. Cari kode HTML ini </head>

6. Copy code ini dan pastekan sebelum / diatas kode </head> yang tadi

<!--Related Posts with thumbnails Scripts and Styles 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKuTXAZo4e3NLe_1f01rpJQRx2LtyRp3cEr7bRPdMSE1RnsCznrv6zQgNWVHHyKRoCzSxu0JSfBKzFB2wRVNOZCR1uZSlyreOm9nKpccmtwY9C2280KX-lBcjEIPyke8Le2IkEVFAAKWA/s400/noimage.png"; var maxresults=5; var splittercolor="#d4eaf2"; var relatedpoststitle="Related Posts"; </script> <script src='http://bloggergadgets.googlecode.com/files/related_posts_with_thumbnails_min.js' type='text/javascript'/> <!-- remove --></b:if> <!--Related Posts with thumbnails Scripts and Styles End-->

7. Kemudian cari lagi kode <div class='post-footer-line post-footer-line-1'> atau <p class='post-footer-line post-footer-line-1'>

8. Copy kode berikut Dibawah <div class='post-footer-line post-footer-line-1'> atau <p class='post-footer-line post-footer-line-1'>

<!-- 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> <b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'> <a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='http://bloggertemplates.bloggerplugins.org/' ><img style="border: 0" alt="Blogger Templates" src="http://image.bloggerplugins.org/blogger-templates.png" /></a> </b:if></b:if> <!-- Related Posts with Thumbnails Code End-->

9. Simpan / save, semoga bermanfaat

Special thanks to  www.bloggerplugins.org

`