Cara Membuat Menu Horizontal Beserta Kotak Pencarian

Friday, August 09, 2013

Salam Sahabat Infoof, Kali ini Infoof ingin berbagi mengenai " Cara Membuat Menu Horizontal Beserta Kotak Pencarian ", banyak sekali kita lihat di blog dan website yang yang ada di internet memiliki tampilan-tampilan menu horizontal dan kotak pencarian yang menawan yang bisa menimbulkan perasaan kagum bagi yang melihatnya, pada saat itu timbul keinginan dan pertanyaan " Bagaimana cara membuat tampilan menu horizontal seperti itu ?"..

Langkah-langkah untuk membuatnya adalah sebagai berikut:

Silahkan anda login ke akun Blogger anda.
Setelah masuk ke dasbor klik Template lalu klik Edit HTML.
Cari kode ]]></b:skin>
Kemudian letakkan kode di bawah ini di atas kode ]]></b:skin>

/*-- (Nav & Search Box) --*/
#nav{
background: #1c426d; /* Warna backgroud Kotak Navigasi */
height:31px; /* Tinggi Kotak Navigasi */
padding:0px;
margin-bottom:5px
}
#nav-left{
float:left;
display:inline;
width:580px
}
#nav-right{
float:right;
display:inline;
width:275px;
padding:1px 0px 0px 0px;
}
#nav ul{
position:relative;
overflow:hidden;
padding-left:5px;
padding-top:1px;
margin:0;
font:1.1em /* Ukuran font tab navigasi */
Arial,Helvetica,sans-serif;
font-weight: bold;
}
#nav ul li{
float:left;
list-style:none
}
#nav ul li a, #nav ul li a:visited{
display:block;
color:#ffffff; /* Warna teks pada kotak navigasi */
margin:0 8px;
padding:5px 7px
}
#nav ul li a:hover{
color:#ffffff;
background-color:#C4C5B8; /* Warna kotak ketika kursor melintasi teks navigasi */
margin:0 8px;
padding:5px 7px
}
#nav ul li a.current, #nav ul li a.current:visited, #nav ul li a.current:hover{margin:0 8px; background-color:#A6A994; color:#ffffff; padding:5px 7px}
#searchform {
margin: 0;
padding: 0;
overflow: hidden;
display: inline;
}
#searchbox {
background: #EEE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA5EP7_dE8WLgV_8oC1SYQQfK2gNrZ7SqY5RlNvmYfsZHP7P-QCaZbrCab-IumCf7ufETS-OBQKMe8Q7MVd6mUujiei-4M7ABQspjKWjLcPv-ItCqKMHLKeVxSSAw3_7U3fmO93JIZOKTj/) no-repeat left top;
width: 180px;
height: 16px;
color: #202020;
font-size: 12px;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-weight: normal;
margin: 2px 0px 0px 15px;
padding: 4px 0px 3px 25px;
border-top: 1px solid #DDD;
border-right: 1px solid #666;
border-left: 1px solid #DDD;
border-bottom: 1px solid #666;
display: inline;

#searchbutton {
background: #1c426d; /* Warna background tombol pencari */
color: #FFF; /* Warna teks tombol pencari */
font-size: 11px;
font-family:Verdana,Arial,Helvetica,sans-serif;
margin: 0px;
padding: 3px 0px 3px 2px;
font-weight: bold;
border-top: 1px solid #DDD;
border-right: 1px solid #666;
border-left: 1px solid #DDD;
border-bottom: 1px solid #666;
}

Keterangan:

Tulisan berwarna merah diatas merupakan keterangan dari masing-masing kode. Silahkan ganti sesuai dengan template anda.

Jika anda ingin mengganti background menu navigasi dengan gambar, maka tambahkan kode url(alamat gambar anda) dibelakang kode "warna background kotak navigasi". Contohnya:

background: #1c426d url(http://url-gambar);

5 . Kemudian Cari Kode dibawah ini.

6. Kemudian letakkan kode di bawah ini di bawah kode di atas.

7. Kemudian Simpan Template

Cara Membuat Menu Horizontal Beserta Kotak Pencarian

0 comments:

Recent Post

Recent Comments

Blog Archive