Floating Vertical Side Menu Bar

Today we will make a stylish sliding vertical menu bar for blogspot.

This menu bar created with CSS3! And with only one image! It's very simple to create but looking very stylish.

Step 1: Go to Blogger >> Blogger Dashboard >> Layout >> Ad a Gadget >> choose 'HTML/JavaScript'.

Step 2: Paste the below code in HTML box.

<style>

#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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvAxv7MkCOWyNz4QCoTkI927xCND2kcoTATL6Qn0rPG7a8DJMBdByr9Ou80wFvG-Ik-3EKu_ATyBUC9BnT_BL27DYq7150Vltu7uyw59Ex2yXtzP_eA3rnN4Znsiitd-P_Lv-9CMoUW5w/s1600/ver.jpg') 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;
}

</style>


<div style='position: fixed; top: 40%; left: 0%;'/>
<ul id="navigationMenu">
<li>
<a class="home" href="URL HERE">
<span>Home</span>
</a>

</li>
<li>

<a class="about" href="URL HERE">
<span>About Us</span>
</a>
</li>

<li>
<a class="services" href="URL HERE">
<span>Categories</span>
</a>

</li>

<li>
<a class="portfolio" href="URL HERE">
<span>Disclaimer</span>
</a>
</li>

<li>

<a class="contact" href="URL HERE">
<span>Contact</span>
</a>
</li>
</ul>
</div>  

Step 3: Find any customizable word from that css code (Home,about,services etc) to edit by pressing 'Ctrl + F' .
Step 4: Replace 'URL HERE' with ur page link.

You are DONE. Save your widget. our stylish sliding vertical menu created.
Now what about Image's Icon. Are you using those icons in your blogspot menu? Obviously not. Then how to change those icons? Ok, I'll say it.
1st open this image link (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvAxv7MkCOWyNz4QCoTkI927xCND2kcoTATL6Qn0rPG7a8DJMBdByr9Ou80wFvG-Ik-3EKu_ATyBUC9BnT_BL27DYq7150Vltu7uyw59Ex2yXtzP_eA3rnN4Znsiitd-P_Lv-9CMoUW5w/s1600/ver.jpg) I take this link from that css. After open you will see your menu bar's icon. Ups and Downs are same and total 10 cubes. similarly you can say 5 icons. Save it to your PC.
Open your image by any editing software where you can edit it.

(Eg: photoshop, paint)

Now color those cubes from the image which color you like. And remove those images icons. Put ur icon in there. 32x32 icon would be great for putting on those cubes.

Remember, Ur icon should be same as up as down.

Save it. Upload it anywhere in online. Copy the exact link where you upload. Now replace the link from 1st image link. You will find it from those vertical menu's code. Easily you will find the image link. Or search it by pressing Ctrl + F . Save it again.

Ur DONE............
I know u have more categories than mine :p . I will update soon 'how to add more cube ' as soon as possible.

For any problem contact with me in Facebook