Senin, 04 Februari 2013

Membuat Hide Navigation di blog

copy paste code berikut dibawah ini , taruh dan pasang di ruangan html/javascript
 save dan lihat hasilnya


<style>

.hello{

width: 500px;

background: url(http://i.imgur.com/3xcNH.png);

top:0px;

left:-510px;

position: fixed;

top:100px;

text-align:center;

padding-top:10px;

padding-bottom:10px;

border: #e69fba 3px solid;

border-right: #e69fba 40px solid;

border-top-right-radius: 200px;

border-bottom-right-radius: 200px;

-webkit-transition:All 0.8s ease;

-moz-transition:All 0.8s ease;

-o-transition:All 0.8s ease;

}

.hello:hover{

width: 500px;

left:-0px;

-webkit-transition:All 0.8s ease;

-moz-transition:All 0.8s ease;

-o-transition:All 0.8s ease;

}

a.bye{

background:#e69fba ;

left:220px;

text-decoration:none;

color:#fff;

padding:5px;

font:12px arial;

margin-left:5px;

margin-right:5px;

-webkit-transition:All 0.4s ease;

-moz-transition:All 0.4s ease;

-o-transition:All 0.4s ease;

display:inline-block;

width:60px;

-webkit-transition:All 0.8s ease;

-moz-transition:All 0.8s ease;

-o-transition:All 0.8s ease;

}

a.bye:hover{background:#000;

color:#fff;

-webkit-transition:All 0.8s ease;

-moz-transition:All 0.8s ease;

-o-transition:All 0.8s ease;

}

</style>

<div class="hello">

<a class="bye" href="YOUR LINK">TITLE</a>

<a class="bye" href="YOUR LINK">TITLE</a>

<a class="bye" href="YOUR LINK">TITLE</a>

<a class="bye" href="YOUR LINK">TITLE</a>

<a class="bye" href="YOUR LINK">TITLE</a>

</div>

semoga berhasil. .. . . .

Tidak ada komentar:

Posting Komentar

Catatan: Hanya anggota dari blog ini yang dapat mengirim komentar.