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!

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!

Poskan Komentar Blogger Disqus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Penting:
Jika Anda mengajukan pertanyaan klik 'Subscribe by email' link di bawah form komentar untuk mengetahui komentar balasan.

Khusus untuk membalas komentar disarankan menggunakan tombol balas/reply di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur.

Dilarang Meninggalkan Link Aktif, Link Aktif Terpaksa Akan Saya Hapus Dari Komentar.

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".

Konversi Kode di Sini! Daftar Member Aktif

 
Top