Add stylish related post widget below all blogger post easily.

Add best css stylish related post widget below all blogger post easily.








Follow simple step to adding this css widget below all blogger post easily ----->>>>

* First go to your blogger Dashboard.

* Now click in design tab and edit HTML.

* Click in small box to expand your blogger template.

* Now find this code ]]</b:skin> by CTRL+F key.

* Copy below code and paste before ]]</b:skin>

<!--RelatedPostsStarts-->
#related-posts {
background-color : #fff;
padding : 5px;
background-image : url(http://i33.tinypic.com/10moayf.jpg);
background-repeat : repeat-x;
width : 580px;
margin-bottom : 5px;
border : 1px solid #f3ddac;
overflow : hidden;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 0 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
padding : 5px;
text-align : center;
font : 12px/34px "Georgia";
text-transform : uppercase;
color : #ffffff;
background-color : #ad0000;
padding : 3px;
padding-left : 8px;
padding-right : 8px;
color : #fffffe;
font-size : 1em;
font-weight : bold;
}
#related-posts a {
background: #FFFFFF url('http://santabanta.mywapblog.com/files/lala1.jpg') no-repeat 10px 50%;
padding: 9px 0 9px 40px;
display:block;
}
#related-posts a:hover {
background: #f9f7f0 url('http://santabanta.mywapblog.com/files/lala1.jpg') no-repeat 10px 50%;
padding: 9px 0 9px 40px;
display:block;
}
#related-posts ul {
border : medium none;
margin : 3px;
padding : 0;
display : block;
}
.related-posts ul li a:link, .related-posts ul li a:visited, .related-posts ul li a:active {
background: #f9f7f0 url('http://santabanta.mywapblog.com/files/lala.jpg') no-repeat 10px 50%;
padding: 9px 0 9px 40px;
display:block;
}
.related-posts ul li {
background: #f9f7f0 url('http://santabanta.mywapblog.com/files/lala.jpg') no-repeat 10px 50%;
padding: 9px 0 9px 40px;
display:block;
}
#related-posts ul li a:hover {
background: #f9f7f0 url('http://santabanta.mywapblog.com/files/lala.jpg') no-repeat 10px 50%;
padding: 9px 0 9px 40px;
display:block;
}
<!--RelatedPostsEnds-->

* Now again find this code </head> by CTRL+F key.

* Copy below code and paste before </head>

<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>

* Now again find this code <data:post.body/> by CTRL+F key.

* Copy below code and paste before <data:post.body/>

<div id='related-posts'>
<font face='Arial' size='5'><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=5&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>

* Now click to save your blogger template and you are ok.