Create related posts widget with new stylish

Sunday, January 8, 2012

Create related posts widget with new stylish

Today I’m gonna share the stylish Related posts widget that I created for the premium type free template MoonLight. As you can see in the image above the widget provides a gallery view of posts related through labels. On hovering the mouse on the image the title of that post appears. For demo check my template MoonLight.

Installation

1. Go to the template code and check the box “Expand Widget template”. Find (Ctrl+F) code ]]></b:skin>. Now paste this code above it.

/* Related Posts Widget
----------------------------------------------- */
ul#related-posts{
    font-family:Helvetica,Arial,sans-serif !important;
    font-size:10px !important;
    list-style: none !important;
    margin: 20px 0 !important;
    padding: 0 !important;
    text-transform: none !important;
}
ul#related-posts li{
    float: left !important;
    height: auto !important;
    margin:0 15px !important;
    padding: 2px 1px 4px !important;
}
*html ul#related-posts li{
    margin:0 13px !important;
}
ul#related-posts li a {
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) !important;
    border: 2px solid #FFFFFF !important;
    display: block !important;
    height: 72px !important;
    position: relative !important;
    width: 72px !important;
}
ul#related-posts li a {
    color: #474C51 !important;
    text-decoration: none !important;
    text-shadow: 0 1px 0 #FFFFFF !important;
}
ul#related-posts li .overlay {
    height: 66px !important;
    line-height: 14px !important;
    padding:6px 0 0 6px !important;
    position: absolute !important;
    width: 66px !important;
    z-index: 10 !important;
}
ul#related-posts li a:hover .overlay {
    background: #fff !important;
    display: block !important;
    opacity:0.9 !important;
}
ul#related-posts li img {
    bottom: 0 !important;
    padding:0px !important;
}
ul#related-posts li a:hover {
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
}

2. Now find this code

<b:includable id='backlinks' var='post'>

and replace it with

<b:includable id='RelatedPosts' var='post'>
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNl9eW156xsADF1zbHHv54kpFegOxJ0fDp2D1oGTbBOZ4ZRH5j5UMsHvz54m3J5EEEMY-kh5Dyt3QDOarXP-Cr3FVV1PFhm3sjGIWp8g3q6HbYkHjyMfOlk1jSB4Ny-bhYKKDcl1_3VUqX/";
var maxresults=6;
</script>
<script src='http://bloggerz.googlecode.com/files/related_posts-with-thumbnails-for-blogger.js' type='text/javascript'/>
        <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=6"' type='text/javascript'/>
         </b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</b:if> 
<div style='clear:both'/>
</b:includable>
<b:includable id='backlinks' var='post'>

This widget is customized to show 6 related posts and appears only on the post page.To change these customization see the instructions at the bottom of this post.

3. Now the last step, find any one of these four codes

<div class='post-footer'>

        OR
<div class='post-footer-line post-footer-line-1'>
        OR
<div class='post-footer-line post-footer-line-2'>
        OR
<div class='post-footer-line post-footer-line-3'>

and place this code just after any one of the above four codes

<b:include data='post' name='RelatedPosts'/>

Customizations

1. How to display the related posts on every page and not only on the post pages ?

Just remove the two lines starting with  from Step 2. These line are

<b:if cond='data:blog.pageType == "item"'>
and
</b:if>

2. How to change the number of posts to be displayed in the widget?

You can adjust the maximum number of related posts being displayed by editing this line in the Step 2 code.

var maxresults=5;

3. To change the default thumbnail image, you can edit this line of code in Step 2

defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNl9eW156xsADF1zbHHv54kpFegOxJ0fDp2D1oGTbBOZ4ZRH5j5UMsHvz54m3J5EEEMY-kh5Dyt3QDOarXP-Cr3FVV1PFhm3sjGIWp8g3q6HbYkHjyMfOlk1jSB4Ny-bhYKKDcl1_3VUqX/";

 Good luck!

toturials blog

Sunday, January 8, 2012