Adding Floating Spoiler Menu to Blogger

Hi, buddy, I want to show you how to add floating spoiler menu. With this spoiler menu, once your readers/visitors put the cursor on this menu, the menu will slide out. You can add it as a design on your blog to beautify your blog. Now, if you want to add floating spoiler menu into your blog, just follow the steps below.

HOW TO ADD FLOATING SPOILER MENU

1. Log in to your Blogger Dashboard
2. Go to Design --> Page Elements --> Add Gadget
3. Choose "HTML/JavaScript"
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 .5sease-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="URL">MTECH1</a></li>
<li><a href="URL">MTECH2</a></li>
<li><a href="URL">MTECH3</a></li>
<li><a href="URL">MTECH4</a></li>
<li><a href="URL">MTECH5</a></li>
</ul>
</div>

Change the following:
TITLE: Change to your title
URL: Change to your link
MTECH1-5: Change it to your link title

5. Click SAVE

Join the family by like our facebook page:
www.facebook.com/maxkdaveblog
Happy Blogging!

No comments:

Post a Comment