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/AVvXsEjuhOZ8hlbMNCcHg7V1ph0_ipIu7fRQtIew6o4oot-903fbPtiij_Xd9Gd_kS7r_9WW_Udkxz8NcUfNUHlJSmptHSVrw7PREMHA5l919qq-NU3q7AgpB4n5rplx_qvq5j2xAXfrpYbvPOY/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
