Trik Membuat Menu Navigasi dengan CSS

Malam minggu kelabu..mau ngapel sido’i jauh di mato..seperti sebuah lagu jauh dimata dekat dihati,,udah gitu cinta gue beraaaat di ongkoss..uhukk,,uhuk..:D.whatever-lah..
Sebagai obat kalang kabut,mending blogging deh..berbagi untuk semua temen-temen yang menggunakan blog di blogspot.sebenarnya trik ini sudah banyak di bahas pada blogger-blogger yang lainnya.selain itu template yang di sediakan juga sudah tersedia menu navigasinya.Nah bagi yang mempunyai template yang disukai,namun belum ada menu navigasinya untuk itu baca selengkapnya trik ini untuk membuat menu navigasi dengan CSS.
1.Sebelum membuat menu navigasinya,coba anda check dulu pada bagian ukuran lebar template agar sesuai dan serasi.misalnya didalam template anda kodenya seperti ini:

/*————BODYGUE—————*/
body {
background: #000 ;repeat-x bottom;
width: 980px;
color: #333;
font-size: 12px;
font-family: lucida sans unicode,century gothic,Tahoma, Verdana;
margin: 0 auto 0;
padding: 0;
}
Menunjukkan lebar headernya adalah 980pixel berbackground warna hitam.Langkahnya sebagai berikut:
1.Masuk pada akun blogger anda..
2.Pada dasbor blog pilih pada edit tata letak
3.Pilih edit html
4.Cheklist pada Expand Widget diatas kolom html
5.Untuk mempercepat pencarian tekan Ctrl+F
Tugas anda yang pertama adalah menyisipkan kode berikut sebelum ]]</b:skin>

/* Navigasi frj1dotwordpressdotcom
———————————————– */
#fajar{
height:25px;
text-align: center;
}

#fajar a{
margin:0;
font-size:1.2em;
font-weight:bold;
letter-spacing:-1px;
background-color: #cccccc;
color: #000000;
padding-top:2px;
padding-bottom:2px;
padding-left:4px;
padding-right:4px;
}

#fajar a:hover{
text-decoration:none;
padding:34px 5px 41px 5px;
background-color: #0326FC;
background-repeat: repeat-x;
color:#A7FC03;
padding-top:2px;
padding-bottom:2px;
padding-left:4px;
padding-right:4px;
}

6.Selanjutnya copas kode berikut dibawah <div id=”header”>

<h1 id=”blog-title”>
<ItemPage><a href=”<GUE>”></ItemPage>
<$BlogTitle$>
<ItemPage></a></ItemPage>
</h1>

<id=”description”><GUE>
<div id=”fajar”>
<a href=”fjr1.wordpress.com ” target=”_blank”>Home</a>
<a href=”this-trik.blogspot.com/2010/04/trik-membuat-menu-navigasi-dengan-css.html”  target=”_blank”>Trik menu nav</a>
<a href=”#” target=”_blank”>Link 3</a>
<a href=”#” target=”_blank”>Link 4</a>
<a href=”#” target=”_blank”>Link 5</a>
</div>

</div>

7.Klik Pratinjau untuk melihat hasilnya..
8.Save..selesai deh..:D


Catatan:
Pada #fajar{
height:25px;
text-align: center;
}
Berarti tinggi menu nav 25 px dengan perataan text berada di tengah atau senter.Seperti demo dibawah ini:

Homeku
Trik menu nav
Link 3

<a href=”fjr1.wordpress.com ” target=”_blank”>Home</a>

Pada huruf tercetak miring anda bisa menggantinya dengan url anda.Contoh lain jika menu navigasi anda ingin di isi sebagai contoh:About Me.contohnya seperti ini:

<a href=”fjr1.wordpress.com/2010/04/tentang-gue.html “>Home</a>

Sesuaikan dengan yang anda inginkan..hmmm ribet ga ya..??gampang kok..:D.Selamat Mencoba dan Semoga berhasil.

Bookmark and Share

Trik Membuat Menu Navigasi dengan CSS

4 thoughts on “Trik Membuat Menu Navigasi dengan CSS

  1. Siiip gan…mantep banget informasinya,..
    membantu banged ni buat saya yang lagi nyari materi
    oke gan….mohon like dan comment balik yooo,..thx U😀

Comments are closed.