Floating Menu Spoiler Melayang

Spoiler??? sebelumnya blog ini perah membahas tentang Membuat Berbagai Macam Tombol Spoiler Atau Tombol Show Hidden, sebenarnya saya ingin membahas Spoyler di slide bar tapi karna saya lihat di blog tetangga udah banyak yang membahas spoyler di slide bar jadi terpaksa saya tidak membahasnya, ckckck . . .
Semuanya pasti udah pada tau dong apa itu Spoyler blog/situs, kalo belum tau bisa sobat lihat di postingan/articles Membuat Berbagai Macam Tombol Spoiler Atau Tombol Show Hidden. Dalam perjumpaan kita kali ini saya ingin share kepada sobat tentang Floating Menu Spoiler Melayang. Spoiler sebenarnya bisa di letakkan dimana saja tergantung pengguna dan kejeniusannya(kayak profesor aja) hehehe . . . seperti pada postingan kali ini kita akan mencobat memasang spoyler melayang di blog/situs sobat!

Lihat Demo

Sekarang udah pada paham maksudnya kan, kalo begitu mari bersama-sama sekarang kita berDo'a, eh maksudnya bahas cara memasang Floating Menu Spoiler Melayang, cara memasangnya juga sangat mudah, ayo dah kita bahas :

1. Masuk ke akun blogger Sobat.

2. Pada Dasbor klick Rancangan ➨ Tambah Gadget.

3. Pilih elemen HTML/Java Script.

4. Lalu copy code berikut ini dan paste atau letakkan di dalam elemen HTML/Java Script tadi.

<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="#">O.W-1</a></li>
<li><a href="#">O.W-2</a></li>
<li><a href="#">O.W-3</a></li>
<li><a href="#">O.W-4</a></li>
<li><a href="#">O.W-5</a></li>
</ul>
</div>

5. Simpan.

Keterangan:

• right:5px;center:0px; ➨ menunjukkan posisi spoiler, angak 5 dan 0 bisa sobat rubah.
• TITLE ➨ adalah judul spoyler, ganti dengan judulmu sendiri.
• tanda pagar (#) ➨ ganti dengan url atau link tujuan sobat.
• O.W-1 dan seterusnya ➨ ganti dengan nama menu atau nama link tujuan.

Dari kode di atas sebenarnya masih ada code yang bisa di rubah, silahkan rubah sendiri bila anda tau tentang code. Bila tidak tau lebih baik jagan, kalo Floating Menu Spoiler Melayangnya rusak baru tau rasa, ok!

Saya rasa cukup untuk kali ini, bila ada kesulitan jangan sungkan untuk bertanya, saya akan dengan sengang hati membantu.

Bagaimana apakah sobat berhasil menerapkannya di blog sobat? silahkan tinggalkan tanggapan atau komentar sobat tentang postingan atau articles di atas!