Trik Membuat Float Navbar Berada Dibawah

Float Navbar adalah navigation bar yang dari namanya sendiri "float" (melayang) jadi navbar ini tidak menempel pada element blog anda, sehingga jika anda scroll Up/Down, maka navbar ini akan tetap berada di bagian bawah blog anda. Ingin tau cara membuatnya?


Saya akan memberikan kepada anda script yang sudah saya edit, yang hasilnya anda bisa lihat sendiri di bagian bawah halaman blog ini.

Ikuti langkah-langkah berikut:

• Loggin to blogger>Layout>HTML/Javascript (jangan lupa click "Expand Widget Template")
• Anda cari code ini: ]]></b:skin> (untuk lebih mudahnya: tekan ctrl+F ; kemudian anda copy>paste code tersebut di kotak "find" kemudian tekan enter)
• Setelah anda menemukan code tersebut, letakan code tersebut diatas code: ]]></b:skin>

/* kode untuk navbar
--------------------------------------- */

#navbar-bawah img {
/* margin: 0px 0px -8px 0px; */
vertical-align: middle;
}

#navbar-bawah p.info {
float: right;
padding-right:40px;
line-height: 1.3;
height: 100%;
vertical-align: bottom;
}

#navbar-bawah p {
float: left;
margin: 0px;
padding-top:1px;
padding-left:40px;
line-height: 1.2;
vertical-align: bottom;
}

#navbar-bawah a {
color:#FFFFFF;
text-decoration:none;
}
#navbar-bawah a:hover{
color: #FF8000;
}
#navbar-bawah {
align: center;
position: fixed;
border-top: 1px transparent #ddd;
border-bottom: 1px transparent #FF8000;
background-color:#0B0B0B;
width: 100%;
left: 0px;
text-align: left;
color: #DF7401;
font-family: verdana;
font-size: 12px;
z-index:10000;
bottom:0;
}

KETERANGAN:

1. Anda bisa mengganti code warna yang berwarna merah sesuai dengan warna yang anda inginkan (code yang ada di script tersebut, sama persis seperti yang terdapat di blog ini)
2. Anda bisa melihat code warnanya DISINI
   

• Kemudian anda cari code: </body> , kemudian anda letakan code dibawah ini, tepat diatas code: </body>

<div id='navbar-bawah'>
<p><img border='0' src='http://sites.google.com/site/tipspack/background/LINK_EXCHANGE.jpg'/>&#160;&#160;&#160;

<a href='http://www.blogger.com/profile/09605865706748083663' target='_blank'> Authorized by</a>
&#160;&#160;&#160;<img border='0' src='http://sites.google.com/site/tipspack/background/note.jpg'/></p>

<p class='info'><a href='ymsgr:sendIM?xco_only'> <img src='http://opi.yahoo.com/online?u=xco_only&amp;m=g&amp;t=2&amp;2=us' style='width: 148px; height: 30px;'/></a> </p>

<p class='info'>Powered by <a href='http://www.blogger.com'>Tipspack</a> |
<a href='http://www.tipspack.blogspot.com' target='_blank'>http://tipspack.blogspot.com</a><br/>
Copyright © 2009</p>
</div>

• Silahkan anda "Preview" sebelum anda "Save Template".

Hasil dari script diatas adalah sama seperti yang ada di blog saya, jika anda ingin meng-editnya silahkan anda gunakan kreatifitas anda.

KETERANGAN:

• Ganti URL yang berwarna merah dengan URL logo blog anda.
• Ganti URL yang berwarna hijau dengan URL profile anda.
• Ganti URL yang berwarna Orange dengan URL foto/avatar anda.
• Ganti "xco_only" dengan Yahoo Messanger ID anda.
• Ganti tulisan-tulisan yang berwarna biru sesuai dengan blog anda.
• Preview terlebih dahulu hasil edit anda sebelum anda save, atau bila perlu Backup Full Template, sehingga jika terjadi kesalahan dalam pengeditan, anda hanya cukup meneg-upload kembali template anda.
  

Sumber info: http://www.retarixsite.co.cc