Cara Membuat Menu Navigasi Melayang (Floating)

Membuat Menu Navigasi Melayang (Floating) - Ficri Pebriyana
Cara Membuat Menu Navigasi Melayang (Floating) - Membuat menu navigasi baru diatas header tetapi menu navigasu tersebut melayang atau floating saat kita scroll kebawah akan selalu mengikuti, ini menggunakan siste z-index yang dimana jika kita menggunakan sistem z-index ini seolah-olah terlihat melayang. Membuat menu melayang pada blog sangatlah mudah, kali ini blog Ficri Pebriyana akan membahas mengenai Cara Membuat Menu Navigasi Melayang (Floating) Pada Blog, menu melayang ini disimpan diatas header dan mengikuti ketika kita scroll kebawah.

Terkadang dalam sebuah navigasi kita masih membutuhkan ruangan kosong untuk menambahkan beberapa tulisan dalam navigasi, namun navigasi tersebut sudah penuh dan tidak ada tempat lagi, dan akhirnya membuat navigasi baru yang dinamakan top navigasi atau navigasi diatas header dengan memberikan efek melayang atau floating. Menu floating ini sudah valid html5 dan css3 tetapi mungkin akan menyebabkan sedikit error pada css3. Saya buat tutorial membuat menu navigasi melayang karena salah satu pengunjung meminta tutorial membuat menu melayang atau floating jadi saya akan membagikannya sekarang. Silahkan simak tutorial membuat menu navigasi melayang diatas header dengan efek floating dibawah ini :
1. Masuk ke Blogger.com
2. Klik Template => Edit HTML
3. Cari kode ]]></b:skin>
4. Copy kode css dibawah ini, lalu Paste diatas kode ]]></b:skin>
/*Nav Menu*/
#top-BD{background:#333;box-shadow:0 1px 3px rgba(0,0,0,0.4);height:48px;width:100%;min-width:970px;position:fixed;top:0;left:0;z-index:9999;overflow:hidden;border-bottom:1px solid #000}
#top-BD ul{margin:0 auto;width:970px;list-style-type:none;height:30px}
#top-BD ul li{float:left}
#top-BD ul li a{position:relative;line-height:28px;border:1px solid;padding:10px 5px;color:#aaa;font-size:13px;text-shadow:0 -1px 0 #000;display:block;text-decoration:none;font-weight:700;text-transform:uppercase;font-family:Geneva,Arial,Helvetica,sans-serif}
#top-BD ul li a:hover{color:#fff;border-top:3px solid #aaa}
.BDsosial a{display:block;height:50px;width:50px;padding:0 4px;float:right;background:url(http://1.bp.blogspot.com/-hQKmPzvFCU8/Ue7FWBeCjMI/AAAAAAAABk8/0iFSHsrQijo/s1600/Sharing+buttons.png) no-repeat transparent;-webkit-transition:ease-in 0.2s all;-moz-transition:ease-in 0.2s all;transition:all 0.2s ease-in;cursor:pointer}
.BDsosial a.googleplus{background-position:0 -58px}
.BDsosial a.googleplus:hover{background-position:0 0}
.BDsosial a.twitter{background-position:0 -290px}
.BDsosial a.twitter:hover{background-position:0 -232px}
.BDsosial a.facebook{background-position:0 -406px}
.BDsosial a.facebook:hover{background-position:0 -348px}
.BDsosial a.rss{background-position:0 -174px}
.BDsosial a.rss:hover{background-position:0 -116px}
5. Lalu cari kode <body>
6. Copy kode html dibawah ini, lalu Paste dibawah kode <body>
<div id='top-BD'>
<ul>
<li><a href='http://ficripebriyana.blogspot.com' target='_blank' title='Ficri Pebiryana'>Ficri Pebiryana</a></li>
<li><a href='http://ficripebriyana.blogspot.com' target='_blank' title='Sitemap'>Sitemap</a></li>
<li><a href='http://ficripebriyana.blogspot.com' target='_blank' title='Privacy Policy'>Privacy Policy</a></li>
<li><a href='http://ficripebriyana.blogspot.com' target='_blank' title='Disclaimer'>Disclaimer</a></li>
<li><a href='http://ficripebriyana.blogspot.com' target='_blank' title='Contact'>Contact</a></li></ul>
<div class='BDsosial' style='margin:-30px 50px 0 0;'>
<a class='rss' href='http://ficripebriyana.blogspot.com' rel='external nofollow' target='_blank' title='RSS Link'>
</a>
<a class='googleplus' href='https://plus.google.com/+FicriPebriyana' rel='external nofollow' target='_blank' title='googleplus'>
</a>
<a class='facebook' href='https://www.facebook.com/ficri12' rel='external nofollow' target='_blank' title='facebook'>
</a>
<a class='twitter' href='https://twitter.com/FicriPebriyana' rel='external nofollow' target='_blank' title='twitter'>
</a>
</div> 
</div>
Catatan :
- Ganti Link diatas dengan Link milik Anda.
- Ganti tulisan yang berada di title='Ini Ganti' dengan tulisan Anda sendiri.

Dengan menggunakan menu navigasu melayang (floating) maka header atau judul blog Anda akan sedikit tertutup atau bahkan akan tertutup, silahkan ikuti cara ini agar header blog Anda tidak tertutup lagi oleh menu melayang atau floating ini, caranya dibawah ini :

1. Cari kode css #header h1
2. Mungkin akan seperti ini :
#header h1{color:#444;font-size:25px;font-family:Georgia, serif;font-weight:700;text-decoration:none;margin:0;padding-top:15px;margin-top:5px;}
3. Perhatikan kode berwarna Biru mungkin dalam blog Anda akan berisi seperti ini :
padding:...px;
padding-top:...px;
padding-bottom:...px;
padding-right:...px;
padding-left:...px;
4. Silahkan ganti kode padding yang ada dalam blog Anda dengan kode dibawah ini :
padding-top:25px;
5. Hasilnya seperti ini :
#header h1{color:#444;font-size:25px;font-family:Georgia, serif;font-weight:700;text-decoration:none;margin:0;padding-top:25px;margin-top:5px;}

Sekian artikel mengenai  Cara Membuat Menu Navigasi Melayang (Floating). Kurang lebihnya mohon maaf.
Semoga Bermanfaat...

28 Komentar untuk "Cara Membuat Menu Navigasi Melayang (Floating)"

  1. tampilan nya jadi lebih keren ya mas kalau menu navigasinya di buat melayang getu. Bisa dicoba nih tutorialnya ;)

    BalasHapus
    Balasan
    1. iya lumayan sih, tapi agak sedikit mengecilkan tampilan, tidak full desktop :D

      Hapus
  2. keren juga ya tampilannya

    BalasHapus
  3. sepertinya..templte ane gak cocok..!;)

    BalasHapus
    Balasan
    1. gak cocok gimana sob,
      semua template bisa pasang kayak gini... :D

      Hapus
  4. Terima Kasih Infonya ;)
    Salam Kenal :)

    BalasHapus
  5. work gan, terima kasih banyak #salam-blogger

    bang-irham.blogspot.com :)

    BalasHapus
  6. wah, terima kasih infonya sob.. salam dari
    http://islamypersona.blogspot.com/

    BalasHapus
  7. kalau menu navigasi di bawah header yang mau dibikin melayang gimana?

    BalasHapus
    Balasan
    1. coba tambahkan kode css seperti ini
      z-index:99999px;position:fixed;

      Hapus
  8. selamat siang mass :)
    saya pengunjung baru :D izin menyimak..
    mas ficri kalau diperkenankan, saya kasih tau cara buat top menu seperti yang mas ficri gunakan pada website www.ficripebriyana.com , soalnya template saya hampir sama. silahkan mas si cek www.amsadeli.blogspot.com
    thx, good luck :)

    BalasHapus
  9. mayan keren mas, tapi lagi butuh dasarnya Goggle+ or Path

    overall good, Thank's

    BalasHapus
  10. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  11. ]]> nya ko ga ada min
    nyari nya gimana udh di strl +f gg ada

    BalasHapus
    Balasan
    1. coba cari saja kode </b:skin> yang paling atas gunakannya

      Hapus
  12. :-bd :-d =D |o|

    BalasHapus
  13. makasih mas caranya ijin nyobak mas

    BalasHapus
  14. terimaksih mas tutorialnya, saya coba berhasil.
    saya mau tanya mas, saya ingin menambah gambar di sebelah kiri, di samping tombol navigasi. bagaimana caranya ya?
    terimakasih

    BalasHapus
  15. mantap dah artikelnya kawan

    BalasHapus
  16. thanks gan ,,,, ane dapet pencerahan diblog ini... semoga dapet phala yg banyak ya gan amin,,,,

    BalasHapus
  17. wadduh saya masih bingun gimana caranya butu penjelasan tambahan mas hahhhaa

    BalasHapus

Jika Ingin Memasukan Kode Script (CSS, HTML, JavaScript) Silahkan Gunakan Kode Dibawah ini :

1. Untuk Menyisipkan Kode Panjang Gunakan <i rel="pre">Kode Disini</i>
2. Untuk Menyisipkan Kode Pendek Gunakan <i rel="code">Kode Disini</i>
3. Untuk Menyisipkan Quote Gunakan <b rel="quote">Catatan Anda</b>
4. Untuk Menyisipkan Gambar Gunakan <i rel="image">URL Gambar</i>
5. Untuk Menyisipkan Video Gunakan <i rel="youtube">URL Video Youtube</i>

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel