Membuat Menu Wrapper Melayang Di Atas Blog - Mungkin anda ingin menampilkan sesuatu Menu atau sekedar kalimat dapat melayang diatas halaman blog, Membuat Menu Wrapper Melayang Di Atas Blog hampir sama penerapannya dengan membuat beberapa widget melayang disamping kanan, kiri atau berada ditengah saat halaman blog di buka, dan cara ini hampir sebagian besar pengguna blog mengerti cara membuatnya, tetapi karena pertanyaan Mas +Guntur Tampubolon kepada saya tentang bagaimana membuat menu dapat melayang diatas blog, karenanya tutorial ini saya persembahkan buat sahabat kita yang mungkin membutuhkan tutor ini, buat sahabat pecinta SAHABAT BLOGGER 77 yang juga ingin mencoba Membuat Menu Wrapper Melayang Di Atas Blog dipersilahkan untuk meng-Copy kodenya, Hehehe...
Berikut kode Membuat Menu Wrapper Melayang Di Atas Blog
Tahap Pengaturan Lay-out (Tata Letak Menu Navigasi Fixed)
Pada tahap ini, silahkan sesuaikan tinggi header blog Anda, karena kode berikut tidak mutlak - jika Anda menggunakan height:50px pada menunya, maka sesuaikan dengan pengaturan margin-top header blog Anda.
Cara Membuat Menu Wrapper Melayang Di Atas Blog
Keterangan -
Berikut kode Membuat Menu Wrapper Melayang Di Atas Blog
#top-menuwrapper {
background: #FFFFFF;
height: 60px;
width:100%;
position: fixed;
top: 0;
left: 0;
z-index:999;
overflow:hidden;
border-bottom:3px solid red;
border-bottom: 2px double green;
}
#top-menuwrap, #top-menuwrap2 {
width:100%;
margin: 0 auto;
padding-left: 1%;
padding-right: 1%;
}
#top-menu {width: 100%;}
.logo {
padding:18px;
float:left;
font-family:'Montserrat', Oswald;font-size:160%;
text-transform: uppercase;
font-weight: 300;
}
.logo a {
color: #000;
text-decoration: none;
margin-top: -5px;
}
.logo img {margin-top: 13px;}
.element {position: relative;}
<div id='top-menuwrapper'><div style='position:absolute;padding-top:5px;'><img alt="" height="50" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl-5K1zWK6PMfQ8Lg1TfsSs8WTlKIzhN_xsmjnzLKSTyL-PAFlx2YX9R7avmOfs_nl4vva5feoiwyVJ6MqKrQu-nmPkHWA6TctmQcwBbXDa5L98WW54BSeUuSRmwKNHGvrrYOw6GAVUIM/s200/unduhan+(3).jpg" width="50"/></div><a expr:href='data:blog.homepageUrl' target='_blank' title='Nama Anda'><span style='color:blue;padding-top:-4;padding-left:70px;padding-bottom:10px;margin:5px;position:absolute;font-family:Cosmic san MS;font-weight:bold;font-size:24px'>Title Blog Anda</span></a><br/><span style='color:#222;padding-top:5px;padding-left:65px;padding-bottom:10px;margin:10px;position:absolute'>Deskripsi Singkat Blog Anda</span></div>
Tahap Pengaturan Lay-out (Tata Letak Menu Navigasi Fixed)
Pada tahap ini, silahkan sesuaikan tinggi header blog Anda, karena kode berikut tidak mutlak - jika Anda menggunakan height:50px pada menunya, maka sesuaikan dengan pengaturan margin-top header blog Anda.
;margin-top:25px;margin-left:auto;margin-right:auto;
Cara Membuat Menu Wrapper Melayang Di Atas Blog
- Login Ke- Blogger
- Template >> Edit (Backup Template untuk menghidari kesalahan)
- Cari kode #wrapper{....} yang terletak diantara kode <b:skin>...</b:skin>
- Copy Kode CSS Tepat diatasnya
- Selanjutnya Cari kode <body> pembuka
- Copy Kode HTML setelah atau dibawahnya
- SIMPAN Template, dan lihat hasilnya
Keterangan -
- Ganti teks yang berwara Merah sesuai Nice blog anda
- Jika ingin mengganti logo, ganti teks yang berwarna Biru dengan URL gambar Anda
- SELESAI
= SELAMAT MENCOBA =
Perbaikan tanggal 29 Maret 2014, Sabtu
Perbaikan tanggal 29 Maret 2014, Sabtu
TERIMA KASIH ATAS KUNJUNGAN SAUDARA
Judul= Membuat Menu Wrapper Melayang Di Atas Blog
Ditulis oleh= Devy
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
Asssyikkkk....Terimakasih neng Devy sudah di share,,tapi jadi malu pakai sebut nama segala lagi. =))
BalasHapusLangsung praktek neng devy, saya tunggu artikel menarik lainnya
maaf mas lam artikelnya baru dibuatin..masalahnya ada sedkit kesibukan diluar...semoga bermanfaat ya mas... :-)
Hapustutorial yang sederhana, namun mudah dipahami..trimakasih ya...keep happy blogging always..salam dari makassar :-)
BalasHapusterimakasih atas kunjungannya bang...salam kenal juga
Hapuswah ntar saya praktekin deh di blogger punya saya
BalasHapusdengan senang hati :)
Hapusthank' gan sangat bermanfaat.
BalasHapusNeng gimana caranya sih biar ada menu seperti di blog ini.
BalasHapusalias cara memadukan kode scriptnya seperti apa tolong dong kasih bingung juga selalu gagal saya coba
sebelumnya saya ucapkan terimakasih atas kunjungannya, saya sudah berkunjung ke blog pak ustadz,blognya bagus dan menu floatingnya sudah terpasang,hanya menu tersebut menimpa/menutupi sebagian tampilan header, coba cari kode #header lalu sesuaikan margin-topnya agar terlihat rapi..
HapusAssalamu'alaikum,
Hapusaneh ya 10px tapi hasilnya kurang maksimal, bagusnya berapa px ya?
trus kalau bisa memunculkan menu 1 dan lainnya bgaimana memadukannya ya?
kirim ya via dewapuitis@ymail.com
makasih
sesuaikan height pada menu wrappernya, sebagai contoh misal besar height=40 px pada wrapper, nah cukup dirubah margin top pada header menjadi 35px, sehingga border atas pada header akan bersatu dengan wrappernya, pasti lebih rapi,
Hapuskalau masalah tampilan menu 1 dan lainnya,lihat saat pemasangan kode CSS pada template,silahkan pak uztad ubah kodenya untuk merubah tampilan muncul pada menunya, jika menggunakan id atau class pada kodenya, silahkan sesuaikan dengan kode jquery untuk memanggil efek style munculnya. semoga dapat membantu.terimakasih
wah izin praktek dulu ahh
BalasHapusdipersilahkan mas..
Hapusinfonya bermanfaat
BalasHapusditunggu kunjunganya di http://bloghulam.blogspot.com
cara membuat menu melayang seperti blognya agan nih gimana?
BalasHapusTutorial menu navigasi yang saya gunakan saat ini sebelumnya sudah pernah saya share mas, silahkan mas cari saja pada label menu navigasi pada sidebar blog ini,
Hapusjudulnya menu navigasi full rotateX
kak bisa minta script Menubar melayang yang sekarang kakak gunakan saat ini?tolong dibalas ya kak shenshe.fox@gmail.com terimakasih sebelumnya kak...Soalnya keren banget menu melayangnya...
BalasHapusscriptnya ada disini mas-
Hapushttp://sahabatblogger77.blogspot.com/2014/01/membuat-vavigasi-menu-fixed-full-rotatex.html
silahkan mas dipelajari, jika ada kesulitan saya akan bantu untuk peletakan kodenya
keren.tks infonya
BalasHapusmakasih ya kak dewi.. aku mau coba
BalasHapusKunjungan perdana dapat pertamax, trims y....
BalasHapusSalam kenal dari Pulau Dollar
gak mudeng nih
BalasHapus