Welcome to 4th part of Easily create a professional website by blogger.do you know what is related post.when a vijitor vijit 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 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 == "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-->
Customization:if you want change image height 100px as your wish এবং for width change 110px
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 == "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=5;
var relatedpoststitle="<b>Related Posts:</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://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.
keyword:
ব্লগে
যুক্ত স্টাইলিশ রিলেটেড পোস্ট উইগেট,কিভাবে ব্লগে রিলেটেড পোস্ট যুক্ত করবেন,ব্লগে
যুক্ত করুন আকর্ষনীয় রিলেটেড পোস্ট উইগেট,খুব সহজে ব্লগে যুক্ত করুন করুন ছবি সহ রিলেটেড পোস্ট,how wonderfull related post blogger,add
related post widget with thumbnail,how
to add related post widget to blogger, add your blog related post widget
with thumbnail
