Related Post Awesome Widget With Hover Effect For Blogger

why to add together related post widget

If yous convey non add together related post widget in
your weblog , yous should add together this assist user
you communicate amongst your weblog slow and
increase your page views together with therefore that if yous have
put whatever ads inward your weblog yous larn to a greater extent than page views.
so this is really useful affair for blogger. yous can
add around effects together with activity also , equally good much
effect brand your blog heavy together with it is non good.
it is advised that purpose uncomplicated together with to the point.

this is how your related post widget looks inward your
blog . it is really uncomplicated to add together inward blogger.

how to add together blogger related post widget

blogger allow yous to add together related post widget
in template.

step1: fist login to blogger together with choose your blog

and therefore larn to template together with edit html

step2 : click whatever where inside template code area press

ctrl+f together with search box appear search.

Search this code

</head>

step3 Paste the below code above </head>

<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 enterprise #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 enterprise #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>

Find this code

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

step 4 glue the below code higher upward </b:includable>

<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 mightiness 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=" " Related Posts Widget</a></div>
</b:if>

save the template together with savour beautiful widget.

To modify the widget of thumbnail modify width together with tiptop inward the code nether step3.
To modify let on of post shown modify four to your let on inward the code nether step4.