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 Akun "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/AVvXsEhTX6BSg8KevM3SP14uHRceC33VdygHwUBraH890XXagQklES8ih1FYFm1-sKgWaIros8EC0gx_MLG4dbqeBURaCd2X9cTGqNUpqKoWaxVkfGcqwMdRAFAvu1DewtgpxHisQNtmNOXApA1V/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/AVvXsEgcYwAxEhwtuXtEYL6zzOZIynrWX9IBoiSQkVcKR0s4ZRx85Q_o1aNHZ4v7gUj-K9e10XYwCHA-NElDLhoxDGK0HIY8nyU6R3h_-1jLgksjIGDy84W_6eI09afhj2w8dwmF9pfJDFu0urg/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://imeldaentertainment.blogspot.com/ '>Homel</a>
</div>
<div class='mta_bar bar_search'>
<div id='topsearch'>
<div id='search'>
<form action=' http://imeldaentertainment.blogspot.com/ search' id='searchform' method='get' name='searchform'>
<input class='keyword' id='s' name='q' onblur='if (this.value == "") {this.value = "search..";}' onfocus='if (this.value == "Cari disini..") {this.value = ""}' type='text' value='Cari disini..'/>
<input src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP4LCYmH02feFxoiF2PiLMj-3hlZGa8LQDhk-yMR4LEWF_5eNVbNroOtYfXTYmBgH-UdTogKmP7X_cGJuqUjOKpXPATsOokZARN_ooq57N2sm-j_XKGSCkdu5dWdaUlMaFzEkOuPThIUkW/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. Ganti URL yang bewarna merah dengan URL sobat
6. Simpan dan selesai deh...
1. Login Ke Akun "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/AVvXsEhTX6BSg8KevM3SP14uHRceC33VdygHwUBraH890XXagQklES8ih1FYFm1-sKgWaIros8EC0gx_MLG4dbqeBURaCd2X9cTGqNUpqKoWaxVkfGcqwMdRAFAvu1DewtgpxHisQNtmNOXApA1V/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/AVvXsEgcYwAxEhwtuXtEYL6zzOZIynrWX9IBoiSQkVcKR0s4ZRx85Q_o1aNHZ4v7gUj-K9e10XYwCHA-NElDLhoxDGK0HIY8nyU6R3h_-1jLgksjIGDy84W_6eI09afhj2w8dwmF9pfJDFu0urg/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://imeldaentertainment.blogspot.com/ '>Homel</a>
</div>
<div class='mta_bar bar_search'>
<div id='topsearch'>
<div id='search'>
<form action=' http://imeldaentertainment.blogspot.com/ search' id='searchform' method='get' name='searchform'>
<input class='keyword' id='s' name='q' onblur='if (this.value == "") {this.value = "search..";}' onfocus='if (this.value == "Cari disini..") {this.value = ""}' type='text' value='Cari disini..'/>
<input src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP4LCYmH02feFxoiF2PiLMj-3hlZGa8LQDhk-yMR4LEWF_5eNVbNroOtYfXTYmBgH-UdTogKmP7X_cGJuqUjOKpXPATsOokZARN_ooq57N2sm-j_XKGSCkdu5dWdaUlMaFzEkOuPThIUkW/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. Ganti URL yang bewarna merah dengan URL sobat
6. Simpan dan selesai deh...
Selamat Mencoba yah...
Terimakasih sob. Lebih baik tulisannya diperjelas lagi. jangan pake block putih. Kunjungan balik ya... netfori.blogspot.com
BalasHapusmaksih atas koreksi nya" maaf banget ni gara2 ganti template jd banayk yg eror tek nya" ok mksh atas kunjungan nya di tunggu!!
BalasHapus