Menu Navigasi Terapung

April 29, 2012

Menu Navigasi Terapung - Jika sebelumnya kita sudah membuat Menu Drop Down Multi Level CSS3 dan Mega Menu jQuery CSS maka kali ini kia akan membuat menu yang berbeda pula, dan di minggu yang cerah ini saya akan menerangkan cara membuat Menu Navigasi Terapung.

Apa itu Menu Navigasi Terapung? Menu navigasi terapung adalah suatu menu yang menyediakan jalan pintas untuk suatu web ataupun blog denagan dalih mempersingkat pencarian dan mempermudah dalam segi pemakaian, menu terapung ini berada dibagian bawah dan selalu mengikuti scroll ataupun ketika reader menuju bawah blog maka denagn otomatis menu ini mengikuti kemanapun kita pergi, entah keatas ataupun kebawah.
Dalam hal tutorial di Blogger memang jika dikupas tiada habisnya, pastilah setiap hari adapula tutorial baru, entah tutorial dengan jenis jQuery ataupun CSS.
Preview:

Demo

Memasang Menu Navigasi Terapung

Langkah 1
Login ke Blogger
Masuk ke "Rancangan - Edit HTML"
Cheklist "Expand Template Widget"
Langkah 2
Cari kode ]]></b:skin> dan letakkan 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;
}

Langkah 3
Kemudian cari kode <body> dan letakkan kode dibawah ini dibawahnya

<li><a href="/" title="Halaman Utama">Beranda</a></li>

<li><a href="/search?max-results=50" title="Daftar Isi">Daftar Isi</a></li>

<li><a href="#" title="Berlangganan Artikel">Langgan</a></li>

<li><a href="mailto:irhamwae@gmail.com" title="Email Koderator">Email</a></li>

<li><a href="http://koderator-blog.blogspot.com/" title="Tentang Koderator" target="_blank">Tentang</a></li>

</ul>

<li><a href="http://www.blogger.com/" title="Blogger Login" target="_blank">Login</a></li>

<li><a href="http://www.blogger.com/post-create.g?blogID=XXXXXX" title="Entri Baru">Entri Baru</a></li>

<li><a href="http://www.blogger.com/posts.g?blogID=XXXXXX" title="Edit Entri">Edit Entri</a></li>

<li><a href="http://www.blogger.com/blog-options-basic.g?blogID=XXXXXX" title="Pengaturan">Pengaturan</a></li>

<li><a href="http://www.blogger.com/rearrange?blogID=XXXXXX" title="Tata Letak">Tata Letak</a>

</li>

</ul>

</div>

Keterangan:
Pada kode diatas yang di blok merah silahkan di Edit sesuai keperluan sobat
dan yang XXXXXX gantilah dengan ID blog sobat.

Artikel Information:
Source: Blogger Tune-Up
Title: Menu Navigasi Terapung

Labels: Menu Navigasi

2 Komentar:

Blog Everything Sharing said on February 4, 2013 at 8:49 PM

di coba dulu gan ! makasih atas infonya ! CTRL + D dulu, mau tidur !

agusgt said on May 2, 2013 at 10:49 AM

Thanks gan atas infonya,

ditunggu ya kunjungan baliknya

koderator

Menu Navigasi Terapung

April 29, 2012

2 Komentar:

Post a Comment