Sunday, April 12, 2009

Menu Navigasi Terapung

Posted by dav On 1:46 AM
Menu navigasi terapung adalah sebaris menu yang tidak terpengaruh oleh gerakan scrollbar baik keatas maupun kebawah, menu ini tetap diam pada tempatnya layaknya sebuah benda yang terapung diatas air. Seberapa tinggi air bertambah, benda tersebut akan tetap diatas air. Seberapa panjang suatu halaman blog, menu ini akan tetap pada tempatnya (diatas atau dibawah). Sebagai contoh Blogger Tune-Up menerapkan trik ini pada Kotretan Hendriono. Menu navigasi terapung atau dalam bahasa cingcoang-nya Float Navigation Bar (Float NavBar), sangat cocok untuk menempatkan menu-menu yang sering kita gunakan atau menempatkan suatu informasi menarik untuk para pengunjung.

Memasang menu navigasi terapung ini pada blog

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak" dan "Edit HTML"
Langkah 3
Backup template dan checklist "Expand Template Widget"
Langkah 4
Cari kode dibawah ini :
]]></b:skin>
Langkah 5
Tempatkan kode dibawah ini tepat diatas kode pada Langkah 4
/********************************
* 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 6
Cari kode dibawah ini :
<body>
Langkah 7
Tempatkan kode dibawah ini tepat dibawah kode pada Langkah 6
<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:hendriono@gmail.com" title="Email Hendriono">Email</a></li>
<li>|</li>
<li><a href="http://modification-blog.blogspot.com/" title="Tentang Hendriono" 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 8
Simpan Template dan Preview

Keterangan :
  • Lihat Langkah 5! Ubah parameter baris 10 dan baris 17 sesuai dengan selera. bottom:0; untuk menempatkan menu pada bagian bawah, ubah menjadi top:0; untuk menempatkannya pada bagian atas.
  • Lihat Langkah 6! Tempatkan kode pada Langkah 7 dibawah kode <body> atau diatas kode </body>, jika ditempatkan dibawah kode <body> maka menu akan di-load dan ditampilkan lebih dulu dari bagian lain, jika di tempatkan diatas kode </body> maka menu akan di-load dan ditampilkan terakhir setelah seluruh bagian blog ditampilkan sempurna.
  • Lihat Langkah 7! Ubahkah alamat link dan parameter lain sesuai dengan keinginan atau kebutuhan. Untuk menu Dasbor (Login, Entri Baru, Edit Entri, Pengaturan, dan Tata Letak) lihat pada artikel ini.
Selamat mencoba...! Happy blogging :)
,

Popular Posts