Cara membuat tab menu di bawah header (judul blog)

Oleh : Syafei
Indonesian Post

Untuk teman-teman pemula blogger, mungkin saja ini sangat berguna bagi teman-teman, saya ingin berbagi cara membuat tab menu di bawah header blog “blogspot”, kegunaan dari tab menu ini adalah agar memudahkan pengunjung blog menelusuri isi blog, langsung saja agar teman-teman tidak penasaran.

Ikuti langkah-langkah berikut ;

1. Login ke blog blogger, klik Tata Letak >> klik Edit HTML
2. Untuk jaga-jaga simpan dulu Template Anda >> klik download template lengkap.
3. Klik Expand Widget Template.
4. Cari 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>

5. 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;
}

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 >> klik Tambah 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>

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.