Saturday, April 7, 2012

This Widget Very Helpfull And Usefull For  Icrease Your Blog Page View.
visitors will be inclined to go for the related content when they are provided wonderfully with thumbnails.
Let s See How To Add in Your Blogger Blod Template ?
Just Follow Me......



Sign in Blogger Account
Click " Template "
 Click on " Edit Html "
Click " Proceed "
Check on " Expand Widget Templates "
Now Press " Ctrl + F " & Search
                                     </Head>
Past This Code Before " </Head>  " Tag
<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts  a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDDGQSIgAAU7YrMwqzbq6S6T7WvYsGOcyFOo-Cm7vNv2KXmjKiSGspZCfT52UCaKEareRiuDDErlQDoMdhh42pUzdXNDlpAYlrI1vwAt8BCdj4-LGbZqk9LEJwp1vZ4xveJtVICf4kkwQ/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://best2know.googlecode.com/files/related-posts-with-thumbnails-for-blogger.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

 Save Template ....

Now Search
                     <data:post.body/>

Past This Code After "  <data:post.body/>  "

<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><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&amp;callback=related_results_labels_thumbs&amp;max-results=6"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div><div style='clear:both'/>
<br/>
<a href="http://atif980.blogspot.com" target="_blank"><b>More Gadgets</b></a>
<!-- remove --></b:if>
<!-- Related Posts with Thumbnails Code End-->
Save Template ....... Mission Complete........ Vist & See Result

Some Changes ( If You Want )
 Adjust The Maximum Number of Related Posts (  Edit This Line in Code One )

                         var maxresults=5;

 Edit or Change Title ( Edit This Line in Code One )

                      var relatedpoststitle="Related Posts";

 Edit or Change Default Thumbnail ( Edit This Line in Code One )

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDDGQSIgAAU7YrMwqzbq6S6T7WvYsGOcyFOo-Cm7vNv2KXmjKiSGspZCfT52UCaKEareRiuDDErlQDoMdhh42pUzdXNDlpAYlrI1vwAt8BCdj4-LGbZqk9LEJwp1vZ4xveJtVICf4kkwQ/s400/noimage.png

Change Colour of the Splitter ( Edit This Line in Code One )

                   var splittercolor="#d4eaf2";

If You Want ...... Show on Top of The Post
Search  " <div class='post-header-line-1'/>  "
Past Code Two After<div class='post-header-line-1'/>  Save Template 

See Video Tutorial 

1 comment: