How to add news ticker bar into blogger blog? 04 methods to add news ticker bar .

Have you ever thought, how to add scrolling news ticker bar into your blogger blog?

With this article, you can easily add a scrolling news/posts bar into your blogger blog and make attractive and professional look into your blogger blog. That news bar helps you to show breaking news or the latest/recent post in your blogger. This is more important for you to show your very latest recent blog post in that news ticker bar. After you add that widget into your blogger blog both you and your readers can see and easily achieve your recent blog posts. That news/posts will appear by scrolling just one by one. 

Still thinking what is the news ticker? or not understand what is the news ticker bar? and need to know how to add news ticker into your blogger blog? 

What is a News ticker?

Simply News ticker is a data scrolling bar that appears top or bottom in the user screen and scrolling one by one.

Let's discuss a simple example,

Have you seen a scrolling ticker bar with news titles that located at the bottom in most news television networks? It highlighted with news titles of breaking news, biz news, local news. That is scrolling one after one and it highlights news titles and attract their visitors. So today we discuss how to add a ticker bar like that into your blog site with recent post titles. Not only that recent post you can also highlight your special deals, latest news, special announcement, and popular posts too.

What is the Benefit of adding a news ticker to your blogger blog?

• You can easily highlight the recent post titles or the latest news from your site for your readers.
• It helps to attract readers and gain professional look for your blog site.
• Easily you can highlight your best deals for your audience.
• It helps to precisely focus on your users.
• You can easily highlight your special deals, the latest news, special announcement, and popular posts.

How to add recent post news ticker into your blogger blog?

Step 01: Sign in to your blogger blog

Step 02: Go to your Dashboard >> Template

Step 03: Click on Edit HTML button

Step 04: Find (Ctrl + F) </style>or  ]]></b:skin>

Step 05: Copy below CSS code and Paste before or above the </style>  or  ]]></b:skin>

#beakingnews{width:980px;margin:0 auto;line-height:35px;height:35px;background:#F7F7F7;overflow:hidden;margin-top:5px;}

#beakingnews .tulisbreaking{display:block;float:left;padding:0 7px;margin:0 5px 0 0;color:#FFF;background:#FD1515}

#recentpostbreaking{float:left}

#recentpostbreaking ul,#recentpostbreaking li{list-style:none;margin:0;padding:0}

Step 06: After paste it again find </body>tag and copy below code and paste before or above </body> tag.

<script type='text/javascript'>

//<![CDATA[

$(document).ready(function () {

var url_blog = 'data:blog.url',

    numpostx  = 10;

$.ajax({

    url: '' + url_blog + '/feeds/posts/default?alt=json-in-script&max-results=' + numpostx + '',

    type: 'get',

    dataType: "jsonp",

    success: function(data) {

        var posturl, posttitle, skeleton = '',

            entry = data.feed.entry;

        if (entry !== undefined) {

            skeleton = "<ul>";

        for (var i = 0; i < entry.length; i++) {

                for (var j=0; j < entry[i].link.length; j++)

                {

                     if (entry[i].link[j].rel == "alternate")

                        {

                            posturl = entry[i].link[j].href;

                            break;

                         }

                }                posttitle = entry[i].title.$t;

            skeleton += '<li><a href="' + posturl + '" target="_blank">' + posttitle + '</a></li>';

        }

            skeleton += '</ul>';

            $('#recentpostbreaking').html(skeleton);

            // code of breaking news

            function tick(){

            $('#recentpostbreaking li:first').slideUp( function () { $(this).appendTo($('#recentpostbreaking ul')).slideDown(); });

            }

        setInterval(function(){ tick () }, 5000);

        } else {

            $('#recentpostbreaking').html('<span>No result!</span>');

        }

    },

    error: function() {

            $('#recentpostbreaking').html('<strong>Error Loading Feed!</strong>');

       }

});

});

//]]>

</script>

*If code not working, please replace 'data:blog.url'  with your Blog URL. ‘www.yourblogurl.com’

Step 07: After adding above Save your template, add below code where you want to show this recent post ticker in your blogger. For that go to add a gadget >> HTML/Javascript Gadget>> Copy paste below code >> Save widget >> place where you want to show it.

<div id='beakingnews'><span class='tulisbreaking'>Breaking News:</span>

<div id='recentpostbreaking'>Loading...</div>

</div>

<div style='clear: both;'/>

Step 08: Save layout and watch is it work?

In the above method, we discuss how to add recent post ticker bar.

If you want to add highlighted news bar with news title only or news link + title+ description then try to add below codes into your blogger,

How to add highlighted breaking news bar with only news titles into blogger?

