Blogging Tricks: How To Add Related Posts Widget To Blogger with Thumbnails

Adding a related post widget to your blog is very essential for you to increase page views and the amount of time visitors spend on your time. the time spent on your blog matters a lot, it can help your alexa ranking and it can also help you to make real cash online especially when you are running CPM (cost per impression) ads on your blog.
This trick am about to show you will help you add related posts beneath each of your blog posts, along with thumbnails. The related articles are chosen from other posts in that same category/label/tag. With this trick many of your readers will remain on your site for longer periods of time when they see related posts of interest. this trick is for blogger blogs for now.
 How To Add The Related Post Widget:
Step 1: login to blogger, then go to your dashboard when you get to your dashboard, click on template then click on EDIT HTML. ( GET MILLIONS OF TARGETED TRAFFIC FREE!  )
Step 2: Find this code by pressing control F inside the blogger html code: </head>
Step 3: copy the code below and paste it just above the code you searched for earlier on ( </head> )

LEARN HOW TO MAKE HUGE PROFIT FROM BLOGGING  HERE!


<!--Related Posts with thumbnails Scripts and Styles Start-->
 <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:4px solid #f2f2f2;width:100px;height:100px;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:#222;text-align:center;padding: 0 10px;font-size:14px Oswald; line-height:16px;text-shadow:0 2px 2px #fff;height:28px;width:100px;} #related-posts .related_img:hover{border:4px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style> <script type='text/javascript' src='http://natolistic.googlecode.com/svn/trunk/relatedposts.js' /> <!--Related Posts with thumbnails Scripts and Styles End-->

LET SOFTWARES DO YOUR BLOGGING WORK FOR YOU!

Step 4: Next, try and find this code, though you have to find it twice, control F, then this code:  <div class='post-footer'> (when you paste the code in the search space, hit enter two times to get the expected result)

Step 5: Copy the code below and paste it above the code you just searched for.

<!-- Related Posts with Thumbnails Code Start--> <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'> var currentposturl=&quot;<data:post.url/>&quot;; var maxresults=4; var relatedpoststitle=&quot;<b>Related Posts:</b>&quot;; removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(); </script> </div><div class='clear'/> <b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'> <a href='http://www.natolistic.com'><img alt='Blogger Tricks' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs60-WulZ5VIlCpz54Qu4xYxC-Vwnny5JV4qIyHRos3Q39nNAd5HiuOmI50S8MKo3E8agJVCbCAfZxDA1_mNZHd-McZkR7dUqKvcICHCZDcwIg-DINxrpjYrLv6tzsCDYGOTHmGWaii3AL/s1600/best+blogger+tips.png'/></a> </b:if></b:if><!-- Related Posts with Thumbnails Code End-->
you can change the maximum result to anything of your choice depending on how many post you want displayed.
Step 6: Save the template and enjoy your blog, keep your readers attention glued to your blog post all the time. GET MILLIONS OF HANDWRITTEN ARTICLES ON ALL NICHES NOW!