Friday, October 14, 2011

cara buat menu horizontal

Senantiasa belajar Membuat menu horizontal

 baik pertanma tama - mungkin para master blog sudah banyak memposting tentang cara buat Nav bar ini berhubung binging mau posting apa saya posting aja ini deh lagian belum aku posting di blog senantiasa belajar
oke untuk mempersingkat kita lanjut__________>>>>>>
contoh gambar

1.seperti biasa anda Login ke akun blogger lalu pilih _____>>>Rancangan Dan __>Edit HTML

cari Kode berikut :

</b:skin>
Tambahkan Kode Dibawah ini Sebelum atau di atas Kode </b:skin>


/*URL: http://hendrytha.blogspot.com/ */

.basictab{
padding: 3px 0;
margin-left: 0;
font: bold 12px Verdana;
border-bottom: 1px solid gray;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}

.basictab li{
display: inline;
margin: 0;
}

.basictab li a{
text-decoration: none;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid gray;
border-bottom: none;
background-color: #f6ffd5;
color: #2d2b2b;
}

.basictab li a:visited{
color: #2d2b2b;
}

.basictab li a:hover{
background-color: #DBFF6C;
color: black;
}

.basictab li a:active{
color: black;
}

.basictab li.selected a{ /*selected tab effect*/
position: relative;
top: 1px;
padding-top: 4px;
background-color: #DBFF6C;
color: black;
}

setelah anda copykan klick SAVE

2.tinggal menambahkan menu anda caranya:
anda pergi ke rancangan Lalu tambah elemen (add gadget) lalu pilih HTML/java script Copy kode di Bawah ini

<ul class="basictab">
<li class="selected"><a href="http://www.AllBlogTools.com.com">Home</a></li>
<li><a href="http://www.allblogtools.com/blogger-templates/">Blogger Templates</a></li>
<li><a href="http://www.allblogtools.com/blogger-tricks-and-hacks/">Blogegr Tricks</a></li>
<li><a href="#">Edit</a></li>
<li><a href="#">Edit</a></li>
<li><a href="#">Edit</a></li>
<li><a href="#">Edit</a></li>
</ul>



3. Sesuaikan menu Anda 
Sekarang Anda harus mengubah link menu untuk link Anda sendiri dan judul, dan Anda mungkin ingin mengubah warna menu juga.
3.1 Perubahan menu Links 
Pada langkah 2 Anda akan menemukan kata-kata ini dalam kode

<li><a href="#">Edit</a></li>

rubahan Simbol # dengan link anda, dan mengubah Edit kata untuk judul Anda.
Anda dapat mengulangi ini bagian dari kode yang Anda inginkan,
setiap kali Anda menambahkan ini bagian dari kode lagi untuk kode menu, link baru akan ditambahkan ke menu Anda.


3.2 Perubahan Warna menu
Untuk mengubah warna menu Anda harus mengedit kode css dalam langkah 1 sebelum Anda menambahkannya ke template Anda. Jadi Salin dan masa lalu dalam teks-file notepad baru untuk mengeditnya di sana.
anda bisa menggunakan html hendrytha.blogspot.com Warna Generator Kode untuk mengedit ini warna menu. klik disini untuk melihat warna

Untuk mengubah warna latar belakang utama.
CARI:

background-color: #f6ffd5; 

dan perubahan f6ffd5 untuk warna favorit Anda.
Untuk mengubah dipilih dan hover warna latar belakang.
Cari


 background-color: #DBFF6C; 


dan perubahan DBFF6C untuk warna favorit Anda.

Untuk mengubah warna teksCari


color: black;
oke semoga cukup jelas Anda Bisa Merubah Warna kesukaan Anda

trims"
senantiasa belajar:"cara buat menu horizontal



1 comment: