Cara Membuat Menu Navigasi Terapung. Bismillah membuat navigasi terapung halo sobat semua insyaallah saya akan share ilmu kepada sobat tentang membuat Menu navigasi terapung. Disebut menu navigasi terapung karena navigasi yang akan kita buat ini tidak akan terpengaruh oleh gerakan scrollbar baik keatas maupun kebawah, menu ini tetap diam pada tempatnya. Hasilnya seperti gambar dibawah ini. Atau jika kurang puas lihat pada demo blog ini.
Selain itu menu navigasi ini terapung ini sangat cocok untuk menempatkan menu-menuyang sering kita gunakan atau menempatkan suatu informasi menarik untuk para pengunjung. Bagaimana tertarik untuk membuatnya?
Berikut ini langkah-langkahnya.
- Seperti biasa log in dulu ke account blogger sobat.
- Setelah itu pada dasbor pilih rancangan kemudian Edit HTML.
- Kemudian cari kode berikut ini ]]></b:skin> kemudian masukkan kode dibawah ini diatasnya
/********************************
* 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;
}
- Kemudian cari lagi kode berikut ini <body>.
- Setelah itu masukkan copas kode dibawah ini kemudian taruh diatasnya
<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="http://feeds.feedburner.com/sobat" title="Berlangganan Artikel">Langgan</a></li>
<li>|</li>
<li><a href="mailto:E-mailsobat@gmail.com" title="Email Nobinoku">Email</a></li>
<li>|</li>
<li><a href="http://blogsobat.blogspot.com/" title="Tentang Nobinoku" 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>
- Langkah terakhir Simpan template kemudian preview hasilnya
Ganti http://feeds.feedburner.com/ sobat dengan Feed Burner kalian
Ganti http://blogsobat.blogspot.com/ dengan Url blog sobat.
Ganti E-mailsobat@gmail.com dengan alamat E-mail Sobat
Ganti XXXXXX dengan ID blog sobat.
Ganti kode warnanya sesuai selera sobat dengan tool warna ini
selesai dan baca juga Cara Memodifikasi Tampilan Komentar Blog
No Responses to "Cara Membuat Menu Navigasi Terapung"
Post a Comment