Hi, guys! Now, we will try to
add floating spoiler menu. This spoiler menu is difference with others. We
don't need to click the button to display the menu. Just put your cursor on this
menu, and the menu wil be slide out. Want to see the
DEMO? Now, if you wanna add floating spoiler menu into your blog, just
follow the steps below.
1. Log in to your blogger account
2. Go to Design --> Page Elements --> Add Gadget
3. Chose "HTML/Java Script"
4. Add the code below
1. Log in to your blogger account
2. Go to Design --> Page Elements --> Add Gadget
3. Chose "HTML/Java Script"
4. Add the code below
<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>
#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>
Customize:
=> The position of floating spoiler menu
=> The title of this menu
=> The title and link location
5. Click SAVE
=> The position of floating spoiler menu
=> The title of this menu
=> The title and link location
5. Click SAVE
No comments:
Post a Comment