Jumat, 16 November 2012

Membuat Menu Link Di Bawah Header

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  


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 ;



  1. lakukan Login ke blog blogger, klik Tata Letak atau Template  >> klik Edit HTML
  2. seperti biasa copy dulu code htmlnya ...buat jaga2 kalo ada kesalahan  
  3. Klik Expand Widget Template.
  4. 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>

  1. Kalau Anda tidak jumpa karena kode HTML ada yang tidak sama, maka yang dicarshowaddelement='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 >> 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>



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.

Tidak ada komentar:

Posting Komentar

WELCOM TO DEDEZIBER.BLOGSPOT.COM