Add Vertical Side Menu In Blogger

guys agar apki koi website/blog hai to yeh artical apki kafi jyada help karega apni website/blog ko attractive banane ke liye. Kyunki aaj main apko sikhaonga ki aap kaise apne website/blog mein vertical side menu add kar sakte hain. vah bhi kafi asana steps follow karke.

How To Add Vertical Side Menu For Blogger

1) Go to Blogger Dashboard → Layout → Add A Gadget.
2) Add a HTML/JavaScript Gadget.
3) Paste below code in it.

<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://1.bp.blogspot.com/-3G-dO6HdK5Q/Xf9YhaWQGJI/AAAAAAAAKYs/63gvfvN-4x8rCKE2IJHz6fUVaJrBlcQGgCLcBGAsYHQ/s1600/tggyan.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>

4) Customize your setting.Find any word click F3 or Ctrl+F.

*Replace it URL HERE withwith your Page URL links.

*RED is your Page name.
class="home"
class="about"
class="services"
class="portfolio"
class="contact"

 5) Save your Widget.