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/AVvXsEh8xgmpckWStcBzoD7gXsHV3rJmimeUoBHrZ065TkDT77PZLuDTWUCkRaSZdHxYuH3k6AUl2xQOtnYJ2OuaLtFRZl7SbwOS5uh-yn8gaE_4qFK-jku4WRyEksUG3HaVooq3CXGtG5ZiQCA/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/AVvXsEiHHA58x7t-Qx3KNRuVP-50zF3gUA6QDRtrlk1VmUm89PfJ9DmQoaQ7503ReJJfx84ds9NYb5V7BnzjGQaD_RhaXdq1UsHezjtzQDtkKp073XL3DZ-zSIY3wd3Sgl6ZNg_c9zLI5s1sDbp3/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 :
- Install plugin mystickymenu ke website wordpress kamu.
- Setelah berhasil kamu install, lalu aktifkan plugin tsb.
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 : susukambingetawaskey.com.
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.
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.
Tags:
#Tips dan trik blogger
0 komentar