Senin, 31 Mei 2010

Cara Membuat Tab Menu Di Blogspot

0 komentar
Caranya sangat gampang sekali....

Langkah pertama,pergi ke Dashboard (untuk blogspot),lalu pilih Tata Letak,selanjutnya pilih tab Edit HTML.
Lalu cari kode </head>,jika sudah ketemu,tepat diatasnya,letakkan kode di bawah ini :

<style type='text/css'>
#navigasi a, #navigasi a:visited {
background: gray;
font-size: 11px;
text-decoration: none;
list-type:none;
color: black;
display: block;
font-weight: bold;
margin: 0px;
padding: 8px 12px 8px 12px;
border-left: 1px solid #000000
}
#navigasi a:hover {
background: green;
color: white;
margin: 0px;
padding: 8px 12px 8px 12px;
text-decoration: none;
}
#navigasi ul {
margin: 0px;
padding: 0px;
list-style: none;
}
#navigasi li {
float: left;
margin: 0px;
padding: 0px;
}
</style>

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.

<script type="text/javascript"></script>
<div id='Navigasi'>
<ul>
<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>
</div>

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&gt; dan paste persis di bawahnya.

Oke selamat mencoba....ya sobat.


cara membuat tab menu horizontal di blogspot.

0 komentar:

Posting Komentar