Add related post widget To blogger blog with Thumbnail

[vc_row][vc_column width=”1/1″]

Now I’m share here a wonderful hack to display related post beneath each of your blog post,along with thumbnail,it’s very important to add this related post gadget to your blog, because it will increase your site page viewed without spending time on SEO,so if you are going to build most page viewed to your blog then you have to add this gadget to your blog,it will create great positive response to your traffic and page viewed  the related article chosen from other post with same category like label,tag etc with this hack many of reader will  remain on your site for longer period of time when they relate post are interested for them .

Related Post widget with thumbnails

To add this follow these steps

Go blogger dashboard>>Template>>Edit html and find the below code to find press CTR+F

 </head>

  • Copy the below code and past it above/before the </head>

<b:if cond=’data:blog.pageType == “item”‘><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=”http://3.bp.blogspot.com/-PpjfsStySz0/UF91FE7rxfI/AAAAAAAACl8/092MmUHSFQ0/s1600/no_image.jpg”; var maxresults=5; var splittercolor=”#DDDDDD”; var relatedpoststitle=”Related Posts”; </script><script src=’https://googledrive.com/host/0B-koCsA6FhQKX05pV3V5eU9fRFU’ type=’text/javascript’/></b:if>

  • Now Find the

<div class=’post-footer’>

  • Now copy the below code and past it above/before the <div class=’post-footer’>

<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;’/><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=8&quot;’ type=’text/javascript’/></b:loop><script type=’text/javascript’>removeRelatedDuplicates_thumbsundefined); printRelatedLabels_thumbsundefined&quot;<data:post.url/>&quot;); </script></div>
<div style=’clear:both’/>
</b:if>

  • Finally save the template you are done

[/vc_column][/vc_row]

Leave a Reply

Your email address will not be published. Required fields are marked *