Simple Related Posts Widget For Blogger With Thumbnails

Here we provide Simple Related Posts Widget for Blogger with Thumbnails for your blog post. Related posts widget shows other posts in same category or label. With the help of related post widget you can increase your blog page views and attract your readers to give related posts for spend more time. It’s help to increase visitor time periods of your website. If you need this related post widget you need to create some changes in your Template.

How to Add Related Posts Widget

You can easily add related posts widget with follow below steps:

Step 1

Go to your blogger Dashboard > Template > Edit HTML as shown in below picture.

 

Step 2

Click on the "Expand widgets template" as shown in below picture.

Step 3

Search below code with the help of CTRL + F

</head>

Step 4

Copy below code and Paste it just before </head>

<!--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/AVvXsEhUSoxkITSBY_FDUK-czofXxIauGoy8-qPPewBrzILXnRbDxGmM0IJ0Nd_EJT5GSjtRvVUWDqHJiWK0xkncKugFj4AhCYEpgO6KSH4ILZ4_UITbuCXOEGoUhS23CkfhDw_4HmLubORR92R8/s1600/no_image.jpg&quot;;var maxresults=5;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-->

You can changed your default picture, Just changed red URL with your new default Picture URL. You can also changed number of post, just changed 5 to your values that you want to show. If you also want to show related post on homepage then just removed Green colored codes.

Step 5

Now Search following code:

<div class='post-footer'>

Step 6

Copy and paste below code just above it:

<!-- 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><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.haakblog.com'><img alt='Blogger Tricks' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPsGr_TE0PjUI-MeggEOrsJ1yGTqZYgIRwPWGV7yH3WjkWQXTsRArWemHHncOOwwHylukjpDhSSfmuHsPGjNYf3hcVsa3WpBq1eWCwi-_BcWny5s9lKmlU2YiEuHm_EUEaRwfkfjb_B1mo/s1600/best+blogger+tips.png'/></a></b:if></b:if><div id="rpdr" style="font-family: arial, sans-serif; font-size: 9px;"><a href="http://www.haakblog.com/2013/06/simple-related-posts-widget-for-blogger-with-thumbnails.html" target="_blank" title="Related Posts Widget">Related Posts Widget</a><a href="http://www.haakblog.com/" target="_blank" title="Blogger Widget">Blogger Widget</a></div><!-- Related Posts with Thumbnails Code End-->

Step 7

Save Template

You're done perfectly. Now refreshed your blog post to see related post with thumbnail in your blog post, it's look like as shown in below picture.