NAVBAR SEDERHANA 1

untuk membikin navbar sederhana seperti gambar dibawah ini

login ke blogger pilih layout -> template designer -> advanced -> addCSS

ketik  code cssnya  

a{ color:#FFCC00;} a:focus { outline: none; } ul.sidenav { font-size: 1.2em; float: left; width: 200px; margin: 0; padding: 0; list-style: none; background: #005094; border-bottom: 1px solid #3373a9; border-top: 1px solid #003867; } ul.sidenav li a{ display: block; color: #fff; text-decoration: none; width: 155px; padding: 10px 10px 10px 35px;  border-top: 1px solid #3373a9; border-bottom: 1px solid #003867; } ul.sidenav li a:hover { background: #003867  border-top: 1px solid #1a4c76; } ul.sidenav li span{ display: none; } ul.sidenav li a:hover span { display: block; font-size: 0.8em; padding: 10px 0; }

kemudian klik layout -> Add Widget -> html/javascript 

ketik kode nya

coba diganti sebagian-sebagian dari kode sambil melihat perubahan yang terjadi  tersebut sehingga bisa lebih memahami bahasa programnya CSS maupun HTML

kalau berhasil akan tertampil seperti di blog ini

Share on Google Plus