0
Membuat Menu di Bawah Header pada Blogspot
Salam Blogger, kali ini saya akan membahas bagai mana cara memasang menu di bawah header dan berikut adalah langkah-langkahnya.
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
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.
mudah bukan, selamat mencoba...
- 1. Login di blogger dengan ID blog sobat
- 2. Klik menu Layout
- 3. Klik Tab Edit HTML
<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>
<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://madhigokil.blogspot.com " class="navigation">HOME</a>
<a href="http://madhigokil.blogspot.com " class="navigation">CONTACT</a>
<a href="http://madhigokil.blogspot.com " class="navigation">BUKU TAMU</a>
<a href="http://madhigokil.blogspot.com " class="navigation">FACEBOOK</a>
<a href="http://madhigokil.blogspot.com " class="navigation">TWITER</a>
<a href="http://madhigokil.blogspot.com " class="navigation">DOWNLOAD</a>
<a href="http://madhigokil.blogspot.com " class="navigation">LAIN-LAIN</a>
<a href="http://madhigokil.blogspot.com " class="navigation">CHATTING</a>
*Alamat url diatas silahkan sesuaikan dengan blog Anda.<a href="http://madhigokil.blogspot.com " class="navigation">CONTACT</a>
<a href="http://madhigokil.blogspot.com " class="navigation">BUKU TAMU</a>
<a href="http://madhigokil.blogspot.com " class="navigation">FACEBOOK</a>
<a href="http://madhigokil.blogspot.com " class="navigation">TWITER</a>
<a href="http://madhigokil.blogspot.com " class="navigation">DOWNLOAD</a>
<a href="http://madhigokil.blogspot.com " class="navigation">LAIN-LAIN</a>
<a href="http://madhigokil.blogspot.com " class="navigation">CHATTING</a>
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.
mudah bukan, selamat mencoba...
Artikel Terkait :
Langganan:
Posting Komentar (Atom)
0 Responses to “Membuat Menu di Bawah Header pada Blogspot”
Posting Komentar
Tinggalkan Jejak Mu Sob...!!!
Berkomentarlah dengan baik dan sopan... ^_^
Komentar yang mengandung SARA, PORNO, KASAR, akan di hapus!
Komentar langsung dipublish tanpa moderasi :)