Wednesday, April 17, 2013

How To Add Related Posts Widget To Blogger With Thumbnails

,
Related posts widget is a great widget to increase your post-views.You can add related posts just below of the every blog post.It also shows thumbnails to attract the users.This widget was designed by bloggerplugins. I customize this widget and brought to you.If you like this then surely add it on your blog.... 

How To Add It On Blogger
1. Go To Blogger Dashboard >Template >Edit HTML.
* Please! download  a copy of your template
2. Check the 'Expand widgets template' check box;
3. Now Search (CTRL + F) for this code: </head>
4. Paste the below code just above: </head>
<!--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: 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;
}
</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='HTTPS://DOCS.GOOGLE.COM/FILE/D/
0B7Q3JXFQN9Y2SLNOWS1BMUTRUGM/EDIT' TYPE='TEXT/JAVASCRIPT'/>
<!-- REMOVE --></B:IF>
<!--RELATED POSTS WITH THUMBNAILS SCRIPTS AND STYLES END-->
Note:
- to change the default picture, replace the URL in pink with your own
- for displaying more than 5 posts, replace 5 value from "var maxresults=5;"
- remove the code in blue if you want the related posts to be displayed in homepage too
5. Now Search the following code:
<div class='post-footer'>
6. just above it, copy and paste the below 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'>
<a href='http://bloggers-hero.blogspot.com/'><img alt='Blogger Tips and Tricks' src='http://3.bp.blogspot.com/-K65p5zLLKQk/T3ObCINoP7I/AAAAAAAABmI/dF84-alnOu4/s1600/best+blogger+tips.png'/></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->
Note:
- change the 6 value from max-results=6 with the number of posts you want to be displayed.
- If you want the related posts to be displayed on homepage too, remove the code in blue.
7. Save the template.That's it :)

11 comments:

  1. Plz guide me... i am applying the same steps... but related posts widget is not appearing....

    ReplyDelete
    Replies
    1. Hi,
      mmm, follow this tutorials maybe help u!!
      http://www.avdhootblogger.com/2013/04/5-type-of-related-post-widget-for.html

      Delete
  2. Thanks a lot
    http://hax0rtools.com

    ReplyDelete
  3. This comment has been removed by a blog administrator.

    ReplyDelete
  4. This comment has been removed by a blog administrator.

    ReplyDelete
  5. I like this but however it is not working. Can't save the template. Please fix this.

    ReplyDelete
  6. I've been using this widget for months and it worked perfectly, but all of the sudden it doesn't appear anymore. I haven't changed anything. My blog is on blogger. Do you have any ideas why it just stop appearing?

    ReplyDelete

 

Disclaimer | Terms and Conditions | Privacy Policy | Copyright © 2012 | Template design by bbloggertutorials