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 ]]>
1. Login Ke Aku "Blogger" Sobat
2. Pada "Dasbor" Pilih Rancangan Kemudian Pilih "Edit HTML
3. Letakan CSS Berikut Tepat Diatas Kode ]]>
/*-- 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsC2FTvXOYnTxdr3gpumqct5UXMPsT-lxbLukfBBXxMvbPuRMTt9_l9_BnWCJZYfrzyKfwQn54JoqlkRAXOwKQqKUbBD3m5mCC-4ZwPvmcl9BX780OUJeNiDClLXHcyK1GC9MNvQnbg04/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
5.Simpan Templatenya
sumber : http://b-bloggerz.blogspot.com/2011/11/cara-membuat-navbar-melayang-seperti.html
Source: http://germo-ndeso.blogspot.com/2011/12/cara-membuat-navbar-melayang-seperti.html#ixzz3PTQ8Sobz
Tidak ada komentar:
Posting Komentar