Cara Membuat Menu Wrapper Melayang Di Atas Blog

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/AVvXsEgZJRqJBof-e1KK2MK0JxmFSCQ5ulG1QwrY6S8b41O9uvG-54PHJW4b5w0-iJsSPeCB9NeunC_AolRovWopJF9DRxheYIr_aNhkY862juXDe32CAV6QGCD-K2OUWLlLVosWZNGBuc-O-Yo/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

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 -

Ganti teks yang berwara Merah sesuai Nice blog anda
Jika ingin mengganti logo, ganti teks yang berwarna Biru dengan URL gambar Anda
SELESAI

Terimakasih sudah berkunjung di artikel saya tentang Membuat Menu Wrapper Melayang Di Atas Blog, semoga dapat bermanfat.

= SELAMAT MENCOBA =

TEKNIK KOMPUTER JARINGAN

Beranda

Kamis, 19 Maret 2015

Cara Membuat Menu Wrapper Melayang Di Atas Blog

Tidak ada komentar:

Posting Komentar

Translate