Tutorial Belajar Blog | Belajar blog - Floating Spolier Menu adalah salah satu fitur blog yang menampilkan menu blog dengan tampilan melayang dan dalam bentuk spoiler. Kalau Floating Spolier Menu dibayangi crusor, maka Floating Spolier Menu secara otomatis terbuka. Mungkin sobat blogger jarang menemukan blog yang memasang menu blog-nya dengan tampilan menu seperti ini, Floating Spolier Menu bisa dijadikan salah satu solusi pengganti menu horizontal atau menu vertikal. Fitur blog yang keren ini saya dapatkan dari salah satu blog yang berbahasa Inggris, Tapi maaf, saya lupa alamat blog tersebut.
Screenshot
Cara buat Floating Spolier 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;
top: 5px;
Bila ingin berada di bagian kiri bawah, dengan slide kearah atas, ganti dengan kode berikut:
left:10px;
bottom: 5px;
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.
Begitulah kiranya Cara Membuat Floating Spoiler Menu Di Blog , semoga bermanfaat.
Sumber: full-tricks.blogspot.com