Related Post Widget With Thumbnail

To increase your page views you must use related post with thumbnail. As thumbnail show a related image of the post in your widget. Thus an image increases the views of your post. For displaying an thumbnail their must be an image in your post. Adding image to your post will give the article a boost.

Here is a screenshot of the Related Post Widget With Thumbnail:

So now i am gonna show you  how to install this beautiful widget:

• First of all login to to your dash board. Go to Design>Edit HTML and save your template. After this click "Expand Widget Template".
• Press "ctrl+f" and find </head> Replace this with

  
  
  <!--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: 1.6em;
  font-weight: bold;
  color: black;
  font-family: Georgia, &#8220;Times New Roman&#8221;, 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/AVvXsEhOzJQRODmDRrcPDE2BOq8h3QDymqQfvu6byKeM2BieinQ3txGkREanr3oM40cRYMishOz2Hwq85xwhKPNSlO4n1P8vChPSqi0mtjCAhRR7NUhujsQUfPCklhBDFOICjBAVQNJlQCbCPP8/s400/noimage.png";
  var maxresults=5;
  var splittercolor="#d4eaf2";
  var relatedpoststitle="Related Posts";
  </script>
  <script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
  <!-- remove --></b:if>
  <!--Related Posts with thumbnails Scripts and Styles End-->
  </head>
  
  
  
  

• Now find <data:post.body/> or <div class='post-footer-line post-footer-line-1'> If you not found above try this  <p class='post-footer-line post-footer-line-1'> Now after any of these line paste the following code:

  <!-- 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><ahref=http://www.trickndtips.blogspot.com></a><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-->

•  You can add maximum number of related post by editing this line var maxresults=5;
• To edit title of the widget var relatedposttitle="Related Posts";
• To change default thumbnail edit this line

  var defaultnoimage="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/

  yL95WlyTqr0/s400/noimage.png";

• Save Your template and you are done with your RELATED POST WIDGET WITH THUMBNAIL.

If you like our post, Than make a small donation to Tips N Tricks.

Make a donation to Tips N Tricks

It will Help us to maintain this blog.

Subscribe via Email

Enter your email address to get Latest Information

Delivered by FeedBurner

Follow @leadingdynasty