Tuesday, October 4, 2011

A Simple Ticker

Any blogger that wants to update his viewers with his blog's latest updates, will want to put up a ticker.
On the ticker you would probably want to put some text, links or photos too.
It is very simple, with no JQueries or other annoying coding. All you will be doing is adding an HTML/Javascript gadget.

Here is an example:
Try hovering your mouse over it!

----Top of  Ticker----------------
LINE OR IMAGE 1
LINE OR IMAGE 2
LINE OR IMAGE 3 
LINE OR IMAGE 4  LINE OR IMAGE 5 ETC.1 1 
----Bottom of Ticker------------

Add an HTML/Javascript gadget, and copy and past the following code into it:

<div class="textwidget"><marquee direction="up" width="105" onmouseover="this.stop()" scrollamount="2" onmouseout="this.start()" height="200" align="left">Line or Image 1<br/>Line or Image 2<br/>Line or Image 3<br/><br/>Etc.</marquee></div>


marquee direction="up" - can be changed to left, right or down.
width="105" - can be changed to any width you want the ticker to be.
scrollamount="2" - this is the speed of the ticker, the lower the number, the slower the ticker.
height="200"- can be changed to any height you want the ticker to be.
align="left" - this is the text align, which obviously may be changed to right and center.
Line or Image 1/2/3 etc. - this is what is displayed in the ticker, you can make as many lines as you want.

To make a space between two lines, just put in: <br/>


Besides text, you can also put an Image.:
<img src="http://path_to_your_image.jpg/" alt="Title of image" height="Height of image" width="Width of image" />
img src="http://......jpg/" - this is the link of the image.
alt="Title of image" - here you can put a title for the image, or you can just leave it empty.
height and width of image may be adjusted as well.

Add a background image to the ticker.
Some may also want to add an image behind the ticker. This is a very simple procedure.
Just wrap the ticker's HTML in the following code:

<table height="100" width="150" background="http://....jpg/"><tr><td>Ticker's HTML coding</td></tr></table>

Enjoy!

0 comments:

Post a Comment