Step 01: Sign into your blogger blog

Step 02: Go to your Dashboard >> Layout

Step 03: Add a gadget >> HTML/JavascriptGadget>> Copy paste below code >> Save widget >> place where you want to show it.

<div class="container">

<div class="headertext">Breaking News</div>

<div>

<marquee style="width:1140px;color:red;"

onmouseover="this.stop();"

onmouseout="this.start();"

direction="left"

behavior="scroll"

scrollamount="7">

This is Scrolling Text1

&nbsp;&nbsp;&nbsp;

This is Scrolling Text2

&nbsp;&nbsp;&nbsp;

This is Scrolling Text3

&nbsp;&nbsp;&nbsp;

This is Scrolling Text4

&nbsp;&nbsp;&nbsp;

</marquee></div>

</div>

<style type="text/css">

.container

{

position: relative;

}

.container,

.container .headertext {

padding: 10px;

background-color: #fff;

color: #626060;

font-weight: bold;

}

.container .headertext {

position: absolute;

top: 0;

left: 0;

z-index: 10;

}

.container marquee {

line-height: 1.5;

}

.container marquee p {

margin: 0;

}

</style>

Customized –

Replace This is Scrolling Text1, This is Scrolling Text2, This is Scrolling Text3, This is Scrolling Text4 with your News title1, News title2, News Title3, News Title4

How to add highlighted breaking news bar with news title + news link + news description into blogger?

Step 01: Sign into your blogger blog

Step 02: Go to your Dashboard >> Layout

Step 03: Add a gadget >> HTML/JavascriptGadget>> Copy paste below code >> Save widget >> place where you want to show it.

<div class="container">

<div class="headertext">Breaking News</div>

<div>

<marquee style="width:1140px;color:red;"

onmouseover="this.stop();"

onmouseout="this.start();"

direction="left"

behavior="scroll"

scrollamount="7">

<div id="TICKER" style="display:none; border-top:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; overflow:hidden; background-color:#FFFFFF; width:520px" onmouseover="TICKER_PAUSED=true" onmouseout="TICKER_PAUSED=false">

<span style='background-color:#7FB51A;'> &nbsp; &nbsp;<a href="Your-First-Headline-Url-Here"> <font color=#ffffff> <b>Your-First-Headline-Title-Here</b></font>&nbsp; &nbsp; </a></span> &nbsp; <b>Your-First Headline-Description</b>&nbsp;

<span style='background-color:#FFAA00;'> &nbsp; &nbsp;<a href="Your-Second-Headline-Url-Here"> <font color=#ffffff> <b>Your-Second-Headline-Title-Here</b></font>&nbsp; &nbsp; </a></span> &nbsp; <b>>> Copy paste below code >> Save widget >> place where you want to show it </b>&nbsp;

<span style='background-color:#0088FF;'> &nbsp; &nbsp; <b><a href="Your-Third-Headline-Url-Here"><font color=#ffffff>Your-Third-Headline-Title-Here</font></a></b>&nbsp; &nbsp; </span> &nbsp; <b>Your-Third-Headline-Description-Here</b>&nbsp;

</marquee></div>

</div>

<style type="text/css">

.container

{

position: relative;

}

.container,

.container .headertext {

padding: 10px;

background-color: #fff;

color: #626060;

font-weight: bold;

}

.container .headertext {

position: absolute;

top: 0;

left: 0;

z-index: 10;

}

.container marquee {

line-height: 1.5;

}

.container marquee p {

margin: 0;

}

</style>

Customized – 

Replace Your-First/second/Third-Headline-Url-Here with the URLs of your highlighted posts/news.

Replace Your-First/second/Third-Headline-Title-Here with the titles of your posts/news headlines.

Replace Your- First/second/Third-Headline-Description-Herewith the small descriptions of your posts or news.

Replace #7FB51A/#FFAA00/#0088FF with color codes as you prefer.

*If it’s not working or any error, please check if below code is available? If not add below code into your blogger template.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'></script>

If you have any issue with the above method or its not the code that you looking for then don’t worry study how to make your own scrolling image or text by using <marquee> tag with our old post.


Note – when you add a news ticker to your blogger, you must consider about right and suited color into your ticker bar after compare with your blog template colors.

Now you have a good understanding of recent post news ticker bar and latest/breaking news ticker bar. Also, you can build your own news ticker bar with <marquee> tag.

With the above ticker bars, you can highlight and attract readers to the most important news/posts.

I Hope the above methods help you to add news ticker bar into blogger blog. And if you have any problem or know more fixes on this slow internet speed issue, Please share with us in the comments section below. Happy blogging!