Home »

add vertical side menu for blogger

Tuesday, July 22, 2014

hi my friends 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

 HOW TO ADD VERTICAL SIDE MENU 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.
<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.




Share On Google+Add This To DeliciousTweet/ReTweet ThisShare on FacebookStumbleUpon ThisDigg This

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.


Did you like Thread ؟
Tags:

1 comment:

  1. Blog27999March 5, 2020 at 11:56 PM

    Your Affiliate Money Printing Machine is waiting -

    And 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

    ReplyDelete