Secara default sebenarnya blogger sudah menyediakan fitur untuk menambah halaman (static page) pada dashboard apabila sobat blogger ingin menampilkan menu navigasi secara horizontal, akan tetapi disana tidak ada fasilitas untuk membuat menu dropdown. Oleh karena itu para blogger biasanya menambahkan beberapa kode CSS dan HTML untuk melakukan modifikasi.
Untuk membuat navbar horizontal yang menampilkan menu dropdown seperti di atas berikut langkahnya :
1. Silahkan copy kode CSS di bawah ini:
Code
/* MENU NAV */ #nav-element{width:980px; margin:0; padding:0px 0 0px 0; float:center} #nav{background:#424242; height:32px; padding:4px 0 0; margin-bottom:0px; clear:both; margin:0 auto; -webkit-border-radius: 7px;-moz-border-radius: 7px; border-radius: 7px;} #nav-left{float:left; display:inline; width:790px; padding-left:6px; padding-top:1px} #nav-right{float:right; display:inline; width:160px; padding-top:3px; padding-right:15px} #nav ul{float:left;list-style:none;margin:0;padding:0;font:1.0em Verdana,Arial,Helvetica,sans-serif;font-weight:bold} #nav li{list-style:none;margin:0;padding:0} #nav li a,#nav li a:link,#nav li a:visited{display:block; color:#fff; margin:1px 4px; padding:4px 4px; text-decoration:none;} #nav ul li a.current, #nav ul li a.current:visited{display:block; color:#fff; margin:1px 4px; padding:4px 4px; text-decoration:none;}, #nav ul li a.current:hover{color:#fff; background-color:#000; margin:1px 3px; padding:4px 4px; border-radius:3px 3px; -moz-border-radius:3px 3px 3px 3px; -khtml-border-radius:3px 3px 3px 3px; -webkit-border-radius:3px 3px 3px 3px; border-radius:3px 3px 3px 3px} #nav li a:hover,#nav li a:active{background-color:#222; color:#fff; background-color:#999; margin:1px 4px; padding:4px 4px; border-radius:3px 3px; -moz-border-radius:3px 3px 3px 3px; -khtml-border-radius:3px 3px 3px 3px; -webkit-border-radius:3px 3px 3px 3px; border-radius:3px 3px 3px 3px;text-decoration:none} #nav li li a,#nav li li a:link,#nav li li a:visited{background:transparent;color:#fff;font-size:12px;text-transform:none;float:none;margin:1px 4px; padding:4px 4px; border-radius:3px 3px; -moz-border-radius:3px 3px 3px 3px; -khtml-border-radius:3px 3px 3px 3px; -webkit-border-radius:3px 3px 3px 3px; border-radius:3px 3px 3px 3px;} #nav li li a:hover,#nav li li a:active{background-color:#222; color:#fff; background-color:#999; margin:1px 4px; padding:4px 4px; border-radius:3px 3px; -moz-border-radius:3px 3px 3px 3px; -khtml-border-radius:3px 3px 3px 3px; -webkit-border-radius:3px 3px 3px 3px; border-radius:3px 3px 3px 3px;} #nav li{float:left;padding:0} #nav li ul{z-index:9999; position:absolute; left:-999em; height:auto; width:167px; background: #424242;margin:0px; padding:4px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;} #nav li ul a{width:156px;margin-bottom:2px;} #nav li ul ul{margin:-32px 0 0 171px} #nav li:hover ul ul,#nav li:hover ul ul ul,#nav li.sfhover ul ul,#nav li.sfhover ul ul ul{left:-999em} #nav li:hover ul,#nav li li:hover ul,#nav li li li:hover ul,#nav li.sfhover ul,#nav li li.sfhover ul,#nav li li li.sfhover ul{left:auto} #nav li:hover,#nav li.sfhover{position:static}
2. Login ke dashboard blogger sobat -> rancangan -> edit HTML (disarankan back up dulu template yang digunakan)
3. Tekan Ctrl + F cari kode ]]></b:skin> dan paste kode tadi tepat di atasnya, saya asumsikan sobat masih menggunakan template default dari blogger.
5. Masuk ke layout >> tambah gadget >> HTML/Javasript >> copykan kode html di atas dan tempatkan pada posisi yang diinginkan.(Catatan : pastikan elemen header sudah terbuka untuk tambah gadget)
6. Kode yang berwarna biru (#) ganti dengan url blog atau posting sobat, dan yang berwarna merah (Menu) dengan nama atau judul kategori posting.
7. Preview dulu, apabila dirasa cukup simpan template sobat.
8. Selamat Mencoba dan salam blogger.
0
komentar
:
Posting Komentar
Jika anda menyukai artikel di atas silahkan share atau tinggalkan komentar. Mohon maaf, untuk menghindari spam, komentar yang menyertakan live link akan dihapus.
0 komentar :
Posting Komentar
Jika anda menyukai artikel di atas silahkan share atau tinggalkan komentar. Mohon maaf, untuk menghindari spam, komentar yang menyertakan live link akan dihapus.