Blogger random post widget with rounded style ::
Hi! previously i posted on bubble count for comments in blogger , keyboard layout in blogger posts now here i want to post blogger random post widget with rounded style using style sheet and small java script.
STEPS TO FOLLOW ::
- Login to your Blogger / blogspot
- Now click on Layout > Add widget (click where you want to add widget) >Add html/java script
- Now paste the below code into it
- Now save your widget
- thats it now you will see the random posts in your blogger / blogspot
<style>
.random-posts ul{padding-left:0px}
.random-posts ul li:hover {border:2px solid #FCE070}
.random-posts ul li a:hover {text-decoration:none}
.random-posts ul li {background: #FFF url() no-repeat scroll 5px 10px;list-style-type: none;margin:0 0 5px 0px;padding:5px 5px 5px 20px !important;border: 2px solid #FCE070;border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
</style>
<div class="random-posts"><script type="text/javascript">
var randarray = new Array();var l=0;var flag;
var numofpost=7;function randomposts(json){
var total = parseInt(json.feed.openSearch$totalResults.$t,10);
for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>');
for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";
document.write(item);}}
}document.write('</ul>');}
</script>
<script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script></div>
0 comments:
Post a Comment