Colorful Link style Related Post Widget for Blogger

how to add Colorful Link style Related Post Widget for Blogger

Comments: 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.

Speak Your Mind

Facebook Group Community Code ConverterHide Code Converter Show EmoticonHide Emoticon

If you Got questions? Ask ’em below! While we’re here, you might like to leave a comment and let me know if you have any stories or questions.

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 *