WebSong Designs

TIPS AND TRICKS FOR YOUR
WEB PAGE OR BLOG

NEW! The first two rows below are brand new tags/tips added for your web-designing pleasure.

NOTE: There is a special page for blogger-specific tips including the login script everyone keeps asking about. Visit Blogger Tips and Tricks for those codes.

I've added this page of helpful HTML and CSS tips and tricks for use on your page or blog. Below is a menu for navigation. Simply view the sample, highlight the html provided, and paste. Some of the code does include CSS. Check with your webhost to see if it allows this code (most do).

Index of Tips:

Yahoo Messenger Status Box  | Capital Letter in Color Block
Background Color Fade|   |   Spam Blocker Email Link
Mouse-Over Color Change   | Mouse-Over Popup Link   |   Bookmark Script
Remove Underlines from Links   |  Show HTML (turn off code)   |   Float a Quote to One Side
Image Alignment with Text    |    Image Alignment with Paragraph
Dotted Border Box   |    Text Over an Image    |    Glowing Text (CSS)
Shadow Text Boxed    |    Scroll Bar Color Change    |    Internal Links/Jumps (like these)

Yahoo Status Box:

To get a box on your site that shows your Yahoo Instant Messenger status and some profile information, use the following code:

<table width="200" border="1" cellspacing="0" bordercolor="#000000">
<tr> <td height="125" bgcolor="#EADF93">
<div align="center"><font face=Geneva size=2> <b><font face="Geneva, Arial, Helvetica, san-serif">YOUR NAME HERE<br>
yahoo id: YAHOO ID HERE</font></b><br><br>
<font face="Geneva, Arial, Helvetica, san-serif"><a href="http://edit.yahoo.com/config/send_webmesg?.target=[your_yahoo_id]&.src=pg">
<img border=2 src="http://opi.yahoo.com/online?u=[your_yahoo_id]&m=g&t=2"></a><br>
<a href="http://www.yoursite.com"> HOME</a><br>
<a href="http://yourblog.blogspot.com">BLOG</a></font></font></div>
</td> </tr> </table>

Edit the Name, ID, and the username in the brackets. Feel free to edit the web links or eliminate them. I have done the background in yellow, with a black border, but you can change the table to any color or size you like without spoiling the code. Your box will look like mine, shown below:

Chrissy
yahoo id: shandalear65

My Home Page
My Blog

Capital Letter in a Color Block:

To get color block with a cap alongside text, use the following code:

<span style="margin-right:6px;margin-top:5px;float:left;background:red;border:1px solid black;font-size:60px;line-height:55px;padding-top:2px;padding-right:5px;font-family:verdana;">B</span>lack inside, red outside was my choice, but you could change the colors to anything. Add text between the /span and div style tags to float on the right. the font sise and line height tags can be edited to change the size of the color block.<div style="clear:both;"><br></div>

It will look like this:

Black inside, red outside was my choice, but you could change the colors to anything. Add text between the /span and div style tags to float on the right. the font size and line height tags can be edited to change the size of the color block.

Color Fade :

To get a table to show a cool color fade, use the following script inside the <table> tag:

style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#C0CFE2', startColorstr='#FFFFFF', gradientType='0');"

For example, the following code:

<table width="200" border="1" cellspacing="0" style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#C0CFE2', startColorstr='#FFFFFF', gradientType='0');" height="65" bordercolor="#000066">
<tr>
<td><font face="Geneva, Arial, Helvetica, san-serif" size="2">Here
I have used white to blue for fade.</font></td>
</tr>
</table>

Produces this table:

Here I have used white to blue for fade.

Want your whole page to have a color fade? Insert the following code into your BODY tags:

<body style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#C0CFE2', startColorstr='#FFFFFF', gradientType='0');">

Spam Block Code for Email:

Email links can be harvested by Spam robots, which is a huge pain in the behind. You can protect yourself from phishing and spambots by altering the code in your email links. Instead of displaying the usual --mailto:you@yourdomain.com--use the following code:

<A HREF="mailto:you@yourdomain.com">Contact Us</A>

It will look like this:

Contact Us

When clicked on, it will display your email address correctly.

Color Change in Links or Regular Text:

To have your links change colors when the mouse rolls over them (like on this page), insert the following code into your HEAD tags between the STYLE TYPE tags:

<style type="text/css">  </style>

*NOTE: if you have more than one style type, do not repeat the <style type="text/css"></style> tags.

To have plain text on your site (not a link) show a rollover color, use the following code:

<b onmouseout="this.style.color = 'black';" onmouseover="this.style.color
= 'red';" align="justify"> Put the text your want to change on mouse-over in between these tags. </b>

Put the text your want to change on mouse-over in between these tags.

Popup Message on Links on Mouse-Over:

If you would like to show a small popup box with information when the link under the cursor, use this html tag:

<A HREF="http://www.yourdomain.com/" title="Visit My Page"><b>My Link</b></a>

It will look like this:

My Link

Bookmarking Script :

Want your visitors to have a quick way to bookmark your page? Insert the following tag:

Click <a href="javascript:window.external.AddFavorite(' ', 'YOUR MESSAGE')">here</a> to add this site to your bookmarks (Internet Explorer only).

It will look like this:

Click here to add this site to your bookmarks (Internet Explorer only).

Turn OFF Underlines in Links:

You have probably noticed that I don't have underlined links, which is the default way to show them. I dislike the underlined text on the page, so I change the CSS style and remove the tag, then I make the text bold INSIDE the link tag. It looks like this in your code:

<a href="http://www.websongdesigns.com" style="TEXT-DECORATION: NONE"><b>WebSong</b></a>

And like this on your page:

WebSong

SHOW html:

Within the HTML example, first replace the "&" character with "&" everywhere it occurs. Then replace the "<" character with "<" and the ">" character with ">" in the same way.

So if you wanted to show this:

<a href="http://www.websongdesigns.com">

Insert this in your html:

<a href="http://www.websongdesigns.com">

Float a quote left or right:

"YOUR QUOTE GOES HERE. The text you want to float to the left goes here. "

Everything else gets typed in here, between the <p> and </p> beneath (as you see it in the html). You can certainly adjust colors, float margin, font size, and other things for looks on your own page. It looks best if the two sections of text are different in color, size, or formatting. Experiment!

<p style="margin-top:0px;margin-bottom:3px;width:150px;float:left;color:saddlebrown;font-weight:bold;padding-right:15px; text-align:justify;">
"YOUR QUOTE GOES HERE.
The text you want to float to the left
goes here. "
</p>

<p>
Everything else gets typed in here, between the <p> and </p> beneath (as you see it in the html). You can certainly adjust colors, float margin, font size, and other things for looks on your own page. It looks best if the two sections of text are different in color, size, or formatting. Experiment!
</p>

Image Alignment:

To get an image with text aligned beside it, use the following HTML.

<span style="float:left;"><img src="yourimage.gif"></span>YOUR TEXT GOES HERE
<div style="clear:both;"><br></div>

Image Aligned with Paragraph:

If you wanted to type a long paragraph rather than a line or two of text and have the image, such as this one of Max, aligned in a float, you would use this code. Naturally this is only necessary if you have a large block of text, or if you write really run-on sentences... or if you are trying to demonstrate something using a big paragraph but don't have a big paragraph's worth of crap to say. The code appears below.

<span style="margin:20px;float:left;"><img src="yourimage.gif"></span>
YOUR TEXT GOES HERE
<div style="clear:both;"></div>

Box with DOTTED border:

LOOK AT MY DOTS!

<span style="text-align:left;text-indent: 0em;line-height:12pt;font-family: geneva;font-weight: normal;font-size: 10pt;color:aqua;background-color:red;border-width:thin;border-style:dotted;border-color:#FF3EFF;width: 200px;padding:10px;">LOOK AT MY DOTS! </SPAN>

Text OVER an image (CSS):

WebSong
Tips

You can adjust the color and the margins, but for this small image of my dog, Max, I used the following code:

<img src="yourimage.gif"><div style="position: relative;top: -125px;font: 10pt Geneva;font-weight:bold;color: #42FFFF;margin-left: 5px;">WebSong<br>Tips</div>

Glowing Text:

YOUR TEXT GOES HERE

For a box with transparent borders (so your text looks "unboxed") insert the code below:

<TABLE WIDTH="300" STYLE="filter:glow(color='red')"><TR><TD><big>YOUR TEXT GOES HERE</big></TD></TR></TABLE>

Box with Shadow Filter:

TEXT HERE

To get a box like the one above with a bright shadow, insert the following code and edit the size and colors:

<table border="1" bordercolor="#999999"
bgcolor="white"cellpadding="10"gt;
<tr><td style="filter:shadow(color:aqua);text-align:center;"gt;
<span style="color:#000000; font-size:9pt;font-weight:bold;">
TEXT HERE
</span></td></tr></table>

Scroll BAR color change:

Since this particular bit of code shows in the scroll bar, you'll have to examine mine (on your right) and wing it. Just change the "your_code_here" below to the color code you want. (Ex: #000000 for black, #FFFFFF for white, etc.) Make sure you copy everything, including the tag at the bottom.

Insert this between the after the </head> tag, before the <body> tag in your HTML:

<STYLE type="text/css">


</STYLE>

Internal Page Jump Links (Hyperlinks):

If you would like to link from one part of your web site to another on the same page (for instance, from the top to a section of text at the bottom), the code is super-simple.

The link to the place in your page should be coded like this:

<a href="#top">TOP</a>

Now, go to the place you want this link to take you (such as the top of your page), and insert the following code:

<a name=top>

NOTE: You don't need to close the tag where your target is, just the initial link.

So the link would look like this:

TOP <-- click to return to the top of this page (where I have inserted the "name" tag)