Related Post widget with Thumbnail

Hope you might be seen  Related Post widget beneath every Post in blogs.It helps us to get more page vieww and navigate readers to get into deeper posts.
I Suggest you to add this feature in your Blog.It Need Less space and Nice Thumbnail attract your reader.

How to Add Related Post Widget                                                                                 

  • Go to Design >> Edit HTML
  • Search for,
  • <Head>
  • Copy the Below Code and Paste it after to <head>
  • </script> <! --> <!--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=&quot;;; var maxresults=4; var splittercolor=&quot;#d4eaf2&quot;; var relatedpoststitle=&quot;Related Posts&quot;; </script> <script src='' type='text/javascript'/> <!-- remove --></b:if> <!--Related Posts with thumbnails Scripts and Styles End-->
  • Search for, <data:post.body>
  • <data:post.body>
  • Now Copy the Below code and pate after to it.
  • <b:if cond='data:blog.pageType != &quot;item&quot;'> <div expr:id='&quot;summary&quot; +'><data:post.body/></div> <script type='text/javascript'>createSummaryAndThumb(&quot;summary<>&quot;); </script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'>read more</a></span> </b:if>
  • Save the Template !Done!

By : Sooji


Post a Comment