Cara pembuatan Float Navigation Bar

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 ini :

Langkah 4:
Copy code di bawah ini di atas kode  ]]></b:skin> .


/********************************
* 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 </div>

Kode tersebut harus di akhir template, hati-hati karena kode di atas akan ditemukan banyak sekali, dan kode ini harus yang di akhir template.

Langkah 6
Masukan (copy/paste) kode di bawah ini di bawah kode  </div>  :

<!-- 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://www.pisbon.co.cc' target='_blank' title='Highlight'>Highlight</a></li>
<li>|</li>
<li><a href='http://pisbon.blogspot.com/' target='_blank' title='Pisbon'>Powered</a></li></ul>
<ul class='r_floatmnu'><li><a href='ymsgr:sendIM?fishbonec' 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://pisbon.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://body-mulus.blogspot.com' target='_blank' title='Khusus +17'>Sexy Photo</a></li> 
</ul></div>
<!-- Akhir Float Navigation Bar -->

Langkah 7
Simpanlah template dengan klik tombol "SIMPAN TEMPLATE" Dapatkan Uang dari Blog Anda dengan BidVertiser


Related Posts:
Thank you for your visit. Support Pisbon™

1 comment

  1. Thanks for sharing this valuable resource with us. I'm sure it will be a valuable asset for many people.Also, have a look on these CISCO products:

    ws-c2960x-48td-l
    ws-c2960l-16ps-ll
    isr4331/k9
    ws-c2960x-48fpd-l
Maaf spam dan link promosi yang kelewatan masuk spam... makasih dan sekali lagi maaf