Add New Beautiful Blue Vertical Menu to Blogger

Posts RSS

The following drop down menu is made with the CSS, this is the Blue Vertical beautiful and Stylist menu for Blogger. You can also use this vertical menu in any Html Page of that your wish.

Prior to doing anything, if you are using a Template made through Blogger Template Designer, then you should consider doing these changes in the template, otherwise the menu might not be displayed correctly:

From your Blogger's Dashboard, go to Template (make a backup < see the screenshot) > Edit HTML:

How to add the 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 above ]]></b:skin> tag  and Save the Template.

ul#SkgtricksMENU,ul#SkgtricksMENU 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#SkgtricksMENU 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#SkgtricksMENU li:hover>*{
display:block;}
ul#SkgtricksMENU li{
position:relative;display:block;white-space:nowrap;font-size:0;}
ul#SkgtricksMENU li:hover{
z-index:1;}
ul#SkgtricksMENU{
font-size:0;z-index:999;position:relative;display:block;float:right;padding:0 0px 0px;}
ul#SkgtricksMENU>li{
margin:3px 0 0;}
ul#SkgtricksMENU a:active, ul#SkgtricksMENU a:focus{
outline-style:none;}
ul#SkgtricksMENU 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#SkgtricksMENU ul li{
float:none;margin:3px 0 0;}
ul#SkgtricksMENU 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#SkgtricksMENU li:hover>a,ul#SkgtricksMENU 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#SkgtricksMENU 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#SkgtricksMENU ul li:hover>a,ul#SkgtricksMENU ul li a.pressed{
color:#000;text-decoration:none;}
ul#SkgtricksMENU li.topfirst>a{
border-width:0;}
ul#SkgtricksMENU 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="SkgTricksMENU" class="topmenu">
<li class="topfirst"><a href="http://www.Skgtricks.com/>SkgTricks Menu</a></li>
<li class="topmenu"><a href="http://www.Skgtricks.com/>SkgTricks Menu</a></li>
<ul>
<li class="subfirst"><a href="http://www.Skgtricks.com/>SkgTricks Menu</a></li>
<li><a href="http://www.Skgtricks.com/>SkgTricks Menu</a></li>
<li><a href="http://www.Skgtricks.com/>SkgTricks Menu</a></li>
</ul></li>
<li class="topmenu"><a href="http://www.Skgtricks.com/>SkgTricks Menu</a></li>

Customization

- replace the text in blue and Green with your links and titles.
- if you need more tabs, then add a line like this just above 


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