-->

Cara Membuat Navbar Melayang Seperti Facebook

Membuat Navbar melayang ala facebook - dapat membuat cantik tampilan blog kita. Selain cantik,yang paling penting adalah apa fungsinya? Melayang maksudnya,meskipun halaman di scrool ke bawah,tapi navbar tersebut masih tetap terlihat. Dan di navbar tersebut bisa di selipkan seperti, Translate, Share, Random post, facebook page dan lainnya. Bila Sobat Semua Menginginkan Tolbar Atau Navbar Tersebut, Sobat Bisa Mengikuti Langkah-Langkah Berikut:

1. Login Ke Aku "Blogger" Sobat
2. Pada "Dasbor" Pilih Rancangan Kemudian Pilih "Edit HTML
3. Letakan CSS Berikut Tepat Diatas Kode ]]></b:skin>

/*-- CUSTOM NAVIGATION BAR--*/
* html #mta_bar{position:absolute}
#mta_bar{background:#000 url(http://3.bp.blogspot.com/_C6KkooKXCEw/TIBnl52l4iI/AAAAAAAAGx0/lVYBna0YOTI/s200/nav-background-c.png) top left repeat-x; border-bottom:1px solid #333; z-index:100; padding-top:6px; width:100%; top:0; left:0; overflow:auto; height:25px; 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(http://2.bp.blogspot.com/_C6KkooKXCEw/SjNkb64JO4I/AAAAAAAAEbI/oALk2rlXwdg/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}

/* SEARCH */
#search{border:1px solid #d1cdcd; height:18px; width:250px; padding:0; background:#f6f4f4; }
#search input{border:0; background:none; color:#575757}
#s{font-size:12px; width:230px; padding-left:4px; margin:0; background:none}
#topsearch #search{margin-top:0px;-moz-border-radius-bottomleft:3px;-moz-border-radius-bottomright:3px;-moz-border-radius-topleft:3px;-moz-border-radius-topright:3px;background-color:#FFFFFF;border:1px solid #000000;}
#topsearch #s{width:225px}
#footheader {
width: 100%;
float:left;
margin:0 0 0;
padding:0 0 0;
height:35px;
}
/* -- SET SMALL ICON-- */
#main .icon-demo-download {border:none; width:9px; height:9px; padding:0 0px; margin: 3px 0px 0 3px; vertical-align: top;}

#bottom-bottom{-moz-border-radius:4px; -khtml-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; letter-spacing:.0001em;font-size: 9pt;color:#ffffff;padding-left:10px;padding-right:10px; padding-top:10px; padding-bottom:10px; margin-bottom:5px; clear:both;
background:#111;
}



4. Kemudian Letakan Script Berikut Tepat Dibawah Kode <body>

<div id='mta_bar' style='position:fixed;'>
<div class='mta_bar bar_logo'>
<a href='http://ALAMAT BLOG AGAN.blogspot.com/'>Homel</a>
</div>
<div class='mta_bar bar_search'>
<div id='topsearch'>
<div id='search'>
<form action='http://ALAMAT BLOG AGAN.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..'/>
<input src='http://4.bp.blogspot.com/_C6KkooKXCEw/S_ux4s60thI/AAAAAAAAF0o/cifM6NFq5S8/s1600/search.gif' style='border: 0pt none ; vertical-align: top; padding-top:3px' type='image'/>

</form>
</div>
</div>
</div>
<div class='mta_bar bar_share'>
xxxxxxxx
</div>
<div class='mta_bar bar_GoogleAds'>
xxxxxxx
</div>
</div>



5.Simpan Templatenya

sumber : http://b-bloggerz.blogspot.com/2011/11/cara-membuat-navbar-melayang-seperti.html

Cara Membuat Navbar Melayang Seperti Facebook
  1. ini yang ane cari.. siap dipake.. thanks share'nya..

    ReplyDelete
  2. nice gan,,

    visit http://gopar-it.blogspot.com/

    ReplyDelete
  3. Thanks for share..

    http://sinaubengi.blogspot.com/

    ReplyDelete
  4. That is great to hear, thank you for reading!

    ReplyDelete