Home > HTML > How to create a news scroller using HTML marquee.

How to create a news scroller using HTML marquee.


Very simple News Scroller using HTML

In most of the website we can see that there is a portion for updates from the company. This updates can be shown by javscript,jquery,ajax etc technologies and it should be some effort also we have to include some pages for this.

For eg if we are implemented javscript newsticker the user’s browser must enable javascript, otherwise nothing going to happen. So the better method is if we can create a simple news ticker by using html elements only, it will be more faster and reliable in all browsers.

Following are the very simple and attractive vertical news ticker using HTML elements only. (Without using jquery,js,ajax..) So it should be work in all browsers even in the javascript disabled mode. We can give more attractive color and style for the news ticker.

Simple HTML code for showing news updates.

<div style="width: 180px; text-align: center; margin-top: 30px; 
margin-bottom: 2px;
        font-weight: bold;">
        Announcements</div>
    <div id="news-container">
        <marquee bgcolor="#ffffff" scrollamount="1" height="80" 
direction="up" loop="true"
            width="95%">
        We offers shopping cart <span style="color: blue;">
domain hosting free</span>
for limitted customers.
        <br /><br />
        You can choose your own style,color and domain 
for your shopping site.
        <br /><br />
        Supershope has largest number of viewers in the world. 
<span style="color: blue;">
You can sell your products here.</span><br />
        <br />
        <span style="color: blue;">Gift Paintings on Sale..!</span> 
There are thousands of
paintings available in supershope.
        Please contact us to buy paintings for affordable price.
        <br /><br />
        The Shopping cart product with <span style="color: blue;">
'supershope.com' domain also
            avaliable </span>for first customer with special package.
    </marquee>
    </div>

Where is simple HTML news ticker implemented

You can see the implemented HTML news ticker in the left hand side of the websit supershope used as Announcements section

Categories: HTML Tags:
  1. Umesh
    February 2, 2013 at 12:10 am

    Nice and Simple to implement.. Can be more attractive if put in table with different background..

  2. February 4, 2013 at 10:20 am

    Hi Umesh,
    Thank you for your visit and valuable comments.
    I shall post new codes with background style as you mentioned.
    Please keep visiting my blog.
    Thanks

  3. Ninan
    July 5, 2013 at 12:57 pm

    very nice. i am looking for it for a longtime.

  4. July 5, 2013 at 2:30 pm

    Thanks Ninan,

    We are expecting your valuable comments and suggestions in future.

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: