How to Make a Ticker for Your Website

Techwalla may earn compensation through affiliate links in this story. Learn more about our affiliate and product review process here.
Add a ticker to your website using a few lines of HTML and CSS code.

Also known as marquees, tickers scroll across the width of a viewing screen, presenting messages designed to be viewed and understood at a glance. Commonly used on television to display news highlights or stock market data, tickers sometimes appear on the Web as well. With a few lines of HTML and Cascading Style Sheet (CSS) code, you can quickly add this type of content to your website.

Advertisement

Step 1

Open your Web page and view its HTML code. If you use a visual editing tool such as Adobe Dreamweaver, open the page and click on the area where you want to add your ticker. Change your viewing mode to Code View. This shows you the HTML code that controls the appearance of your page. If you use a text editor, open your page in the editor and scroll down to the part of the page where you want to add the ticker.

Advertisement

Video of the Day

Step 2

Press the "Enter" key to insert a blank line.

Step 3

Copy and paste the following code onto the blank line:

Sample ticker text goes here

Advertisement

This code defines a marquee element, which slides content across the screen from right to left by default. The paragraph contained between the opening and closing marquee tags is the content in this example.

Advertisement

Step 4

Update the code parameters to suit your design needs. The opening marquee tag uses CSS style rules to define a light gray background color, along with a 1-pixel wide border of slightly darker gray. All of these values can be adjusted. In addition, substitute the placeholder content located between the opening and closing paragraph tags with text or images of your own.

Step 5

Save your page and open it in a Web browser. The ticker appears onscreen at the page location you selected in Step 1.

Video of the Day

Advertisement

Advertisement

references

Report an Issue

screenshot of the current page

Screenshot loading...