Colorful Link style Related Post Widget for Blogger
how to add 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="Related Articles"
</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='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=8"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var maxresults=5;removeRelatedDuplicates(); printRelatedLabels("<data:post.url/>");
</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.
Post a Comment