Add a simple Pages widget with mouseover background colour effect to your blog

Ever wondered how to improve the look of a Pages widget? Simply remove the widget Blogger provides us and make your own. I decided to make my own widget for another blog, going on the Facebook look-alike theme. It has your basic links but if you put your mouse over the links the background colour changes as well as the link colour. It is all thrown into a table, and each link has it's own icon. Here's what it looks like (I gave it a border to make the table more visible in this example.):

Home

Info

Notes

Gallery

Friends

Watch a movie

Animated gifs

Avatars - Aliens

Avatars - UFOs

Faceblog Help

All the code below can either be placed directly into a HTML/Javascript widget and placed at the very top (or wherever you want to put it) of your sidebar column or it can be directly added to your template in the "edit html" section of the design tab. If you add the code to the "edit html" section of your template, make sure you add it to the very top of the sidebar column, just after the first line of code that states where the sidebar column begins. Alternatively, you can also place the code directly underneath the closing b:section for the entire column; that is to say between the closing /b:section and the closing /div for that side column.

<table border="0" cellpadding="1" cellspacing-bottom="2" width="110%">

<tr><td class="btnav" onmouseover="style.backgroundColor='#ff0000';"

onmouseout="style.backgroundColor='#ffffff'" width="100%"><img align="left" height="20" src="http://img21.imageshack.us/img21/8874/postwallicone967396.png" width="20"/><a href="#">Home</a></td></tr>

<tr><td class="btnav"

onmouseover="style.backgroundColor='#ff6600';"

onmouseout="style.backgroundColor='#ffffff'" width="100%"><img align="left" height="20" src="http://img714.imageshack.us/img714/56/infoicon.png" width="20"/><a href="#">Info</a></td></tr>

<tr><td class="btnav" onmouseover="style.backgroundColor='#00ff00';" onmouseout="style.backgroundColor='#ffffff'" width="100%"><img align="left" height="20" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZHq6EfcRbGow0u15-XTQFGuuRee2iO51eLnGhJjs2oHqjkFa3fPcswzriSShcWQpOWClN9nIBM3bcJYI3xc2l9ixQvCDXK_XS7ErL75d4YC5EJIdk66DebSMSqZAfXdS5v1VAEycWnLDc/s1600/1302325189_TextEdit.png" width="18"/><a href="#">Notes</a></td></tr>

<tr><td class="btnav"

onmouseover="style.backgroundColor='#1f75fe';"

onmouseout="style.backgroundColor='#ffffff'" width="100%"><img align="left" height="20" src="http://img24.imageshack.us/img24/2038/videoicont.jpg" width="19"/><a href="#">Gallery</a></td></tr>

<tr><td class="btnav"

onmouseover="style.backgroundColor='#7366bd';"

onmouseout="style.backgroundColor='#ffffff'" width="100%"><img align="left" height="20" src="http://img717.imageshack.us/img717/2828/usersfriendsicone647912.png" width="20"/><a href="#">Friends</a></td></tr>

<tr><td class="btnav"

onmouseover="style.backgroundColor='#8F509D';"

onmouseout="style.backgroundColor='#ffffff'" width="100%"><img align="left" height="20" src="http://www.animated-gifs.eu/emoticons-hobbies/0026.gif" width="20"/><a href="#">&#160;&#160;Watch a movie</a></td></tr>

<tr><td class="btnav"

onmouseover="style.backgroundColor='#cc6666';" onmouseout="style.backgroundColor='#ffffff'" width="100%"><img align="left" height="20" src="http://bestanimations.com/Sci-Fi/UFOs/UFO-03-june.gif" width="24"/><a href="#">&#160;Animated gifs</a></td></tr>

<tr><td class="btnav"

onmouseover="style.backgroundColor='#cc6666';" onmouseout="style.backgroundColor='#ffffff'" width="100%"><img align="left" height="20" src="http://a4.rimg.info/8769e59f8eb7ce17ebdfd9e5a936a82a.gif" width="24"/><a href="#">&#160;Avatars - Aliens</a></td></tr>

<tr><td class="btnav"

onmouseover="style.backgroundColor='#cc6666';" onmouseout="style.backgroundColor='#ffffff'" width="100%"><img align="left" height="20" src="http://www.ufoevolution.com/forums/customavatars/avatar43_3.gif" width="24"/><a href="#">Avatars - UFOs</a></td></tr>

<tr><td class="btnav"

onmouseover="style.backgroundColor='#eceff5';" onmouseout="style.backgroundColor='#ffffff'" width="100%"><img align="left" height="20" src="http://img109.imageshack.us/img109/768/imagescaqragca.jpg" width="24"/><a href="#">&#160;Faceblog Help</a></td></tr>

</table>

In the code for the Pages widget each icon image url is in red. In blue is a hash # symbol. The # symbol you simply replace with your own link. You can add whatever icons you want to add, and whatever links you want to add. This is a very simple, but effective, Pages widget that you can colour to your pleasing.

Okay, the links aren't perfectly aligned in this example. You can simply align the links by adding &#160; as many times as you need, before the beginning of the text link opening bracket. For example:

&#160;&#160;&#160;<a href="#">Info</a>

....Then remove all examples of &#160; that are to the left of the link text in the code I have given you for the entire Pages widget.

By placing the &#160; before the link (outside the link's code) you will not get that annoying underline to the left of the link. Here is what I mean:

   Info

Enjoy!