14.1.14
22
Membuat Menu Wrapper Melayang Di Atas Blog
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


#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
  1. Login Ke- Blogger
  2. Template >> Edit (Backup Template untuk menghidari kesalahan)
  3. Cari kode #wrapper{....} yang terletak diantara kode <b:skin>...</b:skin>
  4. Copy Kode CSS Tepat diatasnya
  5. Selanjutnya Cari kode <body> pembuka
  6. Copy Kode HTML setelah atau dibawahnya
  7. SIMPAN Template, dan lihat hasilnya
Halaman blog anda mungkin akan terlihat sedikit berantakan, selanjutnya tambahkan Kode Pengaturan lay-out pada kode #wrapper{....}, sehingga akan menjadi #wrapper{.....;margin-top:25px;margin-left:auto;margin-right:auto;}, angka 25px silahkan anda sesuaikan dengan tinggi margin pada HEADER blog anda. Lihat kembali hasilnya, maka akan terlihat Rapi dan mengagumkan. hehehe...

Keterangan -
  1. Ganti teks yang berwara Merah sesuai Nice blog anda
  2. Jika ingin mengganti logo, ganti teks yang berwarna Biru dengan URL gambar Anda
  3. SELESAI
Terimakasih sudah berkunjung di artikel saya tentang Membuat Menu Wrapper Melayang Di Atas Blog, semoga dapat bermanfat.

= SELAMAT MENCOBA =
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 >>
= TERIMA KASIH =

22 komentar

  1. Asssyikkkk....Terimakasih neng Devy sudah di share,,tapi jadi malu pakai sebut nama segala lagi. =))

    Langsung praktek neng devy, saya tunggu artikel menarik lainnya

    BalasHapus
    Balasan
    1. maaf mas lam artikelnya baru dibuatin..masalahnya ada sedkit kesibukan diluar...semoga bermanfaat ya mas... :-)

      Hapus
  2. tutorial yang sederhana, namun mudah dipahami..trimakasih ya...keep happy blogging always..salam dari makassar :-)

    BalasHapus
    Balasan
    1. terimakasih atas kunjungannya bang...salam kenal juga

      Hapus
  3. wah ntar saya praktekin deh di blogger punya saya

    BalasHapus
  4. thank' gan sangat bermanfaat.

    BalasHapus
  5. Neng gimana caranya sih biar ada menu seperti di blog ini.
    alias cara memadukan kode scriptnya seperti apa tolong dong kasih bingung juga selalu gagal saya coba

    BalasHapus
    Balasan
    1. 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..

      Hapus
    2. Assalamu'alaikum,

      aneh 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

      Hapus
    3. 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,

      kalau 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

      Hapus
  6. wah izin praktek dulu ahh

    BalasHapus
  7. infonya bermanfaat
    ditunggu kunjunganya di http://bloghulam.blogspot.com

    BalasHapus
  8. cara membuat menu melayang seperti blognya agan nih gimana?

    BalasHapus
    Balasan
    1. Tutorial 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,
      judulnya menu navigasi full rotateX

      Hapus
  9. 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...

    BalasHapus
    Balasan
    1. scriptnya ada disini mas-
      http://sahabatblogger77.blogspot.com/2014/01/membuat-vavigasi-menu-fixed-full-rotatex.html

      silahkan mas dipelajari, jika ada kesulitan saya akan bantu untuk peletakan kodenya

      Hapus
  10. makasih ya kak dewi.. aku mau coba

    BalasHapus
  11. Kunjungan perdana dapat pertamax, trims y....

    Salam kenal dari Pulau Dollar

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK