Sabtu, 19 September 2009

Membuat Float Navigation Bar

Hampir mirip dengan NavBar bawaan blogger, namun bentuknya float dan lebih sederhana.
Untuk membuatnya ikuti langkah-langkah berikut:
1. Masuk ke Layout -Edit HTML
2. Centang Expand Widget Template.
3. Cari kode ini ]]></b:skin>
4. Letakkan kode dibawah ini tepat diatas kode yang tadi.


/********************************
* Navigasi Apung *
*********************************/
#navigasi-apung
{
align: center;
position: fixed;
border-top: 1px solid #fff;
border-bottom: 1px solid #000;
background-color: #c0c0c0;
width: 100%;
left: 0px;
color: #000;
z-index:10000;
opacity: 0.8;
filter: alphaundefinedopacity: 80);
bottom:0;
}
#navigasi-apung:hover
{
opacity: 1;
filter: alphaundefinedopacity: 100);
}
#navigasi-apung a
{
color: #000;
font-weight:bold;
}
/********************************
* Navigasi Apung Kiri *
*********************************/
.kiri_apungmnu
{
float:left;
list-style-type:none;
padding:0;
margin:3px 0px 3px 5px;}
.kiri_apungmnu li
{
padding: 0px 0px 0px 3px;
margin-left:2px;
float:left;
color:#000;
font:normal 11px arial;
}
.kiri_apungmnu li a
{
display:block;
font:normal 11px arial;
width:auto;
float:left;
text-decoration:none;
}
.kiri_apungmnu li a:hover
{
text-decoration:none;
}
/********************************
* Navigasi Apung Kanan *
*********************************/
.kanan_apungmnu
{
float:right;
list-style-type:none;
padding:0;
margin:3px 5px 3px 0;
}
.kanan_apungmnu li
{
padding: 0 0 0 3px;
margin-left:2px;
float:left;
color:#000;
font:normal 11px arial;
}
.kanan_apungmnu li a
{
display:block;
font:normal 11px arial;
width:auto;
float:left;
text-decoration:none;
}
.kanan_apungmnu li a:hover
{
text-decoration:none;
}


5. Yang di cetak tebal bisa kamu ganti sesuai keinginan. Kemudian cari kode ini  <body>
6. Letakkan kode dibawah ini setelah kode yang tadi.


<div id='navigasi-apung'>
<ul class="kiri_apungmnu">
<li><a href="/" title="Halaman Utama">Beranda</a></li>
<li>|</li>
<li><a href="/search?max-results=50" title="Daftar Isi">Daftar Isi</a></li>
<li>|</li>
<li><a href="/feeds/posts/default" title="Baca via Feed" target="_blank">Feed</a></li>
<li>|</li>
<li><a href="" title="Berlangganan Artikel">Langgan</a></li>
<li>|</li>
<li><a href="mailto:chungkring@gmail.com" title="Email Adhiets">Email</a></li>
<li>|</li>
<li><a href="http://adhiets.blogspot.com/" title="Tentang Adhiets" target="_blank">Tentang</a></li>
</ul>
<ul class="kanan_apungmnu">
<li><a href="http://www.blogger.com/" title="Blogger Login" target="_blank">Login</a></li>
<li>|</li>
<li><a href="http://www.blogger.com/post-create.g?blogID=XXXXXX" title="Entri Baru">Entri Baru</a></li>
<li>|</li>
<li><a href="http://www.blogger.com/posts.g?blogID=XXXXXX" title="Edit Entri">Edit Entri</a></li>
<li>|</li>
<li><a href="http://www.blogger.com/blog-options-basic.g?blogID=XXXXXX" title="Pengaturan">Pengaturan</a></li>
<li>|</li>
<li><a href="http://www.blogger.com/rearrange?blogID=XXXXXX" title="Tata Letak">Tata Letak</a>
</li>
</ul>
</div>


Simpan dan lihat hasilnya.

Tidak ada komentar:

Posting Komentar