Membuat Floating Spoiler Menu

Print this page
Cara Membuat Floating Spoiler Menu sebagai berikut :

• Log In di http://www.blogger.com/
• Pada Dashbor klik Design
• Klik Add a Gadget dan HTML Java Script
• Copy kode di bawah ini dan paste pada kolom yang tersedia

<style text-type="CSS">
#floatmenu{
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;}
#floatmenu h3{
margin:0;
padding:0;
text-align:center;
cursor:pointer;}
#floatmenu ul{
border-radius:10px;-moz-border-radius:10px;
border:2px solid #FFf;
background-color:#FF0606;
margin:15px 0;
padding:0 15px;}
#floatmenu li{list-style:none;margin:0 0 5px;padding:0;} #bmenu li a{
color:#000;
text-decoration:none;
font-size:14px;}
#floatmenu li a:hover{
color:#fff;}
#floatmenu:hover{
z-index:5;
height:175px;
</style>

<div id="floatmenu">
<h3>TITLE / JUDUL</h3>
<ul>
<li><a href="LINK URL">MENU-1</a></li>
<li><a href="LINK URL">MENU-2</a></li>
<li><a href="LINK URL">MENU-3</a></li>
<li><a href="LINK URL">MENU-4</a></li>
<li><a href="LINK URL">MENU-5</a></li>
</ul>
</div>

 
Keterangan:
Warna Merah pada kode diatas, itu untuk mengatur posisi menu floating.
Bila sobat ingin menaruhnya di bagian kanan atas dengan slide kebawah, ganti kode yang berwarna merah dengan kode berikut:

right:10px;
top: 5px;

Bila ingin berada di bagian kiri bawah, dengan slide kearah atas, ganti dengan kode berikut:

left:10px;
bottom: 5px;

Warna Biru, itu untuk judul menu floating.
Warna Hijau itu adalah link url yang ingin sobat pasang, dan juga untuk nama menu gantilah sesuai dengan judul dari link url tersebut.
Selebihnya bisa sobat edit-edit sendiri sesuai keinginan sobat.

5. Bila sudah, jangan lupa klik Simpan / Save.

Artikel Terkait