Bagi
rekan blogger yang menggunakan template yang belum difasilitasi dengan menu
horisontal dibawah header pada blog nya, berikut saya postkan bagaimana cara
membuat menu tersebut. Fungsi dan kegunaan menu ini adalah agar memudahkan kita
dalam menelusuri semua isi yang terkandung didalam blog tersebut.
(baca:
easy to navigate) .Yuk kita mulai...
Hal pertama yang harus dilakukan adalah login ke blogger > Layout/Tata Letak > Edit Html .
Selanjutnya Anda cari kode dibawah ini, untuk mempermudah pencarian silahkan gunakan CTRL+F
Hal pertama yang harus dilakukan adalah 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>
<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.contoh.com "
class="navigation">HOME</a>
<a href="http://www.contoh.com " class="navigation">CONTACT</a>
<a href="http://www.contoh.com " class="navigation">FACEBOOK</a>
<a href="http://www.contoh.com " class="navigation">TWITER</a>
<a href="http://www.contoh.com " class="navigation">DOWNLOAD</a>
<a href="http://www.contoh.com " class="navigation">LAIN-LAIN</a>
<a href="http://www.contoh.com " class="navigation">CONTACT</a>
<a href="http://www.contoh.com " class="navigation">FACEBOOK</a>
<a href="http://www.contoh.com " class="navigation">TWITER</a>
<a href="http://www.contoh.com " class="navigation">DOWNLOAD</a>
<a href="http://www.contoh.com " class="navigation">LAIN-LAIN</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;
}
Untuk mengetahui kode-kode warna dalam HTML silahkan lihat juga Disini
Selesai, semoga bermanfaat... Salam
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 hijau adalah warna tombol dan efek hover dan bisa dirubah
sesuka hati Anda.Dan yang berwarna biru
adalah jarak antara tombol satu dengan lainnya, silahkan Anda sesuaikan sesuai
selera.
Untuk mengetahui kode-kode warna dalam HTML silahkan lihat juga Disini
Selesai, semoga bermanfaat... Salam
2 komentar:
Posting Komentar