Search This Blog

25.5.12

0 CSS RELATED POST WIDGET.

relatedposts.jpgIn one of my previous posts,I gave out a site to add the "Related post widget" to your blog,but for those who might prefer to embed the codes into their template,this is a nice way of doing that.

HOW TO ADD THE WIDGET ON YOUR BLOG.

First,login to your Blogger Account.
Go to Design/Layout»»Edit HTML.[Backup your template in case something goes wrong.]
Check the box next to
Expand Widget Template and search for </head>by pressing CTRL+F.

On getting that,just copy/paste the code below directly before/above it.

<!--Related Posts with thumbnails 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="http://farm8.staticflickr.com/7104/7267555714_285261d73d_t.jpg";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://helplogger.googlecode.com/svn/trunk/related-posts-with-thumbnails-for-blogger.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails End-->

NOTE»
When a post has no image,a default image is shown.To change the picture,get the address of an image,then change it with the url in red above.
Likewise,to change number of posts,replace 5 in the code above.

Next,search for either of these codes

<div class='post-footer-line post-footer-line-1'>

Can't find that?,search for this instead.

<p class='post-footer-line post-footer-line-1'>

On getting any of those two,copy/paste the code below directly after it.

<!-- Related Posts with Thumbnails Start-->
<!-- 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=5&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='http://freebie-planet.blogspot.com'>Home of internet freebies.</a>
</b:if></b:if>
<!-- Related Posts with Thumbnails End-->

CHANGE 5 ABOVE TO THE NUMBER OF POSTS YOU WANT SHOWN.

Now most importantly,save your template,and that's it.
Adapted from HELPLOGGER!!!.

«PREVIOUS NEXT» ¤HOME¤

Be the first to reply!

Leave your comments behind!!

If you experienced any difficulty understanding this post,do tell us. But,please do not spam.
Your suggestions are also very valuable to us. Thanks...
The Author.

Leave your comments.

If you need reply to your comments,please do not comment as `Anonymous`
Found a Dead or Unresponsive link?, Kindly inform us using the Comment Box.

 
[GET THIS]