Headline News Styled Blinking Random Posts Widget For Blogger

First of all, you may wondering what the hell this widget is! So, let me explain this first, you are familiar with news headlines in news channels. Those either come scrolling (vertically or horizontally) or blinking, right? And I know some of you also know about news headline blogger widget. But, what is special in it. This widget have random posts instead of recent posts. 

Second, you must have question in your mind why I have put 'V1" in the last of title. Because I will bring one more random posts widget with scrolling function. Hope you will like both. So, let start the tutorial.

How To Add Headline Styled Random Posts Blogger Widget

1. Go to Blogger > Your Desired Blog > Layout.

2. Click On "Add Gadget" Link. 

3. Now Copy Below Codes and Paste There.

<script type="text/javascript">
var randarray = new Array();var l=0;var flag;
var numofpost=5;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('<div id="tpb-random-posts"><ul style="display: block; overflow: hidden; height: 20px; list-style-type:none;">');
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></div>');}
</script>

<script type='text/javascript' src='/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts'></script>

<script type="text/javascript">
this.randomtip = function(){
var pause = 5000;
var length = $("#tpb-random-posts ul li").length;
var temp = -1;   
this.getRan = function(){
var ran = Math.floor(Math.random()*length) + 1;
return ran;
};
this.show = function(){
var ran = getRan();
while (ran == temp){
ran = getRan();
};
temp = rain;
$("#tpb-random-posts ul li").hide();
$("#tpb-random-posts ul li:nth-child(" + ran + ")").fadeIn("fast");
};
show(); setInterval(show,pause);
};
$(document).ready(function(){
randomtip();
});
</script>

4. Save and Done.

Customization

1. If you want to show more than 5 posts, change the highlighted number in the code with red color (it is 5 now).

2. Every blog have different font-sizes, so make sure give it relevant height as for font sizes. You can change blue highlighted code to change its height.

From Editor Side

I think I have completed my tutorial, so go and try it. And most important if the code will not work, don't frustrate, please come here and drop a comment. I will definitely respond as time allow me. Don't worry, every query will be solved. If you want to share this widget on your blog, then you can put a link to this post and drop a comment here to give me credit for this work. I will be there to comment.