Way To Add Nice Related Posts Widget To Blogger With Thumbnails

By : Unknown

On : 8:50 PM

In : Blog Designing, Blogger Widget, Blogging Class

0 comments

Related Posts Widget make blog more dynamic and help to keep visitor long time in the blog.So every blogger must should add Nice Related Posts Widget To Blogger With Thumbnails.For Add Related Posts Widget To Blogger With Thumbnails we must follow some steps.

Steps to Add Nice Related Posts Widget To Blogger With Thumbnails:

***Before start this steps you must backup your Template

01.Go To Blogger Dashboard next click on Template and Edit HTML.

02.Now Check the "Expand widgets template" box.

03.Press (CTRL + F) and search below this code.

</head>

04.After that Copy and paste the below code just before/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;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX3Z1zUDWbfxRgFlPvEipop2MbxNV7Lt7PfA-fCO1-LyY0ADoBgfk5LSjM8nGwChxfFZJa-sR4TflddWvDEECOJRm1JgOVHHKc16en3ZcDdZBpl-8qu5uQsshsF83UeEq68FNEaSBQ8vBz/s1600/no_image.jpg&quot;;

var maxresults=5;

var splittercolor=&quot;#DDDDDD&quot;;

var relatedpoststitle=&quot;Related Posts&quot;;

</script>

<script src='http://helplogger.googlecode.com/svn/trunk/related-posts-with-big-thumbnails.js' type='text/javascript'/>

<!-- remove --></b:if>

<!--Related Posts with thumbnails Scripts and Styles End-->

---------------------------------------------------------

Note (you can Change):

- To change the default picture, replace the URL in Green with your own

- For displaying more than 5 posts, replace 5 value from "var maxresults=5;"

- Remove the code in violet if you want the related posts to be displayed in homepage too

05.Find the following code:

    <div class='post-footer'>

06.And 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://helplogger.blogspot.com'><img alt='Blogger Tricks' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXsY0oMhJjho5nsIMJk9eDQSIpUAx8q5Du5J0LVnyv4SxAKDRZjCoTBdZW7dVv_trO5oSgwhXe_b87pnPOyIVayG9XdewiU3IL6JYfF7DuxPKEIWuJ5MnuDQjujf3ao9v2ON55Jn85xlOk/s1600/best+blogger+tips.png'/></a>

</b:if></b:if>

<!-- Related Posts with Thumbnails Code End-->

Note that you can Follow:

- you can 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 violet.

07. Now your job done just Save the Template

Enjoy  Nice Related Posts Widget To Blogger With Thumbnails