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.
Jika tertarik bagaimana cara membuat menu bar atau menu horizontal dengan efek hover keren, silahkan ikuti 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.
Menu bar keren |
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;}
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.
Untuk hasilnya Anda bisa lihat gambar di bawah: