Cara Membuat Menu Navigasi Melayang (Floating)
16.49.00
28 Komentar
+-+Ficri+Pebriyana.jpg "Membuat Menu Navigasi Melayang (Floating) - Ficri Pebriyana")
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 :
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5Y9hr-kyGSWGqC2RrbMnAQy0tHV3E1UV1UK_ChTIHjPSx75wFIXF7gRTg4gw0bxR-IFebs1-QA7RoOAUnBXrDOrNbqc1rX1h0i7LHJMlqB1Krk18uhopGd4Xaf1jZR8VPlCENWuPwxU8/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}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>- 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;}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...
tampilan nya jadi lebih keren ya mas kalau menu navigasinya di buat melayang getu. Bisa dicoba nih tutorialnya ;)
BalasHapusiya lumayan sih, tapi agak sedikit mengecilkan tampilan, tidak full desktop :D
Hapuskeren juga ya tampilannya
BalasHapusya lumayan mas,
Hapusmakasih sudah mampir....
sepertinya..templte ane gak cocok..!;)
BalasHapusgak cocok gimana sob,
Hapussemua template bisa pasang kayak gini... :D
Terima Kasih Infonya ;)
BalasHapusSalam Kenal :)
iya sama-sama...
Hapuswork gan, terima kasih banyak #salam-blogger
BalasHapusbang-irham.blogspot.com :)
oke sama-sama :D
Hapuswah, terima kasih infonya sob.. salam dari
BalasHapushttp://islamypersona.blogspot.com/
kalau menu navigasi di bawah header yang mau dibikin melayang gimana?
BalasHapuscoba tambahkan kode css seperti ini
Hapusz-index:99999px;position:fixed;
selamat siang mass :)
BalasHapussaya 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 :)
mayan keren mas, tapi lagi butuh dasarnya Goggle+ or Path
BalasHapusoverall good, Thank's
Komentar ini telah dihapus oleh pengarang.
BalasHapus]]> nya ko ga ada min
BalasHapusnyari nya gimana udh di strl +f gg ada
coba cari saja kode </b:skin> yang paling atas gunakannya
Hapus:-bd :-d =D |o|
BalasHapusmakasih mas caranya ijin nyobak mas
BalasHapussiip mas,..ijin coba ya
BalasHapusijin praktek mas
BalasHapuskalo cara ngecilinya gmn ?
BalasHapusterimaksih mas tutorialnya, saya coba berhasil.
BalasHapussaya mau tanya mas, saya ingin menambah gambar di sebelah kiri, di samping tombol navigasi. bagaimana caranya ya?
terimakasih
mantap dah artikelnya kawan
BalasHapusthanks gan ,,,, ane dapet pencerahan diblog ini... semoga dapet phala yg banyak ya gan amin,,,,
BalasHapusamiin, terimakasih :)
Hapuswadduh saya masih bingun gimana caranya butu penjelasan tambahan mas hahhhaa
BalasHapus