Monday, 8 April 2013

How to Create Two Simple Scrolling Text Boxes (HTML Code, Marquee tag)



Hi again, now for another good looking and simple widget, a single line scrolling text box, which pauses when you hover your cursor over it. Firstly I will give you the code, and then the great ways in which you can adjust the code to suit your own site.

Single Line Scrolling Text Box

This is a great tool for any website!

The code:

<center><marquee behavior="alternate" direction="left" bgcolor="#93877e" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" scrolldelay="50"style="border: solid 2px #2B2917" width="100%"/><font size="3">YOUR TEXT HERE</font></marquee><center>


Now... tweaking the code to suit yourself...

You can adjust the behavior of the text by changing the word "alternate" to one of the following:

  • alternate - bounces back in the other direction once entire message has been seen
  • scroll - Disappears and begins again 
  • slide - Stops at the other side of origin, and continues no further
You can change the direction to either "left" or "right", depending on how you would like the text to flow.

The background colour (or bgcolor, as it is written) is controllable by either changing the "#93877e" code to a colour such as "red" or "black", or if you want to be very specific and use one of the colours in your blog design, you can retrieve the colour code from your advanced template settings or follow a link to the list of hex (Hexadecimal) colour codes here. The text will be your default widget text colour.

You can change the speed of the text scrolling by adding a larger number (like 4 for quicker speed) or a smaller number (like 1 for a slower speed):

scrollamount="HERE".

Font size is set to three but you can change this from any number from 1-7 (browser default is 3).

The border colour is set to white (#FFFFFF) which you can change by the above colour change method.

You can also make the border thicker by increasing the number at 2px

You can adjust the width (trial and error) to the section you place it in. Type in 100% instead of a pixel (px) amount for it to fill the width of the space it is in.

All you need to do now, is type your message in the code where it says YOUR TEXT HERE, and your done!

To insert this code into your widget side bar, do the following:

  1. Go to your blog's "Layout".
  2. Click Add Gadget
  3. Scroll down to HTML/Javascript
  4. In the title box, you can either write something or not...
  5. Post your completed code into the content box and click save!
The next text box is a little more fiddly (complicated) but looks great on a blog.



Scrolling Vertical Text Box


Use this text scroller on your site.

You can have the scroll running up or down, and it pauses when you hover the cursor over it... great for links!

Find out how here!

You can even change the, border and background colours!

You can adjust the scroll speed, the border width and the overall height and width of the scroller to match any sidebar!

Because this is basic HTML, it loads quickly and can be used on any web page. Here is the code and then I will tell you how to tweak the code to suit your own site. It also pauses when you run your cursor over the box.

The all important code:


<!-- Vertical Scrolling Text Start -->


<p style="width: 100px; text-align:left; border: solid 3px #008B00; background: #000000; padding: 6px; line-height: 18px; font-size: “13px"> 

<marquee onmouseover='this.stop();' onmouseout='this.start();' direction="up" height="145" scrollamount="2.5"> 

<center><br />YOUR TEXT HERE.<br /><center>


</marquee></p> <!-- Vertical Scrolling Text End -->

Ok, so now how to tweak the hell out of it!

You can change the border colour and background colour to suit, by adjusting the hex code (link to hex codes), at these points:

border: solid 3px "HERE"
background: "HERE"

You can adjust the speed of the scrolling. scrollamount="HEREThe higher the number, the faster the speed of scroll. Be careful!

You can make the scroll wider or higher to suit the space you need it in by adjusting the relevant height and with figures.

You can adjust the line height to bring lines closer together or further apart, larger number = further apart:

 line-height: HEREpx

Now for the text...

To begin a line of text, and to finish a line of text, use this:

<br />YOUR TEXT HERE<br />

The lines can be as long as you need them, but if you want to create a gap (blank line) between 2 pieces of text you would do this:

<br />YOUR TEXT HERE<br /><br />AND MORE TEXT DOWN HERE<br />

A full stop and a space would be just that, a full stop and a space. 

Keep your text between the <center> marks and it will always be centered.

Once your code is complete, it would look something like mine:

<!-- Vertical Scrolling Text Start -->
<p style="width: 100px; text-align:left; border: solid 3px #008B00; background: #000000; padding: 6px; line-height: 
18px; color: #FFFFFF; font-size: “13px">
<marquee onmouseover='this.stop();' onmouseout='this.start();' direction="up" height="145"  scrollamount="2.5">
<center><br />Use this text scroller on your site.<br /><br />You can have the scroll running up or down, and it pauses when you hover the cursor over it... great for links!<br /><br />Ask me how!<br /><br />You can even change the text, border and background colours!<br /><br /> You can adjust the scroll speed, the border width and the overall height and width of the scroller to match any sidebar!<center>
</center></center></marquee></p>
<!-- Vertical Scrolling Text End -->


Inserting a Link

If you would like to insert a link into this scroll box, simpley add the following line (altered to suit your requirements) as one of your text lines:

<br/><a href="LINK TO WEB PAGE HERE" target="_blank">TEXT TO BE THE LINK HERE</a><br/>

Once you have your complete code, enter it in the usual manner:
  1. Go to your blog's "Layout".
  2. Click Add Gadget
  3. Scroll down to HTML/Javascript
  4. In the title box, you can either write something or not...
  5. Post your completed code into the content box and click save!
You should find both boxes fairly easy to use, but if you have any questions, please comment below.

No comments :

Post a Comment

Facebook Twitter Google + RSS Feed Email Me