Blogspot | Widget Menu Bar CSS | Z-Index | dan Overflow Bermasalah

Bagaimana Cara memuat menu bar pada blogspot, Bagaimana cara mengatasi sub menu yang tidak bisa muncul, Kenapa Anak Menu tidak bisa muncul. Yuk kita coba bahas satu peratu...

Cara Membuat Menu Bar

Kita bisa menemukan banya cara membuat menu bar di internet, salah satunya kamu bisa kunjungi alamat ini : http://www.bloggertrix.com/p/css-menu-bars.html. Menurutku alamat ini cukup lengkap dan mudah untuk diikuti. 

Kita Ambil Salah satu contoh dari banyak pilihan membuat menu bar tersebut :

http://www.bloggertrix.com/2012/10/add-stylish-css3-menu-bar-for-blogger.html

 

Demonya Bisa Lihat di Sini : DEMO WIDGET MENU BAR

Cara membuatnya : 

1. Log in ke Bloger dengan Akun Kamu

2. Pilih Menu : Template

3. Klik : EDIT HTML

4. Gunakan Ctrl+F  dan cari kode berikut : ]]></b:skin>

5. Copy Kode di bawah ini :

/* The CSS Code for the menu starts here */

nav ul{  padding: 0;
    margin: 0;
    list-style: none;    
}
nav li
{ float: left;}
nav a{
    float: left;
    color: #FFFFFF;
    margin: 0 5px;
    padding: 3px;
    text-decoration: none;
    border: 1px solid #831608;
    font: bold 14px Arial, Helvetica;  
    background-color: #831608;
    background-image: -moz-linear-gradient(#bb413b, #831608);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#bb413b), to(#831608));  
    background-image: -webkit-linear-gradient(#bb413b, #831608);
    background-image: -o-linear-gradient(#bb413b, #831608);
    background-image: -ms-linear-gradient(#bb413b, #831608);
    background-image: linear-gradient(#bb413b, #831608);
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    text-shadow: 0 -1px 0 rgba(0,0,0,.8);  
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3), 0 3px 0 rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3), 0 3px 0 rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3), 0 3px 0 rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.5) inset;  
}
nav a:hover
{
    background-color: #bb413b;
    background-image: -moz-linear-gradient(#831608, #bb413b);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#831608), to(#bb413b));    
    background-image: -webkit-linear-gradient(#831608, #bb413b);
    background-image: -o-linear-gradient(#831608, #bb413b);
    background-image: -ms-linear-gradient(#831608, #bb413b);
    background-image: linear-gradient(#831608, #bb413b);
}
nav a:active
{
    background: #bb413b;
    position: relative;
    top: 2px;  
    -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) inset;
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) inset;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) inset;
}
nav span
{
    border: 1px dashed #eba1a3;
    display: inline-block;
    padding: 4px 15px;
    cursor: pointer;  
    background-color: #bb413b;
    background-image: -moz-linear-gradient(#d4463c, #aa2618);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#d4463c), to(#aa2618));    
    background-image: -webkit-linear-gradient(#d4463c, #aa2618);
    background-image: -o-linear-gradient(#d4463c, #aa2618);
    background-image: -ms-linear-gradient(#d4463c, #aa2618);
    background-image: linear-gradient(#d4463c, #aa2618);
}
nav a:hover span
{  
    background-color: #bb413b;
    background-image: -moz-linear-gradient(#aa2618, #d4463c);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#aa2618), to(#d4463c));    
    background-image: -webkit-linear-gradient(#aa2618, #d4463c);
    background-image: -o-linear-gradient(#aa2618, #d4463c);
    background-image: -ms-linear-gradient(#aa2618, #d4463c);
    background-image: linear-gradient(#aa2618, #d4463c);
}

6. Taruh Kode tersebut di atas kode : ]]></b:skin>  tadi.

7. Simpan

9. Klik  : Layout / Tata Letak
10. Klik add gadget / tambahkan gadget dan isi dengan kode di bawah ini :

<nav>
    <ul>
        <li><a href="#"><span>Home</span></a></li>
        <li><a href="#"><span>Categories</span></a></li>
        <li><a href="#"><span>About</span></a></li>              
        <li><a href="#"><span>Portfolio</span></a></li>
        <li><a href="#"><span>Contact</span></a></li>
        <li><a href="http://www.bloggertrix.com"><span>Add this</span></a></li>
    </ul>
</nav>

11. Save / Simpan.
12. Lihat hasilnya...
13. Ubah Home, Categories, About ... dengan menu-menu kamu
14. Ganti # dengan link kamu. Gampang kan ?

Namun adakalaknya timbul masalah seperti di bawah ini, bagaimana solusinya ?

Masalah : Sub Menu tidak kelihatan / tidak mau muncul ketika di klik

Solusi -Hapus kode overflow:hidden; pada wrapper. - Tambahkan / ubah kode pada css terkait menu dengan kode :  position:absolute;, z-index:10; (angka 10 bisa sesuai dengan kondisi).

Semoga Bermanfaat.

Tag : z-index, widget menu bar,  menu bar css, overflow

Baca Juga