How to add a news ticker or a headlines widget to your blog

on
Add news ticker in Blogger. You can add News ticker in Blogger very easily. It might be even good if you make news ticker as Breaking news ticker. For those who don’t know what a news ticker is. Here is the definition. News tickers sometimes referred to as slides are located at the bottom of most television news networks to highlight breaking news, daily trends, etc. You can use a news ticker on your Blogger website to highlight special deals, popular posts, or anything else. In this article, we will show you how to add a rotating or scrolling news ticker in Blogger.

What is a News Ticker in a Blog

In terms of blogging, News Ticker is the data that appears at the bottom of user screen when a user scrolls through a blog.

Benefits of adding News Ticker in Blogger

  • You can highlight the best deals that you think will be profitable.
  • News ticker helps to precisely focus on user engagement for a particular content.
  • News ticker can also be the perfect place for the Latest Promotions with the timer counter.
  • Your readers will never miss the best of your blog.

Code To create and add News ticker in Blogger

Here is the code. You can modify the code as per the given instructions. Instructions are given below in the article. Also, it is described how and where this code is to be added.

  • Code

    <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>Your-Second-Headline-Description-Here</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;    <script type="text/javascript"
    src="https://mybloggerlab.googlecode.com/files/webticker_lib.js"
    language="javascript"></script></b></span></div>
    </b:if></b:if>

  • Customization Tips for the Code

    • Replace Your-First-Headline-Url-Here With the URL of your first headline post.
    • Now Replace Your-First-Headline-Title-Here With the Title of your headline post
    • Replace Your-First Headline-Description With the small description of your headline
    • To change colors simply replace #7FB51A and #ffffff Similarly you can do the modifications for other headings. If you wish to include more, you can repeat the same code again.

Steps to Add News Ticker in Blogger

  1. Login to your Blogger blog and Go To Blogger >Layout
  2. Now from Layout section, click to Add A New Gadget.
  3. Add HTML/ Javascript and paste your News Ticker Code.
  4. Press Save button and now go to your blog.
  5. Your Users can see the Scrolling Jquery Ticker.

Important

When you add the News ticker, make sure you choose the right color in your website. If you are a new blogger or if you are a not a developer you can reach me via contact page. I Will surely help you out. But yes, the task is not tedious. Don’t worry even if you are not even aware about what a code is. Still if you proceed with the mentioned steps, you will be able to get the News ticker in your Blogger site.

Comments

Post a Comment