Cara Membuat Menu Melayang (Floating) ~ Gabel Blog's

Minggu, 20 April 2014

Cara Membuat Menu Melayang (Floating)

7:53 PM

Unknown

No comments

Cara Membuat Menu Melayang (Floating) - yaa sebener nya bukan menu sih, yang saya bagikan ini adalah judul blog melayang haha :D beda dikit gapapa,
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 :)

JANGAN LUPA KOMENTAR YA SOOBB... :D jangan lupa JOIN THIS SITE