CARA MEMBUAT HEADER DIAM DITEMPAT

Selamat malam sobat semua,pada malam yang sunyi ini saya mau share tetang cara membuat header diam ditempat,sebenernya sudah banyak sekali para blogger master yang memuat tentang cara ini,saya cuma ikut-ikutan karena sebagai arsip saya.

Semua para blogger mendambakan dan menginginkan blog yang enak dipandang mata dan juga loading blog yang cukup ringan saat dibuka,banyak juga blog yang dengan tampilan menarik tapi loading yang lambat,jadi visitor buru-buru meninggalkan blog kita sebelum membaca artikel diblog kita,benar bukan sobat ?dengan begitu maka suatu kerugian yang sangat besar bagu kita.juga sebaliknyajika blog loading ringan tapi tampilannya acak-acakan maka visitor akan merasa jenuh dan tidak betah diblog kita,pertimbangkan kedua hal tersebut sobat ,lantas bagaimana solusinya ?


Cara ini adalah salah satu agar visitor betah diblog kita karena dengan adanya header ( menu navigasi ) yang tetap berada ditempat.sayangnya ada beberapa navigasi menu yang dipasang malah membuat loading blog kita menjadi berat,tapi dengan menerapkan cara yang satu ini maka akan membuat tampilan blog jadi menarik dan lodingnya juga standar,jika sobat tertarik dan ingin membuat navigasi menu yang diam ditempat silahkan ikuti beberapa langkah berikut :

1.Login dashbor sobat
2.Pilih Tata letak
3.Pilih Tambah gadget
4.Pilih HTML / java scipt lalu masukan code dibawah ini di dalam java script

<style type="text/css">
#search {float:right; padding:4px; display:inline;}
#fixed {position:fixed; top:0; left:2%; width:96%; height:33px; background:black; font-size:13px; font-family:Comic Sans Ms; color:white; font-weight:bold; border-bottom:3px solid #111; box-shadow:0 0 5px white; -moz-box-shadow:0 0 5px white; -webkit-box-shadow:0 0 5px white; -khtml-box-shadow:0 0 5px white;}
#menu {margin:opx; padding:0px;}
#menu ul, #menu li {float:left; list-style:none; margin:0px; padding:0px;}
#menu li a, #menu li a:link, #menu li a:visited {color:#fae7df; display:block; margin:0px; padding:9px 10px;}
#menu li a:hover, #menu li a:active{background:purple; color:#fff; margin:0px; padding:9px 10px; text-decoration:none;}
#menu li li a, #menu li li a:link, #menu li li a:visited {background:#ED4A05; width:150px; color:#fae7df; font-family:sans-serif; margin:0px; padding:9px 10px; border:1px solid #FF7800;}
#menu li li a:hover, #menu li li a:active {background:purple; color:#fff; padding:9px 10px;}
#menu li ul {z-index:9999; position:absolute; left:-999em; height:33px; width:170px; margin:0px; padding:0px;}
#menu li ul a {width:140px;}
#menu li ul ul {margin:-34px 0 0 170px;}
#menu li:hover ul ul, #menu li:hover ul ul ul, #menu li.sfhover ul ul, #menu li.sfhover ul ul ul {left:-999em;}
#menu li:hover ul, #menu li li:hover ul, #menu li li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul, #menu li li li.sfhover ul{left:auto;}
#menu li:hover, #menu li.sfhover{position:static;}
</style>

<br />
<div id="fixed">
<div id="search">
<form action="/search" method="get">
<input name="p" placeholder="" size="23" style="font-size: 14px;" type="text" />
  <input style="font-size: 14px;" type="submit" value="search" />
  </form>
</div>
<div id="menu">
<ul>
<li><a href="Url Blog Sobat/">Home</a></li>
<li>
<a href="http://www.blogger.com/blogger.g?blogID=2655030301552248393#">Contact</a>
<ul>
<li><a href="Url Blog Sobat/">Contact Me</a></li>
<li><a href="https://plus.google.com/ ID GOOGLE + S">Google +</a></li>
<li><a href="https://www.facebook.com/ ID FACEBOOK SOBAT">Facebook</a></li>
<li><a href="Url Blog Sobat/">Twitter</a></li>
</ul>
</li>
<li>
<a href="http://www.blogger.com/blogger.g?blogID=2655030301552248393#">Categories</a>
<ul>
<li><a href="Url Blog Sobat//">Cara-cara</a></li>
<li><a href="Url Blog Sobat//">Memasak</a></li>
<li><a href="Url Blog Sobat//">Jawa</a></li>
<li><a href="Url Blog Sobat//">Software</a></li>
<li><a href="Url Blog Sobat//">Video lucu</a></li>
</ul>
</li>
<li><a href="Url Blog Sobat//">Game Online</a></li>
<li><a href="Url Blog Sobat//search/label/FREE%20GAME%20PC/">GAME PC</a></li>
<li><a href="Url Blog Sobat//2013/08/tv-online.html">TV Online</a></li>
<li><a href="Url Blog Sobat//">Music</a></li>
<li><a href="Url Blog Sobat//">Movie</a></li>
</ul>
</div>
</div>

5.Klik save

Tambahan :
sillahkan sobat ganti tulisan yang berwarna merah dengan URL blog sobat.selamat mencoba