2009-09-20

Membuat Float Navigation Bar

Hampir mirip dengan NavBar bawaan blogger, namun bentuknya float dan lebih sederhana.
Untuk membuatnya ikuti langkah-langkah berikut:
1. Masuk ke Layout -Edit HTML
2. Centang Expand Widget Template.
3. Cari kode ini ]]></b:skin>
4. Letakkan kode dibawah ini tepat diatas kode yang tadi.


/********************************
* 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;
}


5. Yang di cetak tebal bisa kamu ganti sesuai keinginan. Kemudian cari kode ini  <body>
6. Letakkan kode dibawah ini setelah kode yang tadi.


<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:chungkring@gmail.com" title="Email Adhiets">Email</a></li>
<li>|</li>
<li><a href="http://adhiets.blogspot.com/" title="Tentang Adhiets" 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 dan lihat hasilnya.

9 komentar:

Bang Del on 20 September 2009 at 19:04

Mengucapkan SELAMAT HARI RAYA IDUL FITRI untuk Tips Tricks, Tutorial, Blogging, Bisnis Online, Aditya Ramadan & Seluruh pengunjung blog ini...

Seno Rasca on 22 September 2009 at 09:55

navbarnya keren bro, tapi ada pengaruh minusnya ga sama blogger.com? By de way met Idul Fitri maaf lahir batin.

Mbah Gendeng on 11 November 2009 at 12:37

makasih mas tutorialnya sangat bagus langsuung coba

labecan on 20 November 2009 at 16:36

wah patut dicoba ni :D

belajar seo blog on 9 December 2009 at 04:36

tutorial yang sangat bagus untuk mengembalikan jati diri bangsa semoga terus memberikan tutorial yang banyak

Onc0m on 15 December 2009 at 00:45

niceeeeeeeeeeeeeeeee......

aksesoris mobil terios on 29 May 2013 at 14:02

okeh sip gan..thx for share...izin bookmark

App Development Company on 30 March 2017 at 15:37

Great article, Thanks for your great information, the content is quiet interesting. I will be waiting for your next post.

google gamers on 2 August 2021 at 17:05

free classic mahjong
Cookie Crush 2
bug match
candy rain 4
Candy Rain 3
bike racing 2
Fly with Rope 2
bubble shooter saga 2
Crazy Birds 2

Leave a Comment

Silahkan menuliskan komentar anda pada opsi Google/Blogger untuk anda yang memiliki akun Google/Blogger.
Silahkan pilih account yang sesuai dengan blog/website anda (LiveJournal, WordPress, TypePad, AIM).
Pada opsi OpenID silahkan masukkan URL blog/website anda pada kotak yang tersedia.
Atau anda bisa memilih opsi Nama/URL, lalu tulis nama anda dan URL blog/website anda pada kotak yang tersedia.

Jika anda tidak punya blog/website, kolom URL boleh dikosongkan.
Gunakan opsi 'Anonim' jika anda tidak ingin mempublikasikan data anda. (sangat tidak disarankan). Jika komentar anda berupa pertanyaan, maka jika anda menggunakan opsi ini tidak akan ditanggapi.