HOW TO ADD VERTICAL SIDE MENU FOR BLOGGER
VIDEO
1) Go to Blogger Dashboard → Layout → Page Elements .
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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7GFi4iiPmyepwXcGdemquQ6m2-Z0gxUzokN9vu5HY0PrD469T_0MmR9mA-pgMycchp9W8JYWZrbhmzchQm5lLFn_oCjWhVh8HW9pnlgLAGk0Okkg9R4d3gOGUbgAnzzMkVSsChlcZIM0/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;
}
</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 with your Page URL links.
* RED is your Page name.
5) Save your Widget.
name is full abdelali tibicht, my country is morocco, care techniques and the development of blogging, my goal through this blog, is to help bloggers develop their blogs through my modest experience gained during my career blogging can.
Follow Me On Twitter Or Facebook
Subscribe to Get Free Blogging Tips And Quality Tutorials Straight in Your Inbox.
Your Affiliate Money Printing Machine is waiting -
ReplyDeleteAnd making profit with it is as easy as 1---2---3!
This is how it works...
STEP 1. Input into the system what affiliate products you want to promote
STEP 2. Add some push button traffic (it LITERALLY takes 2 minutes)
STEP 3. Watch the system explode your list and upsell your affiliate products on it's own!
Do you want to start making profits???
Click here to make money with the system