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 == "") {this.value = "Type and Enter";}' onfocus='if (this.value == "Type and Enter") {this.value ="";}' 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
silahkan sob..:)
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.