Untuk teman-teman pemula blogger sama seperti saya mungkin saja ini tutorial berguna bagi teman-teman blogspot yang ingin tau cara membuat menu link atau tab di bawah header yah contohnya seperti ini
sumber dari http://pairssence.blogspot.com/2012/10/cara-membuat-tab-menu-di-bawah-header.html
menarik bukan ...hehehheheh tentu menu2 tersebut bisa membatu pengunjung blog kita ...oke ngak usah panjang lebar yukk kita langsung praktek saja biasa ikuti langkah-langkah di bawah ini
Ikuti langkah-langkah berikut ;
- lakukan Login ke blog blogger, klik Tata Letak atau Template >> klik Edit HTML
- seperti biasa copy dulu code htmlnya ...buat jaga2 kalo ada kesalahan
- Klik Expand Widget Template.
- Carilah tulisan yang sama dengan HTML dibawah ini, untuk memudahkan gunakan tombol Ctrl+F, sorot dan copykan yang ini <b:section class='crosscol' id='crosscol' showaddelement='no'> ke kolom find yang muncul ketika menekan tombol Ctrl+F supaya langsung ketemu.
<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>
- Kalau Anda tidak jumpa karena kode HTML ada yang tidak sama, maka yang dicari showaddelement='no'> saja, sama dengan langkah nomor 2 diatas sorot showaddelement='no'> dan copykan ke kolom find yang muncul ketika menekan tombol Ctrl+F supaya langsung ketemu.
Anda ubah kode showaddelement='no' menjadi showaddelement='yes' , kalau sudah jangan disimpan dulu. Cari lagi kode </b:skin> , gunakan juga tombol CTRL+F copykan kode dibawah ini dan letakan tepat diatas kode </b:skin> . Sebelum Anda mengcopykan, silahkan merubah warna dulu, merubah margin tombol dulu sesuai dengan Anda inginkan, klik Pratinjau, sudah cocok baru Anda simpan.
a.navigation {
background: #000000;
color: #ffffff;
margin: 1px;
padding: 3px;
border-width: 0;
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
}
a.navigation:hover {
background: #00FFFF;
color: #FFE4C4;
text-decoration: none;
}
background: #000000;
color: #ffffff;
margin: 1px;
padding: 3px;
border-width: 0;
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
}
a.navigation:hover {
background: #00FFFF;
color: #FFE4C4;
text-decoration: none;
}
Kode berwarna merah adalah warna tombol dan efek hover, dan berwarna biru adalah jarak antara tombol dengan tombol lainnya, bisa Anda ubah sesuai tampilan yang diinginkan, untuk memilih kode warna klik disini
Setelah langkah-langkah di atas, sekarang kita lanjutkan lagi ke : klik Elemen Laman >> klikTambah Gadget >> klik HTML/Javascript , copy kode dibawah ini, letakan Gadget tepat dibawah header, kemudian simpan.
<a href="http://ubah.blogspot.com" class="navigation">Beranda</a>
<a href="http://ubah.blogspot.com" class="navigation">Pasang Iklan</a>
<a href="http://ubah.blogspot.com" class="navigation">Download</a>
<a href="http://ubah.blogspot.com" class="navigation">Contoh Form</a>
<a href="http://ubah.blogspot.com" class="navigation"> Kebijakan Privasi</a>
<a href="http://ubah.blogspot.com" class="navigation"> Kontak </a>
<a href="http://ubah.blogspot.com" class="navigation">Pasang Iklan</a>
<a href="http://ubah.blogspot.com" class="navigation">Download</a>
<a href="http://ubah.blogspot.com" class="navigation">Contoh Form</a>
<a href="http://ubah.blogspot.com" class="navigation"> Kebijakan Privasi</a>
<a href="http://ubah.blogspot.com" class="navigation"> Kontak </a>
Tulisan yang berwarna biru adalah URL blog Anda.
Kalau Anda ingin menambah menu silahkan copykan terserah mau diletakkan diurutan mana, kalau mengurangi silahkan dihapus.
Anda adalah seorang pembaca yang baik, silahkan tinggalkan pesan Anda tentang posting ini.
Selamat mencoba semoga berhasil.
Tidak ada komentar:
Posting Komentar