Colorful Link style Related Post Widget for Blogger

Related post widget is compulsory for increasing page view on any blog or website. Though I have share some unique related post widget but today I will share with you a link style related post widget which is load faster than any other related post widget. Those who are using simple link style related post widget they can make their widget colorful by using this. You can see the Demo from below image. So let's proceed to tutorial.

Step 1 Log in to your Blogger Account and Go to Blogger Dash Board

Step 2 Click on ->Template  ->Edit HTML

Step 3 Now find ]]></b:skin> by Pressing Ctrl+F  

Step 4 And Paste the below code above ]]></b:skin> and Save your template

/* Colored Link Related Post By www.bloggerspice.com */
#somporkito-bisoy ul li {
list-style-image:none;
}
#somporkito-bisoy ul {
list-style-type: none;
margin: 0;
padding: 5px 0;
}
#somporkito-bisoy ul li {
border: 0 none;
margin: 5px 0;
padding: 10px;
position: relative;
}
#somporkito-bisoy ul li:first-child {
background: none repeat scroll 0 0 #00E5FF;
width:90%;
}
#somporkito-bisoy ul li:first-child:after {
content: "1";
}
#somporkito-bisoy ul li:first-child + li {
background: none repeat scroll 0 0 #66F0F0;
width: 90%;
}
#somporkito-bisoy ul li:first-child + li:after {
content: "2";
}
#somporkito-bisoy ul li:first-child + li + li {
background: none repeat scroll 0 0 #66E500;
width:90%;
}
#somporkito-bisoy ul li:first-child + li + li:after {
content: "3";
}
#somporkito-bisoy ul li:first-child + li + li + li {
background: none repeat scroll 0 0 #99FF00;
width:90%;
}
#somporkito-bisoy ul li:first-child + li + li + li:after {
content: "4";
}
#somporkito-bisoy ul li:first-child + li + li + li + li {
background: none repeat scroll 0 0 #CCFF00;
width: 90%;
}
#somporkito-bisoy ul li:first-child + li + li + li + li:after {
content: "5";
}
#somporkito-bisoy ul li:first-child + li + li + li + li + li {
background: none repeat scroll 0 0 #FF6633;
width: 90%;
}
#somporkito-bisoy ul li:first-child + li + li + li + li + li:after {
content: "6";
}
#somporkito-bisoy ul li:first-child + li + li + li + li + li + li {
background: none repeat scroll 0 0 #CC66FF;
width: 90%;
}
#somporkito-bisoy ul li:first-child + li + li + li + li + li + li:after {
content: "7";
}
#somporkito-bisoy ul li:first-child + li + li + li + li + li + li + li {
background: none repeat scroll 0 0 #337BFF;
width:90%;
}
#somporkito-bisoy ul li:first-child + li + li + li + li + li + li + li:after {
content: "8";
}
#somporkito-bisoy ul li:first-child + li + li + li + li + li + li + li + li {
background: none repeat scroll 0 0 #5FF2C7;
width: 90%;
}
#somporkito-bisoy ul li:first-child + li + li + li + li + li + li + li + li:after {
content: "9";
}
#somporkito-bisoy ul li:first-child:after, #somporkito-bisoy ul li:first-child + li:after, #somporkito-bisoy ul li:first-child + li + li:after, #somporkito-bisoy ul li:first-child + li + li + li:after, #somporkito-bisoy ul li:first-child + li + li + li + li:after, #somporkito-bisoy ul li:first-child + li + li + li + li + li:after, #somporkito-bisoy ul li:first-child + li + li + li + li + li + li:after, #somporkito-bisoy ul li:first-child + li + li + li + li + li + li + li:after, #somporkito-bisoy ul li:first-child + li + li + li + li + li + li + li + li:after {
background: none repeat scroll 0 0 #353535;
border-radius: 50% 50% 50% 50%;
color: #FFFFFF;
font-size: 25px;
height: 30px;
position: absolute;
right: -17px;
text-align: center;
top: 1px;
width: 30px;
}
#somporkito-bisoy ul li a {
color: #444444;
font-size: 13px;
text-decoration: none;
}

Step 5 And Paste the below code above/before </head> and save your template

<script type='text/javascript'>
var relatedpoststitle=&quot;Related Articles&quot;
</script>
<script src='http://bloggerspicebd.googlecode.com/files/related-BS.js' type='text/javascript'/>

Step 6 Now again find out <data:post.body/> (Paste the below Code here)

<div id='somporkito-bisoy'>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=8&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var maxresults=5;removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;);
</script>
</div>

Customization

• Change width: 90% to increase or decrease width of the widget.
• Change maxresults=5; to set the number of post you want to display.

You have successfully added the related post widget in your blog. You can show maximum 9 related post at a time to work the widget accurately. If you have any query regarding this widget then feel free to write us. Thank You.