Iklan 300 x 250

Random Post

Recent Post

 

Membuat Menu Navigasi Terapung

Text Resizer: Click for Resizer
Bismillah membuat navigasi terapung halo sobat semua insyaallah saya akan share ilmu kepada sobat tentang membuat Menu navigasi terapung. Disebut menu navigasi terapung karena navigasi yang akan kita buat ini tidak akan terpengaruh oleh gerakan scrollbar baik keatas maupun kebawah, menu ini tetap diam pada tempatnya. Hasilnya seperti gambar dibawah ini. Atau jika kurang puas lihat pada demo blog ini.


Selain itu menu navigasi ini terapung ini sangat cocok untuk menempatkan menu-menu yang sering kita gunakan atau menempatkan suatu informasi menarik untuk para pengunjung. Bagaimana tertarik untuk membuatnya???

Berikut ini langkah-langkahnya.

  • Seperti biasa log in dulu ke account blogger sobat.
  • Setelah itu pada dasbor pilih rancangan kemudian Edit HTML.
  • Kemudian cari kode berikut ini ]]></b:skin> kemudian masukkan 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;
}

  • Kemudian cari lagi kode berikut ini <body>.
  • Setelah itu masukkan copas kode dibawah ini kemudian taruh diatasnya

<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="http://feeds.feedburner.com/sobat" title="Berlangganan Artikel">Langgan</a></li>
<li>|</li>
<li><a href="mailto:E-mailsobat@gmail.com" title="Email Nobinoku">Email</a></li>
<li>|</li>
<li><a href="http://blogsobat.blogspot.com/" title="Tentang Nobinoku" 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 terakhir Simpan template kemudian preview hasilnya

Ganti http://feeds.feedburner.com/sobat dengan Feed Burner kalian
Ganti http://blogsobat.blogspot.com/ dengan Url blog sobat.
Ganti E-mailsobat@gmail.com dengan alamat E-mail Sobat
Ganti XXXXXX dengan ID blog sobat.

Semoga berhasil......


Artikel Terkait:

Nobi Noku Ditulis oleh : Arga Anggriawan | BLOG : This Is My Art
Dalam Judul : Membuat Menu Navigasi Terapung
Dalam Kategori :
Saya hanyalah blogger pemula yang ingin belajar dan berbagi dengan sahabat, Semua artikel blog ini bersumber dari pengalaman saya dari dunia blogger.

11 komentar:

sibutiz mengatakan... Reply Comment

wach,kalau saya mah kapok utak atik HTML tu..
hhe hhee..
boleh tanya gak ka..??
kalau boleh,silahkan berkunjung ke blog saya dan lihat di atas nya ada yang kaya terlipat gitu dan kalau mouse di kesanakan akan terbuka..?
itu apa namanya dan saya ingin menghapusnya tapi lupa lagi kodenya..
thx..

oppie mengatakan... Reply Comment

Nice sob tapi sayang gak ada contohnya yang di gambar di atas diam saja

@oppie

ada koq sobat...bisa langsung melihat di tkp di http://demoblogqu99.blogspot.com/

selamat mencoba ya

Salam sahabat Wah bagus ya jadi tampil menarik makasih ya n maaf telat

w3ndy mengatakan... Reply Comment

susah nih kalo udah edit html, ga berbakat sih jadi gagal terus. :d

Tips yang bener-bener baru nemu nih, biar nanti tak coba semoga berhasil.

Hitsuke mengatakan... Reply Comment

yohohohoh..keren tips navigasi terapungnya..
Thanks gan! tak praktekin di blog ane yg lain deh.

mampir ke blog ane juga ya gan? ane tungguin di

Photoshop TutorialTips BlogHitsuke

makasih infonya....
bdw,,, ane dah nge-FOLLOW blog ente GAN, tolong follof balik yah.....

Yuda mengatakan... Reply Comment

gimana caranya buat powersaver kyk di blog ini ya ?
keren banget :)

wah aku paling senang edit html, soalnya biasa aku pake wordpress instalan....bingunng aku semuanya bahasa inggris

:r:

:a: :b: :c: :d: :e: :f: :g: :h: :i: :j: :k: :l: :m: :n: :o: :p: :q: :r: :s: :t: :u: :v: :w: :x: :y: :z:

Poskan Komentar

Bagi sobat-sobat silahkan comment disini, Insya Allah saya comment balik di blog anda.Blog ini Blog Do Follow,Trims atas kerja samanya

 
 
 

Temukan Kami Dalam FB

Sahabat Blogger

http://nobinoku.blogspot.com/

Tukeran Link Yuk..!! Silahkan copy kode di atas..!!
Saya akan segera link balik..!! Link & Banner Teman
powered by PRBbutton Powered by  MyPagerank.Net backlink Site Meter http://www.wikio.com Free Automatic Backlink
Check Google Page Rank
Cerita Seks Panas Dewasa 17Tahun
free counters
 
Copyright 2010 - 2011 © This Is My Art | Didukung Oleh : Blogger
Template Name : Evolution Magazine Template | Modification by : Argabluesky