Colorful Link style Related Post Widget for Blogger

how to add Colorful Link style Related Post Widget for Blogger

0
data:blog.title
related_post

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.


blogger widget


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.
Colorful Link style Related Post Widget for Blogger
4 Stars stars - "Colorful Link style Related Post Widget for Blogger" Related post widget is compulsory for increasing page view on any blog or website. Though I h...
Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *