Sunday, 12 August 2012

How To Install Thumb Style related post widget To Blogger

Hello friends related post is very important for every blogger so i give you thumbnail related post widget with new style add this widget and enjoy with your blog and do everyday blogging.


Follow simple step to add this related post widget in your blogger blog---->>>>

* First go to your blogger dashboard.

* Now click in design tab and edit HTML now.

* Click in small box to expand your blogger template now.

* Find this code </head> by CTRL+F Key .

* Now copy below code and paste before </head>


 <!--Related Posts with thumbnails by www.blogger9.com-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
float:center;
height:100%;
min-height:100%;
padding-top:10px;
padding-left:15px;
padding-right:15px;
}

#related-posts h2{
font-size: 1.3em;
color: black;
font-family: Arial;
margin-bottom: 0.75em;
}

#related-posts a{
color:black;
}

#related-posts a:hover {
background-color:#eeeeee;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs9hHt4ropU7fQaWG-UVlY0qIGbOTiWQDcbZr0FCVmlEa1Z-L1DD-re53wLdKomLH2635ABhyphenhyphenTHZHSX3-zdM0WtiFe0FMZY_ilr8B2a3oUzKK-enpaWiyMZp4M_SaP0NtYQO4CsyUjB44u//";
var maxresults=5;
var splittercolor="#cccccc";
var relatedpoststitle="YOU MAY ALSO LIKE BELOW TIPS";
</script>

</b:if>
<!--Related Posts with thumbnails by www.blogger9.com-->


* Again search this code <p class='post-footer-line post-footer-line-1'/> or as Post footer line code.

* Copy below code and paste below code after above code now .

<!-- Related Posts with Thumbnails Code by www.Blogger9.com-->
<!-- remove --><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=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<!-- Related Posts with Thumbnails Code by www.Blogger9.com-->

* Now save your blogger template now and you are done .

No comments: