HOW TO ADD PUSH TO SLIDE ATTRACTIVE CSS3 MENU FOR BLOGGER ?

Push To Slide Css3 Attractive Menu For Blogger

Hello every body i am very excited today because i have something bombastic to share with all of my readers and bloggers out there.It's been a long time that i have not shared any widget or plugin regarding Blogger or WordPress so after a whole day tweaking with codes so the widget work like a rocket for everyone out there.Today the widget that i am sharing with you is very well unique and awesome.I have named it push to slide menu because the menu will not be shown up on your home page until you pushed the button for menu and it is also sticky it will move with your scroll till the end of your page.You can set it the way you like most, either it slides from top,bottom,left,right which suits your blog the most and you can put the push button where ever you
want on your blog.This is totally light weight and have nothing to do with your blog load speed or anything like that.

DEMO

Click on the buttons placed on the right sidebar and test it !

Benefits Of Adding This Attractive Menu To Your Blog

Will surely enhance your blog beauty and performance as well.
Visitors are usually attracted when they see something extra-ordinary on your blog.
The menu is sticky and totally cluster free so no compromise on your blog speed
The most important thing the widget is totally free of cost and you can also share this widget on your blog for your readers but make sure you link back to this original tutorial.

How To Add Push To Slide Css3 Menu To Blogger ?

1: First of all you need to add java script file in the head section of your blog.Go to Template >> Edit Html >> Press Ctrl+F and find <Head> and just after it place this code.

<script src="https://slidingmenu.googlecode.com/files/modernizr.custom.js"></script>

2: The in the search box search for </body> and place this code just before/above it and hit save template button.

<script src="https://slidingmenu.googlecode.com/files/classie.js"></script>
<script>
var menuLeft = document.getElementById( 'cbp-spmenu-s1' ),
menuRight = document.getElementById( 'cbp-spmenu-s2' ),
menuTop = document.getElementById( 'cbp-spmenu-s3' ),
menuBottom = document.getElementById( 'cbp-spmenu-s4' ),
showLeft = document.getElementById( 'showLeft' ),
showRight = document.getElementById( 'showRight' ),
showTop = document.getElementById( 'showTop' ),
showBottom = document.getElementById( 'showBottom' ),
showLeftPush = document.getElementById( 'showLeftPush' ),
showRightPush = document.getElementById( 'showRightPush' ),
body = document.body;
showLeft.onclick = function() {
classie.toggle( this, 'active' );
classie.toggle( menuLeft, 'cbp-spmenu-open' );
disableOther( 'showLeft' );
};
showRight.onclick = function() {
classie.toggle( this, 'active' );
classie.toggle( menuRight, 'cbp-spmenu-open' );
disableOther( 'showRight' );
};
showTop.onclick = function() {
classie.toggle( this, 'active' );
classie.toggle( menuTop, 'cbp-spmenu-open' );
disableOther( 'showTop' );
};
showBottom.onclick = function() {
classie.toggle( this, 'active' );
classie.toggle( menuBottom, 'cbp-spmenu-open' );
disableOther( 'showBottom' );
};
</script>

3: Go to templates and this time click on Customize >> Advanced >> Add css and paste this whole css code inside the css box.

Css Coding

Copy all the coding and paste it into the css box in customization tab.

Left Slide Menu

1: If you want to add push to slide menu from left to right then go to Templates >> Edit Html >> Press Ctrl+F and find <body> and just after it place this code.Change the red color hash signs with the url you want the visitor to be redirected when clicked in menu.

<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s1">
<h3>Menu</h3>
<a href="#">Technology</a>
<a href="#">Blogging News</a>
<a href="#">Pakistani Blogger</a>
<a href="#">Seo</a>
<a href="#">Online Earning</a>
<a href="#">Google</a>
</nav>

2: Now where you want to add the push button place this code and save the Html Widget In Your Blogger Layout.

<div class="main">
<section>

<button id="showLeft">Show/Hide Left Slide Menu</button>
</section>
</div>

Right Slide Menu

1: If you want to add push to slide menu from right to left then go to Templates >> Edit Html >> Press Ctrl+F and find <body> and just after it place this code.Change the red color hash signs with the url you want the visitor to be redirected when clicked in menu.

<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-right" id="cbp-spmenu-s2">
<h3>Menu</h3>
<a href="#">Celery seakale</a>
<a href="#">Dulse daikon</a>
<a href="#">Zucchini garlic</a>
<a href="#">Catsear azuki bean</a>
<a href="#">Dandelion bunya</a>
<a href="#">Rutabaga</a>
</nav>

2: Now where you want to add the push button place this code and save the Html Widget In Your Blogger Layout.

<div class="main">
<section>

<button id="showRight">Show/Hide Right Slide Menu</button></section></div>

Bottom Slide Menu

<nav class="cbp-spmenu cbp-spmenu-horizontal cbp-spmenu-bottom" id="cbp-spmenu-s4">
<h3>Menu</h3>
<a href="#">Celery seakale</a>
<a href="#">Dulse daikon</a>
<a href="#">Zucchini garlic</a>
<a href="#">Catsear azuki bean</a>
<a href="#">Dandelion bunya</a>
<a href="#">Rutabaga</a>
<a href="#">Celery seakale</a>
<a href="#">Dulse daikon</a>
<a href="#">Zucchini garlic</a>
<a href="#">Catsear azuki bean</a>
<a href="#">Dandelion bunya</a>
<a href="#">Rutabaga</a>
</nav>

2: Now where you want to add the push button place this code and save the Html Widget In Your Blogger Layout.

<div class="main">
<section>

<button id="showBottom">Show/Hide Bottom Slide Menu</button>
</section>
</div>

Color Customization

Main Push Button

The 1: Numbered Button is the button when the menu is active and showing on the page and 2: numbered button is the button when the menu is not active and is in the slide.So to make this button to match your blog colors you have to do simple and easy code customization.

1: To change the active color of the button when the menu is active find

.main > section button.active { background: #A7D41F;

Change #A7D41F with your desired color you can chose color of your choice here.

2: To change the un active color of the push button search for and change the red color code with your desired html color.

.main > section button { border: none; background: #8baf1c; color: #fff; padding: 1.5em; display: block; width: 100%; cursor: pointer; margin: 10px 0; font-size: 0.8em;

Menu Bar

In this section you will only customize top area of the menu bar the color of the text and background color.You have to search for this code in the css code you have pasted in the css box in customization tab in your blogger.

.cbp-spmenu h3 { color: #EEEEEE; font-size: 1.9em; padding: 20px; margin: 0; font-weight: 300; background: #8baf1c;}

Change the orange code with the desired color which you want to be shown and orange code is for text and red code is for background color I have green you can add what ever you want.

In this section you will only customize the lower area of the menu hover effect and the effect when clicked on any menu tab.You have to search for this code in the css code you have added in the css box in the customization tab in your blogger.

.cbp-spmenu a:hover {
background: #A7D41F;

Change the red code with your desired color this will change the hover effect color when mouse is hovered on any of the tab.

a:hover {
color: #000;}

Change the red code with the desired color you want this will change the color of the text when mouse will be hovered on any of the tab the default color is black.

To change the color of the border lines between menu tabs search for this code and change it with your desire.

.cbp-spmenu-vertical a { border-bottom: 1px solid #C1D093; padding: 1em;}

To Change the overall background color of the menu of the lower part serach for this code in the css code and change the red code with your desired color.

.cbp-spmenu { background: #8baf1c; position: fixed;}

Author's Desk > > >

Quite Long post with deep briefing and i am 100% sure that my efforts will be like gold dipped in frosting for you.This menu will enhance your blog beauty,authority and exposure as well.So fell free to comment and drop your precious thoughts.I will be always there to help you in any kind you want.Don`t forget to subscribe by email to get updated by more these kind of awesome widgets and tutorials till then stay blessed and happy blogging !

HOW TO ADD PUSH TO SLIDE ATTRACTIVE CSS3 MENU FOR BLOGGER ?

Benefits Of Adding This Attractive Menu To Your Blog