[Update] Related Post Awesome Widget With Hover Effect For Blogger
why to add related post widget
If you have not add related post widget inyour 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.
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
step3 Paste the below code above </head>
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 == "item"'>
<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
step 4 paste the below code above </b:includable>
<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 == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=5"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=4;
var relatedpoststitle="<b>You might also like:</b>";
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://mx-machine.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.