Buat butang navigation/tab


Ini adalah contoh butang yang akan terpapar di blog korang. Ini memudahkan pelawat melawati blog dan ianya nampak tersusun.

Jangan lupa save kod HTML korang pada notepad atas langkah berjaga-jaga.

2 perkara yang perlu lakukan:-

1) Ubah kod HTML blog
2) Buat HTML/Javascript widget baru pada blog korang.

Langkah 1
Pergi ke 'Edit Template HTML' dan cari kod ini </b:skin>
Kemudian copy kod seperti di bawah


a.navigation {
background: #000000;
color: #ffffff;
margin: 1px;
padding: 5px 35px 5px 5px;
border-width: 0;
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
}
a.navigation:hover {
background: #5d5d54;
text-decoration: none;
}


Dan paste sebelum kod ini </b:skin> tadi pada template blog korang. (betul-betul sebelum </b:skin> )

p/s: Korang boleh ubah warna background dan text mengikut warna korang di sini.

Langkah 2
Buat HTML/Javascript widget baru
klik Layout>Add a Gadget>HTML/Javascript
Kemudian copy dan paste kod di bawah ke dalam HTML/Javascript.(biarkan ruang title kosong)


<a class="navigation" href=http://link-url-anda.blogspot.com">Utama</a>
<a class="navigation" href=http://link-url-anda.blogspot.com">Tutorial</a>
<a class="navigation" href=http://link-url-anda.blogspot.com">Stuff Percuma</a>



p/s: jangan lupa tukarkan link blogspot korang dengan tulisan yang kat butang tu..

21 comments:

Post a Comment