Add Floating Spoiler Menu To Blogger

Adding Floating Spoler Menu To Blogger makes The blog More Navigable and Easy.You May Have Seen Many Floating Menu for Bloggers,But This Menu is Awesome .In This Menu You Have not Have To Click The Button To Float The Menu.Whoever When Near The Mouse Cursor it Slides Very Smoothly .So This is The Great Difference B/w Other Floating Menus and This one.

...................................................................................................................................................................

 Floating Spoiler Menu Live Demo.

...................................................................................................................................................................

Live Demo

...................................................................................................................................................................

How To Add Floating Spoiler Menu To Blogger

...................................................................................................................................................................

Now How To Add Floating Spoiler Menu To Blogger.Follow The Below Simple Steps.

1) Go To Blogger.com

2) Now Blogger Dashboard.

3) Click On Layout/Design.

4) Click On Add a Widget.

5) Select HTML/JavaScript.

6) Paste The Below Script/Code into The Box.

<style text-type="CSS">#bmenu{position:fixed;right:5px;center:0px;background-color:#000;border-radius:10px;-moz-border-radius:10px;border:1px solid #FFF;width:202px;height:20px;color:#FF0606;transition:all .5s ease-in;-moz-transition:all .5s ease-in;-webkit-transition:all .5s ease-in;-o-transition:all .5s ease-in;z-index:3;overflow:hidden;padding:9px 15px 10px;}
#bmenu h3{margin:0;padding:0;text-align:center;cursor:pointer;}
#bmenu ul{border-radius:10px;-moz-border-radius:10px;border:2px solid #FFf;background-color:#FF0606;margin:15px 0;padding:0 15px;}
#bmenu li{list-style:none;margin:0 0 5px;padding:0;} #bmenu li a{color:#000;text-decoration:none;font-size:14px;}
#bmenu li a:hover{color:#fff;}
#bmenu:hover{z-index:5;height:175px;</style>
<div id="bmenu"><h3>TITLE</h3><ul><li><a href="#">FBT-1</a></li><li><a href="#">FBT-2</a></li><li><a href="#">FBT-3</a></li><li><a href="#">FBT-4</a></li><li><a href="#">FBT-5</a></li></ul></div>

................................................................................................................................................................. 
Customization/Changing. 
.................................................................................................................................................................
=> The Position Of Floating Spoiler Menu(means The Red Color Shows Size and Position).
=> The Title Of This menu(means The Green Color Indicates The Title Name You can Change it xD)
=> The Title and Link location ( Put Your Own Desire Links Over There).

Like Us.... Receive updates on your Facebook wall!!!!

If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to my regular Email Updates. Subscribe Now!

Kindly Bookmark and Share it: