Cara Membuat Menu Navigasi Melayang (Floating) ~ berita teknologi

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 ladaskipzen 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 :

Demo

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOkHNrg8-qQBlwjkVhU_1xwZfHeTvmGDOPHkujT1MeJXP_59AnS8cy5fPGJjT28udRYc6uXQZafMAVmWED8gC8q_1rXovPD8-UTZZrRJkSfEzfR1KTZFJ0byq0q7WQOEZBPKgrEFOqBGA/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...
http://ficripebriyana.blogspot.com/2014/04/cara-membuat-menu-navigasi-melayang.html

About Admin MC3

This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.

berita teknologi

Cara Membuat Menu Navigasi Melayang (Floating)

About Admin MC3

Related Post