Of course you will want to see how the floating spoiler menu looks on a blog so I have a preview or demo set up for you to have a look.
Also Read - Slide Out Social Bookmarking Gadget With JQuery For Blogger
Floating Spoiler Menu Demo Below
Advantages For Adding This "Floating Spoiler Menu"
How to Add Floating Menu To Blogger Blog
- Go to Blogger Dashboard
- Click On "Design (Layout In The New Blogger Interface) - Page Elements"
- Click On "Add a Gadget" Select "HTML/Javascript" Widget
- Copy The Below Code and Paste It
<style text-type="CSS">
#bdmenu{
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;}
#bdmenu h3{
margin:0;
padding:0;
text-align:center;
cursor:pointer;}
#bdmenu ul{
border-radius:10px;-moz-border-radius:10px;
border:2px solid #FFf;
background-color:#FF0606;
margin:15px 0;
padding:0 15px;}
#bdmenu li{list-style:none;margin:0 0 5px;padding:0;} #bdmenu li a{
color:#000;
text-decoration:none;
font-size:14px;}
#bdmenu li a:hover{
color:#fff;}
#bdmenu:hover{
z-index:5;
height:175px;
</style>
<div id="bdmenu">
<h3>
TITLE</h3>
<ul>
<li><a href="#">BD-1</a></li>
<li><a href="#">BD-2</a></li>
<li><a href="#">BD-3</a></li>
<li><a href="#">BD-4</a></li>
<li><a href="#">BD-5</a></li>
</ul>
</div>
0 comments:
Post a Comment