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
