SEBAIKNYA KUNJUNGI BLOG SAYA :

BLOGBEGO CREATION




Cara Membuat Tab Menu Melayang dengan Spoiler

Berkunjung ke Blognya senior kita yang satu ini, saya lihat ada yang baru di pojok kiri atas, siapa lagi kalau bukan Beben Koben si Bloglang anu Ganteng Kalem tea ini, yang dibri judul "MENU FIXED" pada postingan yang berjudul "Make a Menu with Fixed Property" :r dan disini saya beri nama Spoiler Melayang untuk Tab Menu  :z 
Sedikit saya bahas apa kelebihan dari Spoiler ini dibandingkan Spoiler bertingkat yang pernah saya posting, Karena diperlukan tempat yang lebih sedikit tapi di dalamnya kaya isi, dan bisa ditampilkan dimana suka [kiri atas - bawah maupun kanan atas - bawah] cuma dengan mengganti text posisinya :# Demonya kawan bisa lihat » disini
Caranya membuatnya :
  • Copas kode Css berikut dan taruh sebelum ]]></b:skin>

#bmenu{
position:fixed;
left:5px;
top:5px;
background-color:#236C95;
border-radius:10px;
-moz-border-radius:10px;
border:1px solid #FFF;
width:202px;
height:20px;
color:#FF0;
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 #FF0;
background-color:#95CAFF;
margin:15px 0;
padding:0 15px;}

#bmenu li{list-style:none;margin:0 0 5px;padding:0;} #bmenu li a{
color:#00F;
text-decoration:none;
font-size:14px;}

#bmenu li a:hover{
color:#F00;}

#bmenu:hover{
z-index:5;
height:175px;

Text warna merah adalah posisi tampilan, silahkan ganti text berwarna merah tersebut untuk memindahkan posisi tampilannya [misalnya kiri-atas, kanan-bawah dan lain sebagainya].
Text yang berwarna biru adalah untuk warna background luar dengan font warna Kuning  :@ dan begitu seterusnya  :# 
  • Kalau sudah pas simpan template kawan 
  • Pada Design / Perancang Template 
  • Tambah Gadget baru dan Copas kode HTML berikut kedalamnya 

<div id="bmenu">
<h3>TAB MENU MELAYANG</h3>

<ul><li><a href="http://tips-blogbego.blogspot.com/p/siapa-saya.html" title="adalah Profil saya" target="_blank">SIAPA SAYA</a></li>

<li><a href="http://tips-blogbego.blogspot.com/p/kontak-kami.html" title="untuk menghubungi saya" target="_blank">KONTAK KAMI</a></li>

<li><a href="http://www.facebook.com/?ref=home/" target="_blank" title="Facebook Putu Blogbego">FACEBOOK</a></li>

<li><a href="http://info-blogbego.blogspot.com/" target="_blank" title="info blog dan komputer berbahasa inggris">BLOG & COMPUTING INFO</a></li>

<li><a href="http://www.alambali.co.cc/" target="_blank" title="informasi wisata di Bali berbahasa Inggris">ALAM BALI.CO.CC</a></li>

<li><a href="http://melajah-di.blogspot.com/" target="_blank" title="informasi Bali : Budaya, sejarah dll">MELAJAH DI</a></li>

<li><a href="http://blog-bego.blogspot.com/" target="_blank" title="Blog untuk Demo">BLOGBEGO</a></li>

</ul></div>


Silahkan ganti URL saya dengan URL kawan, dan kalau semuanya sudah pas jangan lupa simpan Template kawan dan lihat hasilnya :O

17 komentar pada “Cara Membuat Tab Menu Melayang dengan Spoiler”

  1. eh ke pilem lagi :#
    hihihihi :D

    BalasHapus
  2. @Beben Koben ya mas mungkin judulnya kurang menarik sebelumnya :r

    BalasHapus
  3. bagus . . .
    spoilernya autoclick buka sndiri yah . . .
    :) coba dehh

    BalasHapus
  4. selamat siang mas putu.. bingung neh mau komentar apa.. hehe..
    sukses selalu mas

    BalasHapus
  5. Tutorial yang mantab untuk membuat tab menu yang keren.

    Salam ukhuwah

    BalasHapus
  6. bolehkah aku betanya??

    z-index itu apa ya dan pengaruhnya dimana? thankz before.

    BalasHapus
  7. @faceleakz pertanyaan kawan mencirikan kawan sudah mahir dibidangnya, tapi saya akan coba menjawabnya sesuai kemampuan "z-index" kurang lebih adalah penggabungan/menumpuk elemen dll tapi tetap kelihatan yang ditumpuk pada css3,
    pengaruhnya ?! :#
    atau kalau jawaban saya kurang tepat [tak berkenan], kawan bisa memberikan jawaban yang lebih tepat dan berbagi ilmu :O dengan saya.

    BalasHapus
  8. kunjungan rutin ke blog saudara, saya suka baca-baca artikel disini, menarik sekali, saya tunggu posting selanjutnya
    oh iya, kalo berkenan baca juga artikel saya Pesona Wisata Dan Kerajinan Magetan

    BalasHapus
  9. @Pesona Wisata Dan Kerajinan Magetan tentu kawan, sesama calon Blogger wajib saling mengunjungi :z

    BalasHapus
  10. tips nya bagus-bagus jadi betah xii..xii..

    BalasHapus
  11. @Suwanto ah kawan menyanjung, saya hanya berbegi :z

    BalasHapus
  12. kunjungan ke blog sobat.. terima kasih triknya.. kalo berkenan mampir juga ke blog aku ya.. how to be popular girl

    BalasHapus
  13. @how to be popular girl saya berkunjung ke istana kawan, tapi tdak ada chatbox dan kotak komentar :z

    BalasHapus

BERIKAN KOMENTAR SESUAI TOPIK DAN SANTUN
BUKAN SPAM - PORNOGRAFI MAUPUN MASALAH ETHNIS / SARA

TAMBAHKAN KOMENTAR DENGAN EMOTICON :
DENGAN KODE ALFABET < :a s/d :z >

 

Copyright  ©  TIPS BLOGBEGO

site meter

Template by Blogger templates
Powered by Blogger