How Add Stylish New Related Posts Thumbnails Widget for Blogger

PUT YOUR PARSED ADSENSE CODE HERE

We discussed, how add awesome new stylish related Post widget For Every blogger. it will look Very Gorgeous. you can increase your blogger traffic using this widget in blogger and it will be more helpful every new reader. so decide to discuss this widget for newbies. hope You like And Enjoy After installing This Widget.

How Add Stylish New Related Posts Thumbnails Widget for Blogger

How to Add This Widget in My Blogger Blog?

• Go To Blogger >> Dashboard
• Click On  >> Template
• Now Click On >>  Edit HTML>>Proceed.
• Check the "Expand widgets template"
• Now Find Using Ctrl+F ]]></b:skin>
• And Then Paste Below Code Above ]]></b:skin>

#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 18px;
letter-spacing: 2px;
font-weight: bold;
text-transform: none;
color: #5D5D5D;
font-family: Arial Narrow;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
border-right: 1px dotted #DDDDDD;
color:#5D5D5D;
}
#related-posts a:hover{
color:black;
background-color:#EDEDEF;
}

• Now Find </head> And Paste Below Code Above it

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJsyGzzd8Mcn12_U5AzGqM9hYvdv8ds1KQifU5Ogt8nJhtGP2ak980gJWXR9rt-YFpGBLz0qrrFZf3fc10IeyJ2ko4ZKpRy-mMLmKTEQ6FBIfEacUQbASwC78eV-ZEK_kK7QHnXslbo9UC/s1600/no_image.jpg&quot;;
var maxresults=5;
var splittercolor=&quot;#DDDDDD&quot;;
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script type="text/javascript" src="http://yourjavascript.com/233021883/www.mybloggerblog.com.js"></script>
</b:if>

• Now Find  <div class='post-footer'>
• And just above it, copy and paste the below code

<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>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='www.mybloggerblog.com'></a>
</b:if></b:if>

Finally After Code Just Click On Save Template Button.

Settings:

If You Feel Like To Specify Number Of Related Posts To Display As Related Post In Your Blog Then Simply Find The Code Var Maxresults=5; From The Java-Script Part And Replace 5 With The Number You Want.

If You Face Any Difficulty Feel Free To Ask.
All Coding Credit goes to My blogger Blog.

Do you Like this story..?

Get Free Email Updates Daily!	Follow us!