Cara Membuat Menu Navigasi Terapung Di Blog

Menu Navigasi Terapung - Sudah 2 hari tidak update posting blogger . Dan alhamdulillah kali ini saya bisa online dan update .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:

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:deejayhan@linuxmail.org" title="Email Admin">Email</a></li>

<li><a href="http://deejayhan.blogspot.com/" title="Tentang DeeJayHan" 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.

Referensi : Koderator Blog

Cara Membuat Menu Navigasi Terapung Di Blog

0 Response to "Cara Membuat Menu Navigasi Terapung Di Blog"

Posting Komentar