Installing the result code of CSS Menu Generator

In the previous post Kang Rohman have ever informed about free download tool called CSS Menu Generator, with CSS Menu Generator tool you can easily make a Horizontal Menu, Vertical Menu, Combo-box Menu, Full Down Menu or Drop down menu. However, as a matter of fact, after having been given an ease, all become confused instead and finally most of all asked Kang Rohman about how to install the result code of CSS Menu Generator on blog. Hihihi…all of you are confused, aren’t you? How poor…

For you who still feel confused installing the result code of CSS Menu Generator, this post can be your headache medicine because Kang Rohman will try to examine about how to place the code that is generated by CSS Menu Generator into blog. But at first, I suppose that you have been able to operate CSS Menu Generator.

The code generated by CSS Menu Generator, consist of two parts, that is CSS Code part and the other is HTML code. Look lively at the following images:

Example of CSS code:

<style type="text/css" media="screen">
.pd_menu_01 {float:left; padding:0; margin:0;color: #FFFFFF;background: #0000A0;width:100%; border:solid 1px #004080;clear:both;} /*Color navigation bar normal mode*/
.pd_menu_01 a, .pd_menu_01 a:visited {
font-family:Arial, Helvetica, sans-serif;
font-style:normal;
font-weight:bold;
font-size:12px;
color: #FFFFFF;
background-color: #0000A0;
text-decoration: none;
}
.pd_menu_01 ul {list-style-type:none;padding:0; margin:0;}
.pd_menu_01 ul li {float:left; position:relative; z-index:auto !important /*Non-IE6*/; z-index:1000 /*IE6*/; border-right:solid 1px #004080; }
.pd_menu_01 ul li a {color: #FFFFFF;background: #0000A0;float:none !important /*Non-IE6*/; float:left /*IE-6*/; display:block; height:30px; line-height:30px; padding:0 10px 0 10px; text-decoration:none; }
.pd_menu_01 ul li ul {display:none; border:none;color: #FFFFFF;background: #0000A0;}
.pd_menu_01 ul li:hover a {background-color:#008000; text-decoration:none; color:#FFFF00;} /*Color main cells hovering mode*/
.pd_menu_01 ul li:hover ul {display:block; position:absolute; z-index:999; top:29px; margin-top:1px; left:0;}
.pd_menu_01 ul li:hover ul li a {display:block; width:12em; height:auto; line-height:1.3em; margin-left:-1px; padding:5px 10px 5px 10px; border-left:solid 1px #004080; border-bottom: solid 1px #004080; background-color:#0000FF; color:#FFFFFF;} /*Color subcells normal mode*/
.pd_menu_01 ul li:hover ul li a:hover {background-color:#CA0000; text-decoration:none;color:#FFFF00;} /*Color subcells hovering mode*/
.pd_menu_01 table {position:absolute; top:0; left:0; border-collapse:collapse;color: #FFFFFF;background: #0000A0;}
.pd_menu_01 ul li a:hover {background-color:#008000; text-decoration:none;color:#FFFF00;} /*Color main cells hovering mode*/
.pd_menu_01 ul li a:hover ul {display:block; width:12em; position:absolute; z-index:999; top:29px; left:0; }
.pd_menu_01 ul li a:hover ul li a {display:block; width:12em; height:1px; line-height:1.3em; padding:4px 16px 4px 16px; border-left:solid 1px #004080; border-bottom: solid 1px #004080; background-color:#0000FF; color:#FFFFFF;} /*Color subcells normal mode*/
.pd_menu_01 ul li a:hover ul li a:hover {background-color:#CA0000; text-decoration:none;color:#FFFF00;} /*Color subcells hovering mode*/
</style>

Example of HTML code:

<div class="pd_menu_01 ">
<ul><li><a href="/">Home</a>
</li></ul>
<ul><li><a href="">Blogspot Tutorial</a>
<ul>
<li><a href="" >backing up template</a></li>
<li><a href="" class="lastone">backing up widget</a></li>
</ul>
</li></ul>
<ul><li><a href="">wordpress Tutorial</a>
</li></ul>
</div>

To place the above code into your blog, there are certainly no standard rules because it depends on where you want to place the tab menu position, the other factor is that the template code is different one another. However, as an illustration, Kang Rohman will give you an example, hopefully this makes more clear.

In general usage, a tab menu is usually placed above the header or below the header. Since that you’re suggested to make element above or below the header, Kang Rohman have ever posted such way in “Save Widget Below of the Header ” or in “How to make element below of the header”, please read first.

OK, now I suppose that you have made element exactly below the header, and now we can try to put the result code of CSS Menu Generator. However, firstly, need to know that at CSS code like the example above, some code needs to be deleted, it is at the example I give you in red printed, to be exact, the code is:

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

</style>

One more, please delete the code above.

The following are the steps to put the code of CSS Menu Generator:

Please sign in to blogger with your ID.
Click Layout.
Click Edit HTML tab.
Click Download full template, please make a backup first (important)
Copy your CSS tab menu code (Of course there’s deleted code as above explanation) exactly above the code ]]></b:skin>. Example:
.pd_menu_01 {float:left; padding:0; margin:0;color: #FFFFFF;background: #0000A0;width:100%; border:solid 1px #004080;clear:both;} /*Color navigation bar normal mode*/
.pd_menu_01 a, .pd_menu_01 a:visited {
font-family:Arial, Helvetica, sans-serif;
font-style:normal;
font-weight:bold;
font-size:12px;
color: #FFFFFF;
background-color: #0000A0;
text-decoration: none;
}
.pd_menu_01 ul {list-style-type:none;padding:0; margin:0;}
.pd_menu_01 ul li {float:left; position:relative; z-index:auto !important /*Non-IE6*/; z-index:1000 /*IE6*/; border-right:solid 1px #004080; }
.pd_menu_01 ul li a {color: #FFFFFF;background: #0000A0;float:none !important /*Non-IE6*/; float:left /*IE-6*/; display:block; height:30px; line-height:30px; padding:0 10px 0 10px; text-decoration:none; }
.pd_menu_01 ul li ul {display:none; border:none;color: #FFFFFF;background: #0000A0;}
.pd_menu_01 ul li:hover a {background-color:#008000; text-decoration:none; color:#FFFF00;} /*Color main cells hovering mode*/
.pd_menu_01 ul li:hover ul {display:block; position:absolute; z-index:999; top:29px; margin-top:1px; left:0;}
.pd_menu_01 ul li:hover ul li a {display:block; width:12em; height:auto; line-height:1.3em; margin-left:-1px; padding:5px 10px 5px 10px; border-left:solid 1px #004080; border-bottom: solid 1px #004080; background-color:#0000FF; color:#FFFFFF;} /*Color subcells normal mode*/
.pd_menu_01 ul li:hover ul li a:hover {background-color:#CA0000; text-decoration:none;color:#FFFF00;} /*Color subcells hovering mode*/
.pd_menu_01 table {position:absolute; top:0; left:0; border-collapse:collapse;color: #FFFFFF;background: #0000A0;}
.pd_menu_01 ul li a:hover {background-color:#008000; text-decoration:none;color:#FFFF00;} /*Color main cells hovering mode*/
.pd_menu_01 ul li a:hover ul {display:block; width:12em; position:absolute; z-index:999; top:29px; left:0; }
.pd_menu_01 ul li a:hover ul li a {display:block; width:12em; height:1px; line-height:1.3em; padding:4px 16px 4px 16px; border-left:solid 1px #004080; border-bottom: solid 1px #004080; background-color:#0000FF; color:#FFFFFF;} /*Color subcells normal mode*/
.pd_menu_01 ul li a:hover ul li a:hover {background-color:#CA0000; text-decoration:none;color:#FFFF00;} /*Color subcells hovering mode*/
Click Save Template button
Wait for a while until your template completely saved.
Click Page Element tab.
Click Add a Gadget at element below the header (Of course it’s been made before)
Click the sign plus (+) for HTML/JavaScript.
Copy HTML code of your CSS tab menu, then paste on the column that appears. Example:

<div class="pd_menu_01 ">
<ul><li><a href="/">Home</a>
</li></ul>
<ul><li><a href="">Blogspot Tutorial</a>
<ul>
<li><a href="" >backing up template</a></li>
<li><a href="" class="lastone">backing up widget</a></li>
</ul>
</li></ul>
<ul><li><a href="">wordpress Tutorial</a>
</li></ul>
</div>
Click Save button
Finished. Look at the result.