Cara Membuat Tab Menu Melayang

Putu BlogBego - Selasa, 01 Januari 2013 - 06:00 wita
Dari sekian banyak Tab Menu, dan ada beberapa yang sudah saya bahas disini, :w; rasanya ada yang kelupaan yaitu Tab Menu yang saya beri nama Tab Menu Melayang yang bisa menggulung / Spoiler [bisa buka tutup kalau mouse didekatkan] :z; 

Sedikit saya bahas apa kelebihan dari Tab Menu ini dibandingkan dengan yang pernah saya posting, diantaranya diperlukan tempat yang lebih sedikit tapi di dalamnya kaya isi, dan bisa ditampilkan dimana kawan suka [kiri atas, kanan atas maupun dibawah] cuma dengan mengganti text posisinya :z; Demonya kawan bisa lihat » disini 
Caranya membuatnya :
  • Masuk Account Blogger dengan ID kawan
  • Pada Dasbor pilih Template - Edit HTML
  • Copas kode Css berikut dan taruh diatas ]]></b:skin>
#begomenu{position:fixed;left:5px;top:5px;background-color:#236C95;border-radius:10px;-moz-border-radius:10px;border:1px solid #FFF;width:212px;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;}
#begomenu h3{margin:0;padding:0;text-align:center;cursor:pointer;font-size:14px;}
#begomenu ul{border-radius:10px;-moz-border-radius:10px;border:2px solid #FF0;background-color:#95CAFF;margin:15px 0;padding:0 15px;}
#begomenu li{list-style:none;margin:0 0 5px;padding:0;} #begomenu li a{color:#00F;text-decoration:none;font-size:11px;}
#begomenu li a:hover{color:#F00;}
#begomenu:hover{z-index:5;height:210px;}


Text warna merah adalah posisi tampilan, silahkan disesuaikan].
Text yang berwarna biru adalah untuk warna background luar dengan font warna Kuning  :r; dan begitu seterusnya  :r;
Teks yang saya beri warna violet adalah lebar dan tinggi Tab silahkan disesuaikan 
  • Kalau sudah pas simpan template kawan 
  • Selanjutnya pilih Tata Letak
  • Pilih Tambah Gadget - HTML/JavaScript [bisa digabung pada Gadget lainnya]
  • Copas kode HTML berikut kedalamnya 

<div id="begomenu"><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 :x; 


Berbagi Artikel :

Cara Membuat Tab Menu Melayang
Rate this posting:
{[["☆","★"]]}

Kalau pada Artikel Cara Membuat Tab Menu Melayang
kurang jelas atau ada Artikel, Link yang tak jalan / rusak bisa disampaikan lewat Komentar
mudah-mudahan saya bisa segera memperbaiki
---ooOOOoo---
P.pw - Shorten urls and earn money!

Artikel Menarik Lainnya

About me


Saya hanyalah Manusia Biasa ingin memberi kan yang Terbaik, walau itu belum tentu Terbaik bagi Kawan....

4 Komentar pada : “Cara Membuat Tab Menu Melayang”

  1. Balasan
    1. trims kawan dan mudah-mudahan ada manfaatnya :r;

      Hapus
  2. gan ane apresiasi buta template agan yang original banget nih :) :h;

    BalasHapus
  3. sama kawan saya juga masih belajar dari pengalaman :q;

    BalasHapus

BERIKAN KOMENTAR SESUAI TOPIK
DENGAN BAHASA YANG SOPAN,
JANGAN MENGHINA, SARA / ETNIS DAN SPAM ATAU PAKAI NAMA ANONIM

Klik Emoticon untuk melihat Kodenya

Dapatkan Update Terbaru
BlogBego Creation
Langsung di Email Kawan




»
BANNER [300x250]
Protected by Copyscape Web Copyright Protection Software
Open Cbox
© 2013 - BLOGBEGO CREATION | Powered by Blogger
Design Template by : Blogger Edan