Headline News Styled Scrolling Random Posts Widget For Blogger Blog

Posted by | 40 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.

40 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. http://www.theblogarticles.com

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

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

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

    ReplyDelete
  7. 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
  8. 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
  9. 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
  10. A fabulous Gift for all occasions these scrumptious Cakes which spreads love and happiness among your close ones with its beauty and style. Send Cakes to Hyderabadthrough various online shopping portals and make your loved ones residing in Hyderabad crave for more.

    ReplyDelete
  11. Terima kasih kasih atas infonya admin :D

    Agen Bola

    ReplyDelete
  12. 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
  13. 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
  14. Terima kasih atas informasi yang sangat menarik ini gan =))
    Kunjungi balik blog kami ya gan
    http://clayton88.blogspot.com | http://goo.gl/lNMX3D | http://goo.gl/sCBswn | http://goo.gl/eQV9d3 | http://tinyurl.com/plzqfn6 | http://pour.pw/865664 | http://goo.gl/Ie7IEb | http://goo.gl/cAQcMp
    Agen Bola
    Bandar Bola
    Agen Casino
    Agen Poker
    Kumpulan Berita Menarik

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

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

    ReplyDelete
  17. thanks for helping me out on this

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



    Quickbooks Hostiing

    ReplyDelete
  19. Hey buddy,

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

    ReplyDelete

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

    ReplyDelete
  21. Artikel yang sangat berguna, terima kasih admin :))
    Kunjungi balik juga ya
    http://clayton88.blogspot.com | http://informasiberitatop.blogspot.com | http://bit.ly/1sUU8dl | www.Agensbocasino.com | http://goo.gl/OraDLz | http://informasiberita.info | http://goo.gl/RkuB4G | http://Bandarbola138.com | http://goo.gl/8rM20b | http://goo.gl/5dAkJO | http://clayton88.blogspot.co.id

    ReplyDelete
  22. Artikel yang sangat menarik :D
    http://clayton88.blogspot.com | http://kagumiterus.blogspot.com/ | http://informasiberitatop.blogspot.com | http://bit.ly/1QTpF4S | http://goo.gl/eQV9d3 | http://bit.ly/1sUU8dl | http://goo.gl/CI4bLf | http://bit.ly/1IAMpsv | http://goo.gl/lNMX3D | http://bit.ly/1NM7v7j | http://bit.ly/1VxDjyt | http://bit.ly/1IAMpsv | http://bit.ly/1QTpF4S | http://goo.gl/cAQcMp | http://goo.gl/97Yn1s | http://goo.gl/tw2ZtP | http://bit.ly/1VxDjyt | http://goo.gl/RkuB4G | http://goo.gl/8rM20b | http://goo.gl/5dAkJO | http://bit.ly/1IAMpsv | http://bit.ly/1IAMpsv

    Berita Menarik
    Prediksi Bola
    Kumpulan Berita Menarik
    Kumpulan Berita Campuran
    Bandar Bola
    Agen Bola
    Agen Casino
    Agen Bola Terpercaya
    Main Dominoqq
    Agen Poker
    Bandar Ceme
    Agen Capsa
    Agen Poker Terpercaya

    Terimakasih admin..
    salam kenal ^_^

    ReplyDelete
  23. http://www.insurancegala.com/hix-insurance/

    ReplyDelete
  24. great post thanks for sharing this

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

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

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

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

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

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

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

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

    ReplyDelete

About The Author

My photo

Nothing Is Special About Me, But I Can Do Something Special. I Am A Young Blogger Blogging As Part Time And Completing My Education. Well ! I Don't Know Very Much About Myself.

Alexa Rank!

Recent Comments

Contact Form

Name

Email *

Message *