Related Post with Icon Widget for Blogger

Related post is one and the most basic way to increase page visit, time on site as well as decreasing bounce rate of a site or blog. Obviously, it is important and a compulsory to provide such menu to offer related contents that might be useful for reader. If readers found nothing more to read they'll just leave your site immediately. Off course you don't want this happen to your site, right?!
There are two most common type of related posts, using thumbnail or simply list the post. The second type is simpler, but it offers faster loaded page than using thumbnail. However, if you like using thumbnail, you can try my related post with bubbled thumbnail here. Normally, the related post lists style use common type of list, numbers or bullets. But we can make it more stylish by using icons of our own site (off course you can change it with other picture). Just follow these steps:

First, log in to your blogger dashboard - click on Design - Edit HTML and check the Expand Widget Templates. Find the </head> code on your template and put the codes below before it. It should look like this:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts{width:100%;font-size:12px tahoma;margin: 15px 0 7px 0;}
#related-posts .widget{list-style-type:none;margin:5px 0 5px 0;padding:0;}
#related-posts .widget h2, #related-posts h2{font-size:20px;
font-weight:normal;margin:5px 7px 0; padding:0 0 5px;}
#related-posts a{text-decoration:none;}
#related-posts a:hover{text-decoration:none;}
#related-posts ul{border:medium none;margin:16px;padding:0;}
#related-posts ul li{display:block;background:url(/favicon.ico) no-repeat;
padding:0 0 1px 21px;margin-bottom:3px;line-height:1.6em;
border-bottom:1px dotted #cccccc;}
#related-posts ul li a{background:#fff;display:block;}
#related-posts ul li a:hover{background:#E9F5FB;}
</style>
<script src='https://storage.googleapis.com/google-code-archive-downloads/v2/code.google.com/dvslabs/relatedpost-icon.js' type='text/javascript'/>
</b:if>
</head>

If you want to change the icon to picture, simply change favicon.ico to url of your desired picture.

Second, find these codes

<data:post.body/> 

The code above is code to show your post content. You might find several of same codes, but be sure to find code that is used for a single post, usually marked with "item". Then put the codes below just right after it:

<!-- Start Related post-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<font face='Arial' size='3'><b>Related Posts : </b></font>
<font color='#FFFFFF'><b:loop values='data:post.labels' var='label'>
<data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=7&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
</b:if>
<!--End Related post-->

The red colored number shows the maximum number of related post that will appear on a post, just define your own. Don't forget to save your template and you're done. See also Stylish page navigation for blogger for another cute widgets.
Note: this is related post tutorial for blogger, if you are using wordpress you can try Related Post by Tags and Category Without Plugin

Share