AABI‍TALITA BLOG
10.13.2012

Membuat Tab Menu Horizontal Diatas Header

Pada saat kita membuat sebuah blog maka secara default kita sudah memiliki menu dengan bidang mendatar yang terletak diatas Header yang disebut navdar.namun bagi sebagian pengelola blog menu tersebut disembunyikan atau di atur ulang tampilannya dengan berbagai alasan salah satunya untuk memperindah tampilan blog.

Seperti yang akan kita bahas berikut ini yaitu bagainama cara membuat menu navdar diatas header blog yang posisinya akan menggantikan navdar bawaan blogger.contohnya seperti tampak pada gambar dibawah ini :




menu navdar seperti contoh diatas memiliki beberapa tampilan menu seperti kotak pencari,icon sosial media serta teks ucapan selamat datang.Tampilan menu navdar ini saya adaptasi dari template Cara Gampang karya Mas Kolis  untuk melihat templatenya sobat bisa klik disini.

Sekarang langsung saja  dengan  cara membuat menu navdar di atas header blog  seperti gambar diatas :

1. Buka editor template dengan cara mengeklik menu ‘Template’ > ‘Edit HTML’ > ‘Lanjutkan’.

2. Cari kode  ]]></b:skin> dan kemudian sisipkan kode di bawah ini tepat di atasnya.

#navbar-iframe { height:0px; visibility: hidden; display: none; }

Kode diatas berfungsi untuk menyembunyikan navbar standar Blogger, tapi apabila sebelumnya sobat sudah menyembunyikan navbar standar maka lewati langkah ini dan lanjutkan pada langkah yang ketiga. 

3.Copy kode dibawah ini dan letakan di atas kode ]]></b:skin>

#fixed {position:fixed;top:0;left:0;width:100%;height:35px;z-index:999;}
#fixedinner{text-align:center;background:transparent;height:35px;position:relative;z-index:999;}
* html, * html body{overflow-y:hidden;height:100%;}
* html #fixedinner{margin-right:-143px;voice-family: "\"}\""; voice-family:inherit; }
* html #fixedinner{margin-right:17px;}
* html #fixed {position:absolute;}
* html #outer-wrapper {height:100%;overflow:auto}
.toppica{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixgFmg1SPXfj6V8PHCRfLf25JuvFOuVvLcma-aM0b7rMGantwn8TjeIm7XRrAOIqDey50OCnxIz9G4nz14fc5X2YxAL3xKEFs-Kvy4OHjPmIjzm44NA4Wo_KnLzgVnJ0V3gx_mcl33C1w/s320/navbar.gif);width:100%;margin:0 auto;border-bottom:4px solid #666}
.topnav{width: 970px;height:35px;overflow: hidden;margin:0 auto;padding:0px 10px 0px 10px; }
h1{font-size:24px;}
#searcha{float:right;width:180px;height:20px;margin-top:5px;padding-right:5px}
#searcha form{float:left}
#searcha input[type="text"]{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzF4S5OfxOouSVqAmPywMuv_5kI_ndCzwFdX6hyfYov0RXTc5lJM_bzEnhFoH86NcrJNRQt0E9K4N2lgStz4G_06RmbCDXFsHElcWEgHJPqKOhofoGnv-Ilo4s3ccQRgLAIDlbpKY3QC8/s1600/search_button.png) no-repeat scroll 4px center;float:left;border:1px solid #ccc;width:146px;margin-top:1px;padding:3px 15px;font-size:12px;text-align:right}
#searcha input[type="text"]:focus{background:#FFF}
#searcha input[type="submit"]{display:none}
h1,h2,h3,h4{font-weight:700;font-family:'Open Sans', cursive;}
ul.isocial{list-style:none;margin:0;padding:5px 20px 0 0}
ul.isocial li{float:right;margin:0 5px;padding:0}
ul.isocial li a{float:right;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnt54eMRCOYOSz6avdvSci42X0CTUmErvZFomkLS7yLf48ftcQAuaon9oxeK6DW3-x2-uArioj7d_73-NjCgtrRrY8X-p1XM_YH-HJf3PJsUBYmybBZkFQmnO0QOK-pCyBVoZ28ub1nu0/s1600/social+letter.png);background-position:0 0;background:repeat:no-repeat;display:inline-block;text-indent:-9999px;overflow:hidden;width:24px;height:24px;position:relative}
ul.isocial li a.rss{background-position:0 0}
ul.isocial li a.rss:hover{background-position:0 -25px}
ul.isocial li a.facebook{background-position:-25px 0}
ul.isocial li a.facebook:hover{background-position:-25px -25px}
ul.isocial li a.twitter{background-position:-50px 0}
ul.isocial li a.twitter:hover{background-position:-50px -25px}
ul.isocial li a.google{background-position:-75px 0}
ul.isocial li a.google:hover{background-position:-75px -25px}
ul.isocial li a.youtube{background-position:-100px 0}
ul.isocial li a.youtube:hover{background-position:-100px -25px}

4. Cari kode <body>  kemudian copy paste kode dibawah ini tepat di bawahnya.

<div id='fixed'>
<div id='fixedinner'>
<div class='toppica'>
<div class='topnav'>
<div style='font:bold 16px Verdana;float:left;padding-top:8px;color:#aaa;'>
Selamat datang di Abitalita Blog
</div>
<div id='searcha'>
<form action='/search' class='search' id='searchform' method='get'>
<div>
<input name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Type and Enter&quot;;}' onfocus='if (this.value == &quot;Type and Enter&quot;) {this.value =&quot;&quot;;}' size='30' type='text' value='Type and Enter'/>
</div>
</form>
</div>
<div style='float:right;padding:0px 0px 5px 0px;'>
<ul class='isocial'>
<li><a class='rss' href='http://feedburner.google.com/fb/a/mailverify?uri=Abitalita Blog' target='_blank' title='Berlangganan via Email'/></li>
<li><a class='facebook' href='http://www.facebook.com/Abitalita Blog' target='_blank' title='FansPage Abitalita Blog'/></li>
<li><a class='twitter' href='https://twitter.com/Abitalita Blog' target='_blank' title='Twitter Abitalita'/></li>
<li><a class='google' href='https://plus.google.com/u/0/108693546003414204831' target='_blank' title='Google Plus Profile'/></li>
<li><a class='youtube' href='#' target='_blank' title='Video Abitalita'/></li>
</ul>
</div>
</div>
</div></div>
</div> 

 Keterangan :
- Ganti kode yang  berwarna kuning dengan  alamat feedburner sobat.
- Ganti kode  yang berwarna biru dengan alamat facebook sobat.
- Ganti kode yang berwarna hijau dengan alamat Twetter sobat.
- Ganti teks yang berwarna merah dengan alamat google plus sobat

5. Terakhir simpan template dan lihat hasilnya.
Demikian cara membuat menu navdar diatas header semoga bermanfaat....

6 komentar

Ijin save sob...sementara lagi dalam penataan...Trima kasih ya

pkk sob THANKSS BANGET INFONYA BERHASILNICHHH!!!!

MAJU TERUSS SOB

kunjungi juga yaaa http://ilmubloggersyahdan.blogspot.com

Sob. saya mau menu tab di atas header yang seperti blog ini, atau milik sobat ini. bagaimana caranya?

Kereen sob artikelnya :)
http://goo.gl/NIzJI3

Terima kasih atas kunjungannya, silahkan berkomentar sesuai topik. Menuliskan link aktif tidak akan ditampilkan dalam komentar.Terima Kasih.