Float Navigation Bar

Float Navigation Bar atau dalam bahasa Indonesia kurang lebih sama dengan Baris Navigasi Terapung. Dalam artikel kali ini kita akan mencoba membuat suatu navigasi blog dengan posisi yang terapung atau seperti ditempelkan dalam blog kita, bisa ditempatkan diatas atau dibawah blog dan posisi tersebut selalu tetap tidak berubah walaupun kita menggeser scrollbar keatas dan kebawah. Navigas ini sangat membantu bagi blog yang pembuatan artikelnya tidak tetap dalam pemenggalannya (readmore...), dan atau blog yang memiliki halaman panjang, sehingga pengunjung tidak harus kembali lagi keatas halaman jika ingin mencari artikel lain dalam blog kita.

Berikut tahap pembuatan Float Navigation Bar :
Langkah 1
Login ke blogger
Langkah 2
Aktifkan Tab "Tata Letak - Edit HTML" jangan lupa check "Expand Widget Template"
Langkah 3
Cari kode dibawah ini :

]]></b:skin>

Langkah 4
Masukan (copy/paste) kode dibawah ini diatas kode Langkah 3 :

/********************************
* Float Navbar *
*********************************/
#float-navbar
{
align: center;
position: fixed;
border-top: 1px solid #ddd;
border-bottom: 1px solid #f5f5f5;
background-color: #f5f5f5;
width: 100%;
left: 0px;
color: #000;
z-index:10000;
opacity: 0.8;
filter: alphaundefinedopacity: 80);
bottom:0;
}
#float-navbar:hover
{
opacity: 1;
filter: alphaundefinedopacity: 100);
}
#float-navbar a
{
color: #000;
font-weight:bold;
}
/********************************
* Left Float Navbar *
*********************************/
.l_floatmnu
{
float:left;
list-style-type:none;
padding:0;
margin:3px 0 3px 5px;
}
.l_floatmnu li
{
padding: 0 0 0 3px;
margin-left:2px;
float:left;
color:#000000;
font:normal 11px arial;
}
.l_floatmnu li a
{
display:block;
font:normal 11px arial;
width:auto;
float:left;
text-decoration:none;
}
.l_floatmnu li a:hover
{
text-decoration:underline;
}
/********************************
* Right Float Navbar *
*********************************/
.r_floatmnu
{
float:right;
list-style-type:none;
padding:0;
margin:3px 5px 3px 0;
}
.r_floatmnu li
{
padding: 0 0 0 3px;
margin-left:2px;
float:left;
color:#000000;
font:normal 11px arial;
}
.r_floatmnu li a
{
display:block;
font:normal 11px arial;
width:auto;
float:left;
text-decoration:none;
}
.r_floatmnu li a:hover
{
background-color: #f5f5f5;
opacity:1;
color:#ff0000;
}

Langkah 5
Cari kode dibawah ini :

</div>

Kode tersebut harus diakhir template, hati-hati karena kode diatas akan ditemukan banyak sekali, dan kode ini harus yang diakhir template.
Langkah 6
Masukan (copy/paste) kode dibawah ini dibawah kode Langkah 6 :

<!-- Awal Float Navigation Bar -->
<div class='section' id='float-navbar'>
<ul class='l_floatmnu'>
<li><a expr:href='data:blog.url' title='Halaman Utama'>Home</a></li>
<li>|</li>
<li><a href='http://NAMA-BLOG.blogspot.com/search?max-results=300' title='Daftar isi'>Daftar Isi</a></li>
<li>|</li>
<li><a href='http://www.feedburner.com/fb/a/emailverifySubmit?feedId=2264909' target='_blank' title='Berlangganan via eMail'>Langganan</a></li>
<li>|</li>
<li><a href='http://www4.shoutmix.com/?hendriono' target='_blank' title='Tinggalkan Pesan'>Shout Chat</a></li>
<li>|</li>
<li><a href='http://dedehendriono.blogspot.com/' target='_blank' title='Tentang Hendriono'>Tentang Saya</a></li>
</ul>

<ul class='r_floatmnu'>
<li><a href='ymsgr:sendIM?dedehendriono@yahoo.com' title='Chatting bersamaku'>Chatting</a></li>
<li>|</li>
<li><a href='javascript:window.printundefined)' title='Print Halaman Ini'>Print Artikel Ini</a></li>
<li>|</li>
<li><a href='http://dedehendriono.blogspot.com' target='_blank'><script src='http://fastonlineusers.com/on2.php?d=NAMA-BLOG.blogspot.com' type='text/javascript'/> User Online</a></li>
<li>|</li>
<li><a href='http://easyhitcounters.com/stats.php?site=hendriono' target='_blank'><img alt='Free Web Counters' border='0' src='http://beta.easyhitcounters.com/counter/index.php?u=hendriono&amp;s=tiny'/></a><script src='beta.easyhitcounters.com/counter/script.php?u=hendriono'/></li>
</ul>
</div>
<!-- Akhir Float Navigation Bar -->

Langkah 7
Simpanlah template dengan klik tombol "SIMPAN TEMPLATE"

Keterangan :

• Ubahlah NAMA-BLOG sesuai dengan nama/alamat blog anda
• Ubahlah feedId=2264909 dengan feedId anda yang dapat diperoleh di Feed Burner
• Ubahlah shoutmix.com/?hendriono dengan alamat ShoutMix anda
• Ubahlah alamat web counter yang anda peroleh dari sini
• Untuk mengubah posisi Float Navigation Bar, ubahlah bottom menjadi top pada CSS (Cascading Style Sheet)