How To Add Related Posts Widget With Thumbnails To Blogger

Time to boost your blog page-views,here is incredible hack via which you can show the related posts to blog article below every Blog post,along with beautiful thumbnails.The data for related posts are fetched from Blog Labels and different posts.Applying this hack will help you to host your visitors with great luxury,as a result he will remain long time on your blog seeing different interesting related articles.

Live Demo

How To Add Related Posts Widget With Thumbnails To Blogger

Go To Blogger Dashboard
Click On template and Then Click On edit HTML
Now Search for </head> Tag
Now Copy the below script and paste it above </head> Tag

<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: 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlhHb5s47W7FrsTiDUi9ZHZEaP15cbt_fBb7t9sn6Qm2QtjGorQXeYye90-w545Mgcm62B3rjR-NVKn4EWdEhIOpeWZTXTP1IaMvpq7FNzIfud6fZk22gJLg0WSghsa8DcGluGgk7RHzK3/s1600/no_image.jpg"; var maxresults=4; var splittercolor="#DDDDDD"; var relatedpoststitle="Related Posts"; </script> <script src='http://helplogger.googlecode.com/svn/trunk/related-posts-with-big-thumbnails.js' type='text/javascript'/> </b:if>

Note :-
- If you want to change the Default Picture to your own or any other picture,then simply replace the Green URL With your Own image URL.
-For Displaying more than 4 posts in the widget then change the value of 4 in the script to desired no of posts.
-If you want to display this widget also in Home Page then remove the Blue script from the above script

Now Search for The below Script (Note The Below mentioned Code is 2 times in magazine style Blogger Templates so do paste the below Code after each.)

<div class='post-footer'>

Now Copy the below script and paste it above <div class='post-footer'>

<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=4"' type='text/javascript'/></b:loop> <script type='text/javascript'> removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs("<data:post.url/>"); </script> </div><div style='clear:both'/> </b:if> <b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'> <a href='http://thatsblogging.blogspot.com'><img alt='Blogger Tricks' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-hDRv6Lsst8XkAmmoHCjp3Uf-nRHgJ47RW7PaBjtH4qC7HIhIG010gejdnmHaguOx-URs1OclIxKnsqCbb1wVXTmX67SSG0YTl37LDhxO1PNbcBsn8XlIrvlXwiMssVVqaQ4-onUPB67a/s1600/best+blogger+tips.png'/></a> </b:if></b:if>

Note:-
-For Displaying more than 4 posts in the widget then change the value of 4 in the script to desired no of posts.
-If you want to display this widget also in Home Page then remove the Blue script from the above script.

Now just hit save template and that's it

So What's Up

Adding Related Posts Widget With Thumbnails To Blogger will help you to boost your Blog page-views,actually this post is originally written by HelpLogger,So Script Credit Goes to HelpLogger.If you have any question related this article,must pass comments.Stay Blessed,Happy Blogging.