Cara Membuat Menu Navigasi Terapung Di Blog

Cara Membuat Menu Navigasi Terapung Di Blog

Assalamualaikum Warohmatullahi Wabarotkatuh

Hai Sobat BMCyber, Udah lama gak Posting tentang CSS atau yang lainnya lagi ini.. soalnya lagi ngurus mau kuliah ni,, hehe. oke mumpung lagi Free saya akan memposting tentang Cara Membuat Menu Navigasi Terapung Di Blog. saya dapat dari kakak Deejayhan

PreView

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 dan letakkan kode dibawah ini dibawahnya

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

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

Anda sedang membaca artikel tentang Cara Membuat Menu Navigasi Terapung Di Blog dan anda bisa menemukan artikel Cara Membuat Menu Navigasi Terapung Di Blog ini dengan url http://bmcyber.blogspot.com/2012/05/cara-membuat-menu-navigasi-terapung-di.html,anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel Cara Membuat Menu Navigasi Terapung Di Blog ini sangat bermanfaat bagi teman-teman anda,namun jangan lupa untuk meletakkan link Cara Membuat Menu Navigasi Terapung Di Blog sebagai sumbernya.