Cute little Menu list box for sidebars.

Here is a code that you can use to make a cute little content list box on your sidebar. Actually this will save a lot of space in your blogpage or website. You can use this to list your links, contents, categories and trusted links. This can be also modified to represent a site map which will be very useful for your readers to spot contents on your page. If you want to make your own, copy the code following and paste it in the side bar html code part or in the side sidebar code. Edit the code to replace the links with your links.

Copy the code below:
<div class="widget-content"><select onchange="window.open(this.options[this.selectedIndex].value,'_blank')" style="width: 160px;" name="menu" size="1"><option selected="selected" value="http://www.shinescolumn.blogspot.com/">Shine'sColumn<br/><option value="http://www.jaishine.blogspot.com/">ShineOnline<option value="http://www.jaishine.blogspot.com/">ShineOnline<br/><option value="http://www.jaisononline.blogspot.com/">JaisonOnline<br/><option value="http://7X24support.blogspot.com/">24X7TechSupport<br/><option value="http://7X24support.blogspot.com/">ShineOnline<br/><br/></select></div>
To change the width of the menu bar, find the line in the code

style="width: 160px;"

and change the value 160 to any desired width which supports your page settings.
Keep visiting....

How to add a menu bar to my page?

What is the simplest method for adding a menu bar to my page? This is one of the most searched queries about the blog. Here is a simple method for creating a blog menu bar. well i would like to say this will be the simplest method for creating blog menu in the world.

Step 1
Configure your blog so that you can add an element at the top of your after your blog's header element.

To do that---- Click 'Edit Template' in your template tab and search for the key word "Maxwidgets". change the maxwidget value from 1 to 3. And also search for "ShowaddElement" and change the value as "yes". Now save your template and settings. Now you can see that there will be one more provision at the top of your page as the "Add Element" to add an additional element before of after your blog header. Now you have finished your first step. Move to the second step...

Step 2
Select layout from the template tab and click on "add a new element" at the top of the page. select the html/third party code to insert the following code

<style type="text/css"><br /><br />/*Credits: Jaishine */<br />/*URL: http://www.jaishine.blogspot.com */<br /><br />#chromemenu{<br />width: 99%;<br />font-weight: bold;<br />font-size: 90%;<br />}<br /><br />#chromemenu:after{ /*Add margin between menu and rest of content in Firefox*/<br />content: "."; <br />display: block; <br />height: 0; <br />clear: both; <br />visibility: hidden;<br />}<br /><br />#chromemenu ul{<br />border: 1px solid #BBB;<br />width: 100%;<br />background: url(media/chromebg.gif) center center repeat-x;<br />padding: 5px 0;<br />margin: 0;<br />text-align: left; /*set value to "right" for example to align menu to the left of page*/<br />}<br /><br />#chromemenu ul li{<br />display: inline;<br />}<br /><br />#chromemenu ul li a{<br />color: #494949;<br />padding: 5px;<br />margin: 0;<br />text-decoration: none;<br />border-right: 1px solid #DADADA;<br />}<br /><br />#chromemenu ul li a:hover{<br />background: url(media/chromebg2.gif) center center repeat-x;<br />}<br /><br /></style><br /><div id="chromemenu"><br /><ul><br /><li><a href="http://www.jaishine.blogspot.com/">Dynamic Drive</a></li><br /><li><a href="http://www.jaishine.blogspot.com/">CSS Library</a></li><br /><li><a href="http://www.jaishine.blogspot.com/">CSS Drive</a></li><br /><li><a href="http://www.jaishine.blogspot.com/">Gif Optimizer</a></li><br /><li><a href="http://www.jaishine.blogspot.com/">Favicon Creator</a></li><br /><li><a href="http://www.jaishine.blogspot.com/">Button Maker</a></li><br /></ul><br /></div>
----------
here you have finished your second step. Now the third and last step..

Step 3
Download to local drive on your computer and then Upload the same images that are required for the working of our menu to some image hosting sites and get the links. In the code search for a line like "background: url(media/chromebg.gif) center center repeat-x;" and edit the part within the parenthesis with your link to the image location.
Done !!! Now arrange the position of your menu in the layout as you like.Do not forget to edit your links!

Images