Related Post Awesome Widget With Hover Effect For Blogger

why to add  related post widget

If you have not add related post widget in
your blog , you should add this help user
you communicate with your blog easy and 
increase your page views and so that if you have
put any ads in your blog you get more page views.
so this is very useful thing for blogger. you can 
add some effects and action also , too much
effect make your  blog heavy and it is not good.
it is advised that use simple and to the point.

this is how your  related post widget looks in your
blog . it is very simple to add in blogger.

how to add blogger related post widget

blogger let you to add related post widget
in template.

step1: fist login to blogger and select your blog

and then go to template and edit html  

step2 : click any where inside template code area press

 ctrl+f and search box appear search.

Search this code

</head>

step3 Paste the below code above </head>

<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts{float:left;width:auto;}
#related-posts a{border-right: 1px dotted #eaeaea;}
#related-posts a:hover{background: #EEEEEE;}
#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:2px solid #f2f2f2;object-fit: cover;width:110px;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;-webkit-border-radius: 5px;  -moz-border-radius: 5px; border-radius: 5px; }
#related-title {color:#666;text-align:center;padding: 0px 5px 10px;font-size:12px;width:110px; height: 40px;}
#related-posts .related_img:hover{border:2px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style>
<script type='text/javascript' src='http://helplogger.googlecode.com/svn/trunk/relatedposts.js' />
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

Find this code 

<b:includable id='postQuickEdit' var='post'>

step 4 paste the below code above </b:includable>

<!-- Related Posts with Thumbnails Code Start-->
<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=5&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=4;
var relatedpoststitle=&quot;<b>You might also like:</b>&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/><div style="font-size: 9px;float: right; margin: 5px;"><a  style="font-size: 9px; text-decoration: none;" href="http://5gblogger.blogspot.com/2015/02/related-post-thumbnail-widget-blogger.html" Related Posts Widget</a></div>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

save the template and enjoy beautiful widget.

To change the widget of thumbnail change width and height in the code under step3.
To change number of post shown change 4 to your number in the code under step4.