Tuesday, 26 May 2015

how to add vertical side menu for blogger

Today I will give you add vertical side menu for blogger, this widget is beautiful And easy to install add a light on the template blogger and useful at the same time You can see the topic Add Vertical Floating Social Sharing Bar For Blogger


Live Demo

Written explanation   
1) Go to Blogger Dashboard → Layout → Page Elements.
2) Add a HTML/JavaScript Gadget.
3) Paste below code in it.
#navigationMenu li{    list-style:none;    height:39px;    padding:2px;    width:40px;}
#navigationMenu span{    /* Container properties */    width:0;    left:38px;    padding:0;    position:absolute;    overflow:hidden;
    /* Text properties */    font-family:'Myriad Pro',Arial, Helvetica, sans-serif;    font-size:18px;    font-weight:bold;    letter-spacing:0.6px;    white-space:nowrap;    line-height:39px;
    /* CSS3 Transition: */    -webkit-transition: 0.25s;    /*-o-transition: 0.25s;*/
    /* Future proofing (these do not work yet): */    -moz-transition: 0.25s;    transition: 0.25s;}
#navigationMenu a{    background:url('https://lh6.googleusercontent.com/-67QmZtZFlnk/UZ7_UMpfP8I/AAAAAAAAAPc/am8R6V79vf0/h120/Pc+Tools+Tips.png') no-repeat;
    height:39px;    width:38px;    display:block;    position:relative;}
/* General hover styles */
#navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; }#navigationMenu a:hover{    text-decoration:none;
    /* CSS outer glow with the box-shadow property */    -moz-box-shadow:0 0 5px #9ddff5;    -webkit-box-shadow:0 0 5px #9ddff5;    box-shadow:0 0 5px #9ddff5;}
/* Green Button */
#navigationMenu .home {    background-position:0 0;}#navigationMenu .home:hover {    background-position:0 -39px;}#navigationMenu .home span{    background-color:#7da315;    color:#3d4f0c;    text-shadow:1px 1px 0 #99bf31;}
/* Blue Button */
#navigationMenu .about { background-position:-38px 0;}#navigationMenu .about:hover { background-position:-38px -39px;}#navigationMenu .about span{    background-color:#1e8bb4;    color:#223a44;    text-shadow:1px 1px 0 #44a8d0;}
/* Orange Button */
#navigationMenu .services { background-position:-76px 0;}#navigationMenu .services:hover { background-position:-76px -39px;}#navigationMenu .services span{    background-color:#c86c1f;    color:#5a3517;    text-shadow:1px 1px 0 #d28344;}
/* Yellow Button */
#navigationMenu .portfolio { background-position:-114px 0;}#navigationMenu .portfolio:hover{ background-position:-114px -39px;}#navigationMenu .portfolio span{    background-color:#d0a525;    color:#604e18;    text-shadow:1px 1px 0 #d8b54b;}
/* Purple Button */
#navigationMenu .contact { background-position:-152px 0;}#navigationMenu .contact:hover { background-position:-152px -39px;}#navigationMenu .contact span{    background-color:#af1e83;    color:#460f35;    text-shadow:1px 1px 0 #d244a6;}

<div style='position: fixed; top: 40%; left: 0%;'/><ul id="navigationMenu"><li><a class="home" href="URL HERE"><span>Home</span></a>
<a class="about" href="URL HERE"><span>About Us</span></a></li>
<li><a class="services" href="URL HERE"><span>Categories</span></a>
<li><a class="portfolio" href="URL HERE"><span>Disclaimer</span></a></li>
<a class="contact" href="URL HERE"><span>Contact</span></a></li></ul></div>
4) Customize your setting.Find any word click F3 or Ctrl+F.
* Replace it URL HERE with your Page URL links.
RED  is your Page name.
 5) Save your Widget.
Previous Post
Next Post

post written by:

0 Google+:

Please Keep in mind that if there is a link in your comment section it will be considered as spam. Comment with link will be removed instantly.
Comment to get answered or to solve a problem not to spam. Thanks