How To Add Related Posts Widget With Thumbnails To Blogger !!

How To Add Related Posts Widget With Thumbnails To Blogger !!

Posted by Unknown on 0

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.
 

• 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

<!--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/AVvXsEhMFItJpKQsk5uLY2jaMzUJm_ZaANNCqLlVHajWB_ogAvrv2Gfwz4JTk-GGWpfi8cHHGOlfzt6g2kWFV6YGPDYjATr9VmzZsQu_9lVa1-LqY_Rmkeq0_wggS0JqrgMc58SvxG_y5OfVMe8Z/s1600/no_image.jpg&quot;; var maxresults=4; 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-->

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'>

<!-- 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=4&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://thatsblogging.blogspot.com'><img alt='Blogger Tricks' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg38BP29csO0kTjEgF149kXHX8dnxp_9KOLXLGwBg2pJXb27rkQEh_C7-k6lPwRa0xO4JIpd6eEcVdotyaZmpS_wBbanIjonG515SXv2UVNd0bRHFd2QpSk2_bxxTdkP1s5DKQHBhUMHydv/s1600/best+blogger+tips.png'/></a> </b:if></b:if> <!-- Related Posts with Thumbnails Code End-->

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 ..