Headline News Styled Scrolling Random Posts Widget For Blogger Blog

Posted by | 38 comments
Scrollling Headline News Widget
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.

38 comments:

  1. very nice....I’m extremely pleased to uncover this website.
    I want to to thank you for ones time for this particularly fantastic read!!
    I definitely loved every little bit of it and I have you saved as a favorite to
    see new stuff in your web site.

    Blogging Tutorials

    ReplyDelete

  2. This is such a unique and awesome perspective! It is definitely easy to fall into over-creating or over-consuming. Thanks for this post!As i read this article, i find it very informative. it is a nice one because it deals with an interesting ideas and information. I like it so much as from the first time i read it, the information that are used here attracted me a lot. They take my attention from the first look, so thanks so much for sharing with us this great topic in this great website. You are doing a great work here. I must say you’ve done a wonderful job by sharing your article with us. It took more time for me to read it fully, But it’s worth it Really.

    ReplyDelete
  3. Hi Abhisek,
    That was an interesting piece there!

    ReplyDelete
  4. hi abi
    give some tips for my blog plz review it
    http://wallpaperssea.blogspot.com

    ReplyDelete
  5. Thanks for this wonderful blogger widget. I will use it and will recommend it to other bloggers.

    ReplyDelete
  6. Awesome piece of information, let me tell you, your blog gives the best and the most interesting information. once again hats off to you! Thanks a ton once again, Regards <a href=" http://www.alphasynopsys.com/big-data//>AlphaSynopsys</a>

    ReplyDelete
  7. Reflect the beam of your love into the lives of your dear ones by sending them these stunning arrangements of Flowers. Send Flowers to Paris through various online stores for your dear ones for whom you really care.
    http://www.parisflowershop.com

    ReplyDelete
  8. Share some moments of joy to your life partner with the beauty of flowers and make the moments cheerful and happy. Send Flowers to Singapore at low cost through Florist in Singapore and express your best instinctive love and respect

    ReplyDelete
  9. Terima kasih kasih atas infonya admin :D

    Agen Bola

    ReplyDelete
  10. Gifts and Hampers describe various feelings by their significant attributes. It also describes your personality and builds a respected image in the eyes of the recipient. So Send Gifts to Chennai and appreciate your loved ones for the special feelings that they have brought to your life.

    ReplyDelete
  11. We absolutely love your blog and find a lot of your post’s to be exactly I’m looking for. Does one offer guest writers to write content for you personally? I wouldn’t mind creating a post or elaborating on a lot of the subjects you write regarding here. Again, awesome weblog!

    ReplyDelete
  12. Hi Abhishek Raj,
    You alway write very informative articels, I am great fan of your blog.
    Thanks for sharing.

    ReplyDelete
  13. I really liked your article.Thanks Again. Much obliged.
    Quickbooks Hosting

    ReplyDelete
  14. thanks for helping me out on this

    ReplyDelete
  15. Great post, I like you Articles. thanks you so much for sharing it



    Quickbooks Hostiing

    ReplyDelete
  16. Hey buddy,

    Thanks for this blogger tip . I am not a blogspot and coding expert, this would help me out.

    ReplyDelete

  17. great article I loved it, thank you very much for the info and merry Christmas

    ReplyDelete
  18. great post thanks for sharing this

    ReplyDelete
  19. nice blog posts - thanks for sharing it, Oswaal Books

    ReplyDelete
  20. Nice blog and very good Article brother also visit on my blog >>>>>
    http://www.gotricker.com/

    ReplyDelete
  21. It is very nice blogpost they are very attractive and its useful for other its an excellent . I like this

    ReplyDelete
  22. It is very nice blogpost they are very attractive and its useful for other its an excellent . I like this

    ReplyDelete
  23. nice blog posts - thanks for sharing it, Oswaal Books

    ReplyDelete
  24. THANK YOU
    COMPANY FORMATION UK
    https://www.globalcompanyformation.co.uk/

    ReplyDelete
  25. nice post thanks for sharing...
    http://neededfiles2.blogspot.com/

    ReplyDelete
  26. Hi
    Amazing blog and giving the very nice information,
    Writing such blogs and post.
    Thanking you.

    ReplyDelete
  27. Nice information is depicted in this website.

    Laptops under 25000

    ReplyDelete
  28. Situs Nonton movie, film dan tv series terbaru dengan subtitle indonesia diupdate setiap hari, dari situs terpopuler nonton disini link
    di bawah ini
    streamingindonesia
    drama
    horror
    action

    ReplyDelete
  29. Permainan seru dan mampu menghasilkan banyak uang, slot gacor hari ini adalah Sweet Bonanza. buat kalian yang ingin mencoba memainkan sweet bonanza demo kalian bisa mencobanya di cici togel. Terima Kasih

    ReplyDelete

Alexa Rank!

Recent Comments

Contact Form

Name

Email *

Message *