Tuesday, March 4, 2014

// // Leave a Comment

Cara Membuat Menu Melayang (Floating)



Cara Membuat Menu Melayang (Floating) - yaa sebener nya bukan menu sih, yang saya bagikan ini adalah judul blog melayang haha :D beda dikit gapapa, ada salah satu rekan saya yang bertanya kurang lebih seperti ini ''bagaimana membuat sesuatu yang melayang seperti di blog ini'' yasudah langsung saja saya bagikan cara nya,
cara nya pun cukup mudah yuk langsung saja 
  • masuk ke blogger sobat
  • langsung masuk template -> edit HTML
  • masukan kode berikut diatas kode #header-wrapper { bla bla bla bla 
#top-menuwrapper {background: #FFFFFF;height: 60px;width: 100%;position: fixed;top: 0;left: 0;z-index: 999;overflow: hidden;border-bottom: 1px solid #f1f2f7;border-bottom: 1px solid #d2d2d2;}  #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;}
  •  dan sekarang untuk HTML nya masukan kode berikut dibawah kode <body>
<div id='top-menuwrapper'><div id='top-menuwrap'><div id='top-menu'><div class='logo'><a href='/'><span style='color:#FF0000;'>NAMA BLOG SAHABAT</span> - DESKRIPSI SINGKAT BLOG SAHABAT</a></div></div></div></div>
simpan template dan lihat hasil nya.
hasil nya jadi gak rapih ?
tambahkan kode margin-top: 50px; pada kode #content-wrapper
pada barisan kode #content-wrapper sudah ada kode margin ? jika sudah ada tambahkan -top: 50px pada margin
jadi nya seperti ini margin-top: 50px;
margin-top: 50px guna nya untuk mengatur jarak antara atas dan bawah
jangan lupa 50px nya diatur sendiri sehingga blog sahabat terlihat rapih

sekian dulu mohon maaf jika tulisan diatas kurang rapih / sulit di mengerti soal nya saya nulis nya buru-buru hahaha :D
jika mau tanya tanya silahkan kirim komentar :)

0 comments:

Post a Comment