Related Posts Widget with thumbnails for Blogger andrey понедельник, 22 июня 2015 г. No Comment

One of the best way to increase page views and readership is using a related posts plugin. After the huge success of thumbnail realated posts widget by linkwithin, Aneesh developed the same widget using custom code which was indeed more reliable and totally customizable.

Now Like wise Wordpress Blogger Users can also have Related Posts with Thumbnails in Blogspot Blogs.To increase page views per user this widget can be very helpful, you can easily display the Related Posts with thumbnails below every post or below the post area with very ease.

Related Posts Widget with Thumbnails for Blogger

Here are the detailed steps to install the related posts widget for blogger with thumbnails

STEP #1

Log in to Blogger -> Layout -> Edit HTMLand select the tick-boxExpand Widget Templates
Then, find (CTRL+F) this code in the template:

And immediately before it, paste this code:

<b:if cond='data:blog.pageType == "item"'>
<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, “Times New Roman”, 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/AVvXsEirMOpGVprfvusdwqR9v9a6HJMWYHBsiTlVcI-tn07suOywFWPHUBiQ5pG8Hl-D38CkMS4lggyspD4kTn9DL-2PbXOH0TGwuUL6fvRzvSxZwXRX1H5pOu1vD2riYNjBE5CIBeTStaRywyJv/s1600/no+Image+1.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
script>
<script src='http://24work.ucoz.com/24work-blogspot/related-posts/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
b:if>

STEP #2:
Now find this code in the template:

If you cant find it then try finding this one

Now immediately after any of these lines(whichever you could find) place this code snippet

<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&callback=related_results_labels_thumbs&max-results=5"' type='text/javascript'/>b:loop>

One of the best way to increase page views and readership is using a related posts plugin. After the huge success of thumbnail realated posts widget by linkwithin, Aneesh developed the same widget using custom code which was indeed more reliable and totally customizable.




Now Like wise Wordpress Blogger Users can also have Related Posts with Thumbnails in Blogspot Blogs.To increase page views per user this widget can be very helpful, you can easily display the Related Posts with thumbnails below every post or below the post area with very ease.




Related Posts Widget with Thumbnails for Blogger
Here are the detailed steps to install the related posts widget for blogger with thumbnails





STEP #1


Log in to Blogger -> Layout -> Edit HTMLand select the tick-boxExpand Widget Templates
Then, find (CTRL+F) this code in the template:





And immediately before it, paste this code:


<b:if cond='data:blog.pageType == "item"'>
<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, “Times New Roman”, 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/AVvXsEirMOpGVprfvusdwqR9v9a6HJMWYHBsiTlVcI-tn07suOywFWPHUBiQ5pG8Hl-D38CkMS4lggyspD4kTn9DL-2PbXOH0TGwuUL6fvRzvSxZwXRX1H5pOu1vD2riYNjBE5CIBeTStaRywyJv/s1600/no+Image+1.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
script>
<script src='http://24work.ucoz.com/24work-blogspot/related-posts/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
b:if>




STEP #2:
Now find this code in the template:










If you cant find it then try finding this one






Now immediately after any of these lines(whichever you could find) place this code snippet

<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&callback=related_results_labels_thumbs&max-results=5"' type='text/javascript'/>b:loop>











                                Tweet
                              






                            by 
                            
                              Jillur Rahman
                            


                            Jillur Rahman is a Web designers. He enjoys to make blogger templates. He always try to make modern and 3D looking Templates. You can by his templates from Themeforest.
                          

                            Follow him @ 
                            
                              Twitter
                            
                            | 
                            
                              Facebook
                            
                            | 
                            
                              Google Plus
                            



                          Tags:
                          



blogger




                              /
                            



posts




                              /
                            



Related




                              /
                            



thumbnails




                              /
                            



Widget