ARSIP BLOG

Cara Membuat Menu Navigasi CSS

Posted by Bhernadin Erryco on Selasa, 31 Juli 2012

Membuat Menu Navigasi CSS.

Membuat menu Navigasi adalah sesuatu yang asing bagi para pemula blog. Sebenarnya apa itu menu navigasi?
Menu Navigasi adalah untuk membuat blog mudah ditelusuri. Seperti yang saya buat di atas dan dibawah judul blog.

   
    Nah, untuk membuatnya kita membutuhkan bantuan CSS.
Langkah pertama yang harus dilakukan adalah ,pergi ke Dashboard (untuk blogspot),lalu pilih Tata Letak,selanjutnya pilih tab Edit HTML.
Lalu cari kode ]]></b:skin>,jika sudah ketemu,tepat diatasnya,letakkan kode di bawah ini :


#NavbarMenu { background: #000; width: 400px; height: 10px; font-size: 11px; font-family: Trebuchet MS, Tahoma, Verdana; color: #fff; margin: 0px; padding: 0px; } #NavbarMenuleft { width: 400px; float: left; margin: 0; padding: 0; } #nav { margin: 0; padding: 0; } #nav ul { float: left; list-style: none; margin: 0; padding: 0; } #nav li { list-style: none; margin: 0; padding: 0; } #nav li a, #nav li a:link, #nav li a:visited { background: #222222; height: 15px; color: #fff; display: block; font-size: 11px; font-family: trebuchet ms, ; text-transform: none; text-decoration: none; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px; padding-right:13px; border-right: 1px solid #000; } #nav li a:hover, #nav li a:active {background: #222222; color: #ffffff; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px; padding-right:13px; text-decoration: none; } #nav li li a, #nav li li a:link, #nav li li a:visited { background: #ffffff; width: 150px; color: #222222; font-size: 11px; font-family: trebuchet ms,; font-weight: normal; text-transform: none; float: none; margin: 0; padding: 7px 10px; border: 1px solid #000; } #nav li li a:hover, #nav li li a:active { background: #222222; color: #ffffff; padding: 7px 10px; } #nav li { float: left; padding: 0; } #nav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 0; padding: 0; } #nav li ul a { width: 140px; } #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; }
Jika kode sudah anda letakkan,lalu Simpan Template.
Selanjutnya pilih Tab Tata Letak,dan buat Element Baru / Add New Widget,pilih HTML / Javascript.
Lalu letakkan kode di bawah ini pada halaman HTML / Javascript yang baru saja anda pilih.


<ul id='nav'>
<li><a href='http:///'>Menu 1</a></li>
<li><a href='http:///'>Menu 2</a></li>
<li><a href='http:///'>Menu 3</a></li>
<li><a href='http:///'>Menu 4</a></li>
</ul>

Jika kode sudah anda letakkan,lalu pilih Simpan,dan anda bisa langsung lihat hasilnya.

Untuk http:/// ,anda isi dengan alamat URL yang akan di tuju,sedagkan untuk Menu 1,2,3,4 ,Untuk tulisan yang akan tampil,sedangkan jika ingin menambahkan satu kolom lagi,anda tinggal menulis satu baris lagi,baris yang mana?

Copy aja salah satu kode :

<li><a href='http:///'>Menu 4</a></li>,dan paste persis di bawahnya.


Selamat mencoba. Semoga berhasil.

Sumber 

{ 3 comments... read them below or add one }

Hanif mengatakan... Reply Comment

Nice posting sob

kokomachii selena mengatakan... Reply Comment

thanks yah

Nopi Indrianto mengatakan... Reply Comment

Tanks for your information...
(by: http://abuzaid-alkebumeny.blogspot.com)

:) :( ;) :D ;;-) :-/ :x :P :-* =(( :-O X( :7 B-) :-S #:-S 7:) :(( :)) :| /:) =)) O:-) :-B =; :-c :)] ~X( :-h :-t 8-7 I-) 8-| L-) :-a :-$ [-( :O) 8-} 2:-P (:| =P~ :-? #-o =D7 :-SS @-) :^o :-w 7:P 2):) X_X :!! \m/ :-q :-bd ^#(^ :ar!

Poskan Komentar

Ketentuan komentar:
- Baik dan Sopan.
- Komentar harus sesuai dengan isi postingan.
- No Spam, No Junk, No Rubbish, No Porn.
- Mudah Dimengerti.

Dimohon juga untuk Meng-Kritik atau kasih Saran buat Blog ini

Terima Kasih