Saturday, December 4, 2010

Trik Membuat Menu Navigasi dengan CSS

clip_image001Template 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.

(Sumber)  by fajar

Tag Technorati: {grup-tag},

No comments: