Menu Bar Keren Untuk Bloger

 

Halo semua,, setelah sebelumnya bangiz berbagi foto sampul juga pernah membahas cara membuat menu bar horizontal dengan CSS lihat disini untuk membacanya. Untuk kali ini akan berbagi lagi tentang blogging. Adapun yang akan dibahas kali ini yaitu tentang Cara membuat menu bar yang keren. Untuk hasilnya Anda bisa lihat gambar di bawah:

Jika tertarik, silahkan ikuti saya caranya berikut ini:

1. Masuk dasbor blogger > Template > Edit HTML

2. Cari kode  ]]></b:skin>

3. Kalau sudah ketemu, tinggal copy-paste saja kode berikut tepat sebelum / diatas kode tadi.

#menu1 ul {
    list-style:none;
    font-family: Oswald, Georgia, serif;
    font-size: 20px;
    font-style: italic;
    font-weight: normal;
    letter-spacing: normal;
    line-height: 0.8em;
    border:2px solid #000;
    border-left:none;
    float:left;
    clear:both;
    margin:10px;
}
#menu1 ul li{
    float:left;
}
#menu1 ul li a{
    display:block;
    text-decoration:none;
    background-color:#444;
    padding:5px 5px;
    color:#fff;
    width:140px;
    border-right:1px solid #666;
    border-left:1px solid #000;
}
#menu1 ul li a span{
    display:block;
}
#menu1 ul li a span.title{
    border-bottom:1px solid #444;
}
#menu1 ul li a:hover span.title{
    border-bottom:1px dashed #f0f0f0;
    color:#ef0000;
}
#menu1 ul li a span.text{
    visibility:hidden;
    font-size:12px;
    text-align:right;
}
#menu1 ul li a:hover span.text{
    visibility:visible;
}

4. Save template. Untuk merubah warna Anda bisa lihat disini atau disini

5. Selanjutnya tambahkan HTML/Javascript. Dari Tata Letak > Tambahkan Gadget > cari Tambahkan HTML/Javascript.

<div id="menu1">
 <ul>
 <li><a href="#"><span class="title">About</span>
 <span class="text">Who we are</span>
 </a>
 </li>
 <li><a href="#"><span class="title">Blog</span>
 <span class="text">What we talk about</span>
 </a>
 </li>
 <li><a href="#">
 <span class="title">Facebook</span>
 <span class="text">Join us</span>                   

 </a>
 </li>
 <li><a href="#">
 <span class="title">Twitter</span>
 <span class="text">Follow us</span>
 </a>
 </li>
<li><a href="#">
 <span class="title">Google+</span>
 <span class="text">Add us</span>

Note:

Silahkan ganti tulisan merah dengan kata-kata yang Anda inginkan

Ganti # dengan alamat URL

5. Simpan dan lihat hasilnya.