MEMBUAT HEADER/MENU/NAVBAR TIDAK BERGERAK SEPERTI FACEBOOK


hai gan.. nih aku mau bagi-bagi cara deh buat menu yang tetap kayak punya facebook atau paling banyak sering di cari itu menu  fix. gag ya sama saja deh.... ini asli kl gag percaya silahkan lihat tuh menu di blog saya... iya kan... kelihatan.... menu searchnya aja bisa gerak.. kan keren tuh.. hahahaha.. dah bosen dengerin aku ceramah ya.... ok dah langsung aja ke pembahasan ok

1.buka blog kalian
2.TEMPLATE
3. EDIT HTML
4. kilk CTRL+F cari kode  ]]></b:skin>
5. lalu copas kode dibawah ini di atas kode ]]></b:skin>

/* search */
.menujohanes{position:relative;}
#search input[type="text"]:hover {width:848px;}
#search input[type="text"] {
background: #fff url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig1ILpLVNMVQfPFAa-FcDmpaWqagJadIP4H4etZmg5qfXTTaC6oj5lSJBDJ-3orZtvZxYp747jOILCeKdXxA8nSPuvY0pDMxYjzHToNAzln61dTIARSA8Kd4e2Q5MUNL9RdnfPJv_ypGcv/s0/search_32x32-32.png")no-repeat center left;
font-size: 13px;
color: #222;
width: 0px;
padding: 10px 0px 11px 35px;
z-index: 9;
border: 1px solid #fff;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
margin-bottom: -1px;
position: absolute;
top: 0px;
right:27px;}
#main4, #main5, #main6 {
width: 303px;
list-style-type: none;
float: left;
margin: 10px;}
.main3 {width:305px;
list-style-type: none;
padding-top: 10px;
float: left;}
::-webkit-scrollbar {
height:12px;
background: #474747;}
::-webkit-scrollbar-thumb {
background-color: #000;
}

/*-- CUSTOM NAVIGATION BAR--*/
* html #mta_bar{position:absolute}
#mta_bar{background:#007cbb  top left repeat-x; border-bottom:1px solid #007cbb; z-index:100; padding-top:6px; width:100%; top:0; left:0; overflow:auto; height:30px; overflow:hidden}
#mta_bar .bar_logo{background:url(http://1.bp.blogspot.com/_C6KkooKXCEw/SiwZH4BjB-I/AAAAAAAAEX4/qw31k-6bjzo/s400/feed.gif) 7px 2px no-repeat; float:left; padding-left:7px; text-align:left; font-family:Arial; font-size:14px; font-weight:bold; font-style:normal; color:#fff; width:200px; padding-left:20px;padding-top:1px}
#mta_bar .bar_logo a{text-decoration:none; color:#fff; padding-left:21px}
#mta_bar .bar_search{float:left; padding:0; margin:0; text-align:left; font-family:tahoma; font-size:14px; font-weight:bold; font-style:normal; color:#fff; width:165px}
#mta_bar .bar_search a{text-decoration:none; color:#fff; padding-left:21px; padding:0}
#mta_bar .bar_search a:hover{text-decoration:underline; color:#fff}
#mta_bar .bar_navbarmenuleft{float:right; text-align:left; font-family:tahoma; font-size:13px; font-weight:normal; font-style:normal; color:#999; width:468; padding:3px 1px}
#mta_bar .bar_submit{float:left; text-align:left; font-family:arial; font-size:13px; font-weight:normal; font-style:normal; color:#fff; padding:3px 0; width:140px}
#mta_bar .bar_submit a{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkdajCvIgyhoP-LR5DLWrQ8jURQTq7kDj8FOVcOwv-3fhiAHcvm9XE9dzRFHG27H9WDBV31bM7fEDfjj4YkEbXSWX3L0lmfnB43VLBPfbMfwEkLkoZ6qq0-fRYNqUmMO9_CRpAjb-PZVw/s400/facebook.png) 0 no-repeat; text-decoration:none; color:#fff; padding-left:21px}
#mta_bar .bar_submit a:hover{text-decoration:underline; color:#fff}
yang saya blog pakek warna merah itu adalah warna backgroundnya 
6. cari kode</head>
tulis kode dibawah ini pas dibawahnya kode</head>
<div id='mta_bar' style='position:fixed;'>
<div class='mta_bar bar_logo'>
<a href='http://arekindo.blogspot.com/'>arekindo | </a>
  <a href='http://arekindo.blogspot.com/p/iklan.html'>Contact Us</a>
</div>
<div class='mta_bar bar_search'>

<div id='search'>
<form action='http://arekindo.blogspot.com/search' id='searchform' method='get' name='searchform'>
<input class='keyword' id='s' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;search..&quot;;}' onfocus='if (this.value == &quot;Cari disini..&quot;) {this.value = &quot;&quot;}' type='text' value='Cari disini..'/>

</form>
</div>
</div>

</div>

lalu simpan deh templatenya... ok.. pasti berhasil.... ok.... 

Load disqus comments

0 komentar