Cara membuat menu diatas judul blog

Cara membuat menu diatas judul blog atau header, selamat datang kawan, kali ini saya akan membagi informasi mengenai cara membuat menu diatas judul blog atau header, seperti pertanyaan banyak blogger, jika menggunakan template kreasi sendiri pasti akan menemukan kendala dalam tahap ini, apalagi jika baru menggeluti dunia blogger atau newbie seperti saya, pasti kebingungan akan hal ini.

Kali ini saya akan membagi informasi mengenai bagaimana sih cara membuat menu diatas judul blog atau header? Sangat mudah caranya, bagi anda yang ingin mencoba, ikuti langkah - langkahnya berikut :

1. Buka blog anda

2. Pada dropdown menu pilih Template => Edit HTML

3. Gunakan tombol Ctrl + F untuk mencari kode <header>

4. Copy kode berikut dan paste di atas kode <header>


<div class='tabs-outer'>
    <div class='tabs-cap-top cap-top'>
      <div class='cap-left'/>
      <div class='cap-right'/>
    </div>
    <div class='fauxborder-left tabs-fauxborder-left'>
    <div class='fauxborder-right tabs-fauxborder-right'/>
    <div class='region-inner tabs-inner'>
      <b:section class='tabs' id='GRaboveheader' maxwidgets='2' showaddelement='yes'/>
      <b:section class='tabs' id='GRaboveheader-overflow' showaddelement='no'/>
    </div>
    </div>
    <div class='tabs-cap-bottom cap-bottom'>
      <div class='cap-left'/>
      <div class='cap-right'/>
    </div>
    </div>

5. Setelah itu anda simpan template dan masuk menu Tata Letak lihat apa yang terjadi, diatas gadget judul blog ada tambahan gadget baru, anda dapat menambahkan menu dengan cara add gadget di widget tersebut.

6. Selesai.

Bagaimana? Mudah bukan cara untuk menambah menu diatas judul blog atau header? Khusus untuk anda, saya akan memberikan script untuk membuat tanpilan menu menarik diatas judul blog atau header, bagian kiri untuk halaman dan bagian kanan untuk sosial media. Bagaimana caranya? Iktui langkah – langkahnya berikut :

1. Buka blog anda

2. Pada dropdown menu pilih Tata Letak

3. Pilih add gadget diatas widget judul blog atau header ( widget yang baru dibuat tadi mengikuti langkah sebelumnya )

4. Pilih HTML/Javascript

5. Copy kode dibawah dan paste di HTML/Javascript tersebut

<div class="bilah-menu-atas" id="bilahmenuatas">
  <div class="kolom-menu">
    <ul style="float: left; background:transparent;">
    <li><a href="http://kiosederhana.blogspot.com/"><img alt="L3" height="15px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhynmgj-Lk-P0nof1lnmPvdL-37WLkqcoXm8iZ38Zrdy7VzniCI6s1TnPHZK7pe2_SMiijNdadtfoB9kexrQCjkkpJAhQ6KO9Dhi0I8Pj2qxSx1DEUU7tu7m1I7n1MHqAALgKXfpv7FyG4/s800/Beranda.png" width="20px"/></a></li>
    <li><a href=”#”>Nama Menu</a></li>
    <li><a href=”#”>Nama Menu</a></li>
    <li><a href=”#”>Nama Menu</a></li>
    <li><a href=”#”>Nama Menu</a></li>
    <li><a href=”#”>Nama Menu</a></li>
    </ul>
  </div>
  <div class="kolom-menu">
    <ul style="float: right; background:transparent;">
    <a style="margin-right: 15px;" href="http://facebook.com/baeni.pradana" target="_blank" rel="nofollow">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXhmNFftlIwEMdRqaLsbc8ASYMIgJdSfaj5haByx0o_bFhDRktoZTmLT_yQGh6JbzOsfxWfJOcJCNzv10sFnmXJW4X1_y69xVCHYS9xjuui4Mkr3aJm7MUWKGEnKxcUQclKij1_1Jmnkc/s1600/facebook.png" title="Facebook" /></a>
    <a style="margin-right: 12px;" href="http://twitter.com/baenipradana" target="_blank" rel="nofollow">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEV-Voh66atSyjZB4LISCWHbdfnjQLrb8oHUswmT76B5_ajgUqAH8B-0c6UAxb8WJJ12jdyNhh0OlFTErzGaZlFW4Imio1yua2wXM0vDTFMcQi2rB4l3EaRTAQ82h94ACRLhseL5hyphenhyphen7cw/s1600/twitter.png" title="Twitter" /></a>
    <a style="margin-right: 12px;" rel="me" href="https://plus.google.com/+baenipradana/posts" target="_blank">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDe_1moNfKeiA175dC8P59XBJebwB8eeP-QhG-ejsb77RhyCtTbqZSApEGRkYNJdyCsWHxu08O5Rx2FZxt1Vm6V640WI-7c2TmI0O6djTM5MPhuQs_ctJA-iCWMki0OAO4avSylAAc894/s1600/gplus.png" title="Google Plus" /></a>
    <a style="margin-right: 12px;" href="http://feeds.feedburner.com/kiosederhana" target="_blank" rel="nofollow">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcUDYinM20iiVGg_ZbBjCSU0c-1roaJJww-sGl3txOBcaFYkISFRIx8dHtOZo3-xvWbuPdS3UIL-Eoa1mjOsZ6_wIxENF-KfnLiftNl-CXUN7Meww6-1cd1n_Ni6H1u6NMLFgx0nyMGRY/s1600/rss.png" title="RSS Feed" /></a>
    </ul>
  </div>
</div>


Keterangan :

- Untuk yang berwarna biru silahkan anda ganti URL blog anda
- Untuk yang berwarna merah silahkan anda ganti dengan ID anda
- Untuk tanda "#" silahkan anda ganti URL yang anda ingin masukan
- Untuk Nama Menu silahkan anda ganti dengan nama sesuai keinginan anda

6. Jika semua sudah dilakukan dengan benar, kemudian simpan dan lihat yang terjadi pada blog anda

7. Selesai

Terimakasih sudah membaca artikel sederhana ini, semoga dapat bermanfaat, salam blogger.

Artikel Terkait : Blogging Tutorial