Cara membuat menu blog tetap terlihat melayang ketika halaman blog di scroll ke bawah

Tutorial cara membuat menu blog tetap terlihat melayang ketika halaman blog di scroll ke bawah.

Langkah-langkahnya adalah sbb :
Pertama copy kode HTML /*Nav Menu*/ di bawah ini!

/*Nav Menu*/
#top-BD{background:#333;box-shadow:0 1px 3px rgba(0,0,0,0.4);height:48px;width:100%;min-width:900px;position:fixed;top:0;left:0;z-index:9999;overflow:hidden;border-bottom:1px solid #000}
#top-BD ul{margin:0 auto;width:900px;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/AVvXsEg1YBwf7jSNRUwOPbnaOQ9lJAbzpDjS-Xj7guiP9-GzclmmqeiOSK8gs31RYE3aBM0HxstarTYUAamXCvcrVoyNTeGmhEvjLo7iR3B1dhd6KSV8iqXoz7thj13Rz3KQQVlsZnyCBnwOFlU/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}

Kemudian kamu pastekan di atasnya kode HTML ini ]]></b:skin> yang ada di halaman EDIT HTML TEMPLATE blog kamu.

Setelah itu copy lagi kode HTML <div id="top-BD"> di bawah ini :

<div id='top-BD'>
<ul>
  <li><a href='#' title='Nomor XL'><span style='color: white;'>SMS : 087835278694</span></a></li>
<li><a href='https://caradaftarfbs.blogspot.com' target='_blank' title='Gratis Biaya Pendaftaran'><span style='color: white;'>Cara Daftar Akun Real Forex</span></a></li>
  <li><a href='mailto:caradaftarfbs@gmail.com' title='Kirimkan Pesan Anda Dengan Email Gmail'><img alt='http://gmail.com' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic1EolgfuXcZP66jQlObXcO76gR7UJiJzRnTLUN6vDd1JSd0vxI62bp-bqZkAZmywLLsGr9xf_XIHWQQ2yUf0jIIDFHeF0njthL1hJCPsKeKvqbQOTpzvtOP0XFUISUXUlB0ySb53fZ3mm/s1600/fbs-solo-baru.gif'/></a>
</li>
</ul>
<div class='BDsosial' style='margin:-30px 50px 0 0;'>
<a class='rss' href='#' rel='external nofollow' title='RSS Link'>
</a>
<a class='googleplus' href='#' rel='external nofollow' title='googleplus'>
</a>
<a class='facebook' href='#' rel='external nofollow' title='facebook'>
</a>
<a class='twitter' href='#' rel='external nofollow' title='twitter'>
</a>
</div>
</div>

Kemudian pastekan lagi di atasnya kode HTML ini </body> yang ada di halaman EDIT HTML TEMPLATE blog kamu.

NB, panduan untuk pemula blogger.

Langkah-langkah untuk menuju ke halaman EDIT HTML TEMPLATE blogger adalah sbb : login ke dashboard blogger >> klik opsi lainnya >> klik template >> klik edit html >> lalu paste kode HTML /*Nav Menu*/ di atasnya ]]></b:skin>! lalu paste lagi kode HTML <div id="top-BD"> di atasnya </body>   >>terakhir klik simpan template!

Untuk melihat contoh tampilan menu blog yang tetap melayang ketika halaman blognya di scroll ke bawah adalah, silahkan kamu klik link berikut ini : fbssolobaru.blogspot.com.

Tutorial di atas adalah penjelasan tentang cara membuat menu blog tetap terlihat melayang ketika halaman blog di scroll ke bawah untuk blog yang kamu buat dengan menggunakan CMS blogger. CMS adalah singkatan untuk Content Management System.

Sedangkan untuk membuat navigasi menu website di blog wordpress selfhosting tetap terlihat melayang dan tidak hilang karena tidak ikut bergerak ke atas ketika halaman blognya di scroll ke bawah, caranyanya adalah sbb :

1. Install plugin mystickymenu ke website wordpress kamu.
2. Setelah berhasil kamu install, lalu aktifkan plugin tsb.

Selanjutnya supaya navigasi menu blog wordpress selfhosting kamu benar-benar bisa melayang dan tidak ikut bergerak ke atas pada waktu halaman websitenya kamu scroll ke bawah adalah ... kamu harus menyeting plugin mystickymenu tersebut. Arti wordpress selfhosting adalah proses pembuatan website dengan platform wordpress yang hosting & domainnya adalah berbayar atau harus membeli.

Petunjuk setting cara pengaturan plugin mystickymenu wordpress, lihat gambar di bawah!

Langkah-langkahnya adalah sbb :
Login ke dashboard blog wordpress >> install plugin mystickymenu >> aktifkan plugin mystickymenu >>(1) klik setting >>(2) klik mystickymenu >>(3) kolom  sticky class kamu isi dengan tulisan .nav-menu >>(4) klik save!

Untuk melihat contoh tampilan menu website yang tetap melayang tidak ikut bergerak ke atas ketika halaman websitenya di scroll ke bawah adalah, silahkan kamu klik link berikut ini : susu kambing etawa skey.

Demikianlah share dari kami tentang cara membuat navigasi menu blog / website tetap terlihat dan tidak hilang ikut bergerak ke atas ketika halaman  blog / website kamu di scroll ke bawah, semoga bermanfaat, dan jika ada kesulitan, silahkan hub kami untuk menanyakannya, tk.