Add New Beautiful Blue Vertical Menu to Blogger

This is a another CSS based Blue Vertical beautiful and Stylist menu for Blogger Blog .you can also use this menu in any Html Sites of your wish. in our Previous past we have already posted about many other awesome menu for Blogger .and here is a another brand new menu for you .

How to add this Blue Vertical Menu to Blogger Blogs

Follow my below simple steps to add it your blogger Blog .

• Login to Blogger  >> Click on drop down menu >>then select "Template".
• Now you will see  "EDIT HTML" Button ,Click on it >>  and then click Proceed button .
• Now find this tag ]]></b:skin> by using CTRL + F 
• Paste below code Just Before/above ]]></b:skin> tag  and Save the Template.

ul#EgyTricksMENU,ul#EgyTricksMENU ul{
margin:0;list-style:none;padding:0;background-color:#424542;border-width:2px;border-style:solid;border-color:#FFF;-moz-border-radius:7px;-webkit-border-radius:7px;border-radius:7px;}
ul#EgyTricksMENU ul{
display:none;position:absolute;top:0;-moz-box-shadow:3.5px 3.5px 5px #000000;-webkit-box-shadow:3.5px 3.5px 5px #000000;box-shadow:3.5px 3.5px 5px #000000;border-radius:7px;-moz-border-radius:7px;-webkit-border-radius:7px;padding:0 0px 0px;}
ul#EgyTricksMENU li:hover>*{
display:block;}
ul#EgyTricksMENU li{
position:relative;display:block;white-space:nowrap;font-size:0;}
ul#EgyTricksMENU li:hover{
z-index:1;}
ul#EgyTricksMENU{
font-size:0;z-index:999;position:relative;display:block;float:right;padding:0 0px 0px;}
ul#EgyTricksMENU>li{
margin:3px 0 0;}
ul#EgyTricksMENU a:active, ul#EgyTricksMENU a:focus{
outline-style:none;}
ul#EgyTricksMENU a{
display:block;vertical-align:middle;text-align:center;;text-decoration:none;font:14px Trebuchet MS;color:#FFF;cursor:pointer;padding:10px;background-color:#424542;background-image:none;background-repeat:repeat;border-width:1px 0 0 0;border-style:solid;border-color:#424542;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;}
ul#EgyTricksMENU ul li{
float:none;margin:3px 0 0;}
ul#EgyTricksMENU ul a{
text-align:center;;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;-moz-transition:all 0.5s;-webkit-transition:all 0.5s;-o-transition:all 0.5s;color:#FFF;text-decoration:none;}
ul#EgyTricksMENU li:hover>a,ul#EgyTricksMENU li a.pressed{
background-color:#00aaff;border-color:#424542;border-style:solid;color:#000;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABkCAYAAABHLFpgAAAAAXNSR0IArs4c6QAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oJGA8fEDx90S8AAABXSURBVBjTxY1BDoAgDASHRV/vhwHRemtSAsabl8l0t2kxs0NAF3AKqAJKtLLKasyaj82PdgGXgFuACZCA7Ngc+8S2uDfYAEXkybehTT6mFd7bDyDav3gA6ogaOZY0Sc8AAAAASUVORK5CYII=");text-decoration:none;}
ul#EgyTricksMENU span{
display:block;overflow:visible;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA+gAAAAFCAYAAADWkcYlAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9wBFwsaEPhJNTwAAABfSURBVHja7dqxDQAxDAMxOfvv7G9iIAt80pAjqDtA1d3ZOkmqqgIAAAD8qneQT4evM86TiHMAAAC4YMJ8Qn2JcwAAAHgf6esI8zYNAAAA3HPe3OfiLtIBAADgUZwnyQeivhwKKt7BhQAAAABJRU5ErkJggg==");background-position:left center;background-repeat:no-repeat;}
ul#EgyTricksMENU ul li:hover>a,ul#EgyTricksMENU ul li a.pressed{
color:#000;text-decoration:none;}
ul#EgyTricksMENU li.topfirst>a{
border-width:0;}
ul#EgyTricksMENU li.subfirst>a{
border-width:0;}

MENU CODE

Now we can  use below code to add menu any where we want. you can add it as HTML WIDGET in blogger layout,But i will  Recommend You to Replace this menu code in your Blogger Template with already existing one., or add below code before or after already existing one menu code.

• Login to Blogger  >> Click on drop down >> Now select "Layout"
• Now you will see "Add a Gadget" button click any of them
• A new window will open .Scroll some down until you see " HTML/JavaScript" Button.
• Click on " HTML/JavaScript" Button ,leave the Title blank and Put the below code in Content and then after click on save button.

<ul id="EgyTricksMENU" class="topmenu">
<li class="topfirst"><a href="http://www.egytricks.com/" ">EgyTricks Menu</a></li>
<li class="topmenu"><a href="http://www.egytricks.com/" "><span>EgyTricks Menu</span></a>
<ul>
<li class="subfirst"><a href="http://www.egytricks.com/">EgyTricks Menu</a></li>
<li><a href="http://www.egytricks.com/">EgyTricks Menu</a></li>
<li><a href="http://www.egytricks.com/">EgyTricks Menu</a></li>
</ul></li>
<li class="topmenu"><a href="http://www.egytricks.com/" ">EgyTricks Menu</a></li>
</ul>

Customization

• Replace all http://www.egytricks.com/  with your URL and EgyTricks Menu with yours URL Text in above code.

Now all done if have any question or Problem according to this Menu then Comment below