Headline News Styled Scrolling Random Posts Widget For Blogger Blog

Recently I published a widget of headline news style in which we have used random posts to interact visitors with your blog and keep them on your blog for long time. This will decrease blog bounce rate and make visitor more friendly with your blog. You can check the widget here "Headline News Styled Widget For Blogger". But wait before going there, check out this widget. Today I have come with scrolling function, so let's start the tutorial.

How To Add Headline News Styled Scrolling Random Posts To Blogger Blog

First, here the widget has two scrolling types, first vertical and second is horizontal. So, it's upon you which one you want to use. So, go ahead.

Vertical Scrolling Widget

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

2. Click On "Add Gadget" Link.



3. Choose "HTML/Javascript" from there.

4. and Copy the below code and paste there.

<style>
.tpb-random-posts-1 {
font-family: auto;
font-size: 16px;
}
.tpb-random-posts-1 ul {
display: block;
overflow: hidden;
height: 20px;
list-style-type: none;
}
</style>
<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 class="tpb-random-posts-1"><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></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">
jQuery(document).ready(function($) {
var tpb = function()
{
setTimeout(function(){
$(".tpb-random-posts-1 ul li:first").animate( {marginTop: '-20px'}, 800, function()
{
$(this).detach().appendTo(".tpb-random-posts-1 ul").removeAttr("style");   
});
tpb();
}, 5000);
};
tpb();
});
</script>

5. Save.

Horizontal Scrolling Widget

1. Same here, Go to Blogger.com > Your Desired Blog > Layout.

2. Click on "Add Gadget" link.

3. Choose "HTML/Javascript" from there.

4. and Copy the below code and paste there.

<style>
.tpb-random-posts {
font-family: auto;
font-size: 16px;
width: 450px;
margin-left: 40px;
overflow: hidden;
}
.tpb-random-posts ul {
list-style-type: none;
width: 2300px;
}
.tpb-random-posts ul li{
width:490px;
float:left;
margin-left: -40px;
}
</style>
<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 class="tpb-random-posts"><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></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">
jQuery(document).ready(function($) {
var tpb = function()
{
setTimeout(function(){
$(".tpb-random-posts ul li:first-child").animate( {marginLeft: '-620px'}, 800, function()
{
$(this).detach().appendTo(".tpb-random-posts ul").removeAttr("style");   
});
tpb();
}, 5000);
};
tpb();
});
</script>

5. Hit Save and you have successfully  added the widget, now what! Yes

Customization

1. Remember, widget will not working perfectly if their will be a little error in the code. And most important, if font size is other than 16px then widget will not work properly. Go to top of code and change font size which you want to use and must change height respect to it for working.

Here is the end of tutorial, I know somewhere you will be confused, don't hesitate drop a comment and I will solve your problems. By the way, you can give your feedback through comments if I have done something great. Comment I want your suggestion.