Membuat
Menu di Bawah Header / Judul Blog
0digg
Ok, Langsung Saja Kita Mulai Langkah-Langkahnya:
Hal
pertama yang harus dilakukan adalah
login ke blogger > Layout/Tata Letak > Edit Html .
login ke blogger > Layout/Tata Letak > Edit Html .
Selanjutnya
Anda cari kode dibawah ini, untuk mempermudah pencarian silahkan gunakan CTRL+F
<div
id='crosscol-wrapper' style='text-align:center'>
<b:section
class='crosscol' id='crosscol' showaddelement='no'>
<b:widget
id='HTML1' locked='false' title='' type='HTML'/>
</b:section>
</div>
Anda
ubah kode showaddelement='no' menjadi
showaddelement='yes' , kalau sudah klik simpan ya
Setelah
yang pertama sudah disimpan, sekarang klik Page elements / Elemen Laman >
Tambah Gadget > HTML/Javascript , copy kode dibawah ini,simpan dan letakan
tepat dibawah header.
Untuk
menambah gadget dibawah header bisa baca
disini
<a
href="http://www.masbugie.com "
class="navigation">HOME</a>
<a
href="http://www.masbugie.com "
class="navigation">CONTACT</a>
<a
href="http://www.masbugie.com " class="navigation">BUKU
TAMU</a>
<a
href="http://www.masbugie.com "
class="navigation">FACEBOOK</a>
<a
href="http://www.masbugie.com "
class="navigation">TWITER</a>
<a
href="http://www.masbugie.com "
class="navigation">DOWNLOAD</a>
<a
href="http://www.masbugie.com "
class="navigation">LAIN-LAIN</a>
<a
href="http://www.masbugie.com "
class="navigation">CHATTING</a>
*Alamat
url diatas silahkan sesuaikan dengan blog Anda.
Hal
ketiga adalah supaya menu itu menimbulkan efek warna sehingga menjadi kelihatan
menarik.
Klik
Tata Letak > Edit HTML , cari kode </b:skin> , agar mudah gunakan
tombol CTRL+F
Copy
kode dibawah ini dan letakan tepat diatas kode
</b:skin> kemudian simpan.
a.navigation
{
background:
#3333ff ;
color:
#ffffff;
margin:
1px;
padding:
2px;
border-width:
0;
text-transform:
uppercase;
text-decoration:
none;
font-weight:
bold;
}
a.navigation:hover
{
background:
#333333;
color:
#ffffff;
text-decoration:
none;
}
Perhatikan
kode yang berwarna biru adalah warna tombol dan efek hover dan bisa dirubah
sesuka hati Anda.Dan yang berwarna merah adalah jarak antara tombol satu dengan
lainnya, silahkan Anda sesuaikan sesuai selera.
Untuk
mengetahui kode-kode warna dalam HTML silahkan lihat juga disini
Read
more: Membuat Menu di Bawah Header / Judul Blog | Mas Bugie [dot] com
http://www.masbugie.com/2010/05/membuat-menu-di-bawah-header-judul-blog.html#ixzz1uQaT2kqN
0 komentar:
Posting Komentar