-->

Cara Membuat Navbar Melayang Seperti Facebook

By di Wednesday, December 07, 2011
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYFrndKansK3CGM36kIR_t3k1_rmS3XV78pCCMYPwngzh2pnw6bqeVXc_5wvicQz2HALBINGNcODu4ghsW7-barupmDXepDRZaJjz1L6rreXmxtSKQ_PQAuGF79U701HMzul-y5DpGAQKV/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPjih7kQWTGgQdykNNzbiVcVMNS__6VUv0ezjUQ34tjLdOLWs1Zr8Sk5IoLkkh8QCMpLkxTVqeAr7G9zUPHA_04LdQGjTWsC1tTRsaJQNAMGBubmG5orWVJv3Qh3cev_FeyUtJqSchN2Q/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEJLehKC1TF1MvwbXoyqjtu3vYDlmPTd1iuHy_k7WE71fSFoa3SLW0x4lINXwPwqPuIOVRWu4IT6HVexsLDbt9L0j6VslhtDQE95hXy7ToQPmWgLQxzL5CEUZX-VWEeC6yIaAFhySaNiF9/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
Label terkait:
Blogger

Penulis: germondeso

YOUR DESCRIPTION HERE

Cara Membuat Navbar Melayang Seperti Facebook
  1. M. MuchlisWednesday, 18 January, 2012

    ini yang ane cari.. siap dipake.. thanks share'nya..

    ReplyDelete
  2. AnonymousWednesday, 04 April, 2012

    nice gan,,

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

    ReplyDelete
  3. UnknownSunday, 05 August, 2012

    Thanks for share..

    http://sinaubengi.blogspot.com/

    ReplyDelete
  4. ?Tuesday, 13 December, 2016

    Mana demo nya gan?

    ReplyDelete
  5. Diabetes InsipidusSaturday, 23 June, 2018

    That is great to hear, thank you for reading!

    ReplyDelete