Memasang menu navigasi terapung ini pada blog
Langkah 1Login 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
/********************************Langkah 6
* 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;
}
Cari kode dibawah ini :
<body>Langkah 7
Tempatkan kode dibawah ini tepat dibawah kode pada Langkah 6
<div id='navigasi-apung'>Langkah 8
<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>
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.
