Easily create a professional website by blogger(part-4)add your blog related post widget with thumbnail

Welcome to 4th part of Easily create a professional website by blogger.do you know what is related post.when a visitor visit your website they will see related post bellow end of post.its increase your website pageview and vijitor stay your blog long time.

 

add your blog related  post widget with thumbnail

How To Add Related Posts Widget To Blogger with Thumbnails,Auto Read More with thumbnail for Blogger/Blogspot Posts,Related Posts Widget Without Thumbnails for Blogspot Blog,How to Add Related Posts Below Every Post on Blogger,How to Add Related Post Widget with Thumbnails on Blogger,How To Add Related Posts with Thumbnails in Blogger Post,How to Display Related Articles Below Posts in Blogger,How To Add Related Posts Widget To Blogger with Thumbnails

how do add related post widget on blogger:

fristly login in your blog and then go template.backup your template and click edit html.now searce </head> by pressing ctrl+f

now paste bellow code just above </head> it

<!--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-->

Customization:if you want change image height 100px as your wish  এবং for width change 110px

more post for you: Easily advertise your website or earn form your website 

Easily Earn by Android phone with payment proof  

full earning tutorial by showing ad on your blog or website 

Now searce <div class='post-footer'>  it you can find many time.you should try the second

Now paste the bellow code.just above <div class='post-footer'>

<!-- 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=5;

var relatedpoststitle=&quot;<b>Related Posts:</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://bdtipstech.blogspot.com/2016/01/create-website-part-4.html" rel="dofollow" >Related Posts Widget</a></div>

</b:if>

<!-- Related Posts with Thumbnails Code End-->

customization: if you want change number of related post showing bellow post you can change max-results=5and  maxresults=5 as you wish.

Hope,all you relize how to add related post on blogger.please don,t forget share and leave a Comment if think it,s realy helplfull.thanks.