Membuat Menu di Bawah Header / Judul Blog
Bagi
rekan blogger yang menggunakan template yang belum difasilitasi dengan
menu horisontal dibawah header pada blognya, 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 . jgn lupa bro centang dulu.
Selanjutnya Anda cari kode dibawah ini, untuk mempermudah pencarian silahkan gunakan CTRL+F
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 pertama yang harus dilakukan adalah login ke blogger > Layout/Tata Letak > Edit Html . jgn lupa bro centang dulu.
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.pelajarkepahiang.co.cc " class="navigation">HOME</a>
<a href="http://www.pelajarkepahiang.co.cc " class="navigation">CONTACT</a>
<a href="http://www.pelajarkepahiang.co.cc " class="navigation">BUKU TAMU</a>
<a href="http://www.pelajarkepahiang.co.cc " class="navigation">FACEBOOK</a>
<a href="http://www.pelajarkepahiang.co.cc " class="navigation">TWITER</a>
<a href="http://www.pelajarkepahiang.co.cc" class="navigation">DOWNLOAD</a>
<a href="http://www.pelajarkepahiang.co.cc " class="navigation">LAIN-LAIN</a>
<a href="http://www.pelajarkepahiang.co.cc" class="navigation">CHATTING</a>
PERHATIKAN alamat web yg ada di coding atas ini diganti dengan alamat blog/link kamu<a href="http://www.pelajarkepahiang.co.cc " class="navigation">CONTACT</a>
<a href="http://www.pelajarkepahiang.co.cc " class="navigation">BUKU TAMU</a>
<a href="http://www.pelajarkepahiang.co.cc " class="navigation">FACEBOOK</a>
<a href="http://www.pelajarkepahiang.co.cc " class="navigation">TWITER</a>
<a href="http://www.pelajarkepahiang.co.cc" class="navigation">DOWNLOAD</a>
<a href="http://www.pelajarkepahiang.co.cc " class="navigation">LAIN-LAIN</a>
<a href="http://www.pelajarkepahiang.co.cc" 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.
Selesai, semoga bermanfaat....
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.
Selesai, semoga bermanfaat....
Jangan Lupa Koment nya Sob ....
2 komentar:
gimana cara mengubah warna link nya ?
Tolong berikan code html nya dong??
code warna klik aja http://codewarnaku.blogspot.com/
setelah tahu kode warna htmlnya untuk mengganti warna menu cari saja codding dibawah ini, ganti #ffffff
#3333ff
atau
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;
}
Posting Komentar