Saturday, 20 July 2013

Related Posts: Add Own Created Related Posts Widget With Thumbnail

Related Posts: Add Own Created Related Posts Widget With Thumbnail
السلام عليكم
Today's topic is very interesting that how to add related posts widget with thumbnail to blog, this is a very important widget of a blog. You saw related posts widget on many blogs and also on my blog. There are many sites who provided you related posts widget but I created this related posts widget with my own.


  • You Might Also Like:
 Fade-in read more in JavaScript.
Blogger templates: Top 5 blogger templates for free.
 Which template can I use for my blog?

Adding Related Posts Widget To Blog.

  • Go to your blog dashboard.
  • Go to template >> edit HTML.
  • Now paste the below code just above </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{
margin: 10px 0px!important;
padding: 15px 15px!important;
font-family: Helvetica,Arial,sans-serif;
font-size: 16px;
color: white;
font-weight: 700;
line-height: 14px;
text-transform: capitalize;
background: #2B3338;
border: 2px solid #2C3336;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
box-shadow: 0px 2px 4px #666;

}
 

#related-posts a{
border-right: 1px dotted #DDDDDD;
color:#5D5D5D;
}
#related-posts a:hover{
color:black;
background-color:#EDEDEF;
}
</style>
<script type='text/javascript'>
var defaultnoimage=&quot;http://3.bp.blogspot.com/-PpjfsStySz0/UF91FE7rxfI/AAAAAAAACl8/092MmUHSFQ0/s1600/no_image.jpg&quot;;
var maxresults=5;
var splittercolor=&quot;#DDDDDD&quot;;
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script src='http://yourjavascript.com/82176150534/obt-related-post-widget.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

Customization:

 If you want to change related posts results just change the value of var maxresults=5; with your choice results.

  • Now find:
<data:post.body/>
 OR!!!

<div class='post-footer-line post-footer-line-1'>
  • Now paste the below code just above the following code.

<!-- Related Posts with Thumbnails Code 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=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'>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->
  • Click to save template.
  • Now go to your blog post and you will find there related posts widget.

Last Words:

Hope you like this related posts widget and if you face any problem in adding this related posts widget so feel free to contact us.

Do you Like this Article?

rss twitter facebook
Subscribe us and get daily updates directly to your email inbox.
We will not share you email with anyone so you don't have to worry.

No comments:

Post a Comment

Subscribe this blog and get daily this blog articles to your email.