Masih berbicara mengenai tips muncul & sembunyi, kali ini Beben Koben si bloglang anu ganteng kalem tea akan mencoba berbagi hanya dengan menggunakan pure 100% CSS. Tertarik enggak nih :-" Demo...
Letakin seluruh ramuan CSS sebelum/diatas kode </b:skin> Ini bumbu²nya :P
Kode CSS
#sidebar {
top: 50px;
z-index: 3000;
position: fixed;
right: -385px;
-webkit-transition:all 0.4s ease-out;
-moz-transition:all 0.4s ease-out;
-o-transition:all 0.4s ease-out;
transition:all 0.4s ease-out;
}
#sidebar .benDiv {
margin:0px;
padding: 15px;
color: #fff;
font-weight: bold;
padding-right: 95px;
background-color: #5566FF;
border-radius: 15px;
-moz-border-radius: 15px;
text-shadow: 1px 2px #000;
box-shadow: 0 0 20px #000;
-moz-box-shadow: 0 0 20px #000;
-webkit-box-shadow: 0 0 20px #000;
}
#sidebar .beDiv {
float: right;
height: auto;
width: 285px;
padding-left: 15px;
}
#sidebar:hover {
right: -80px;
}
Kode HTML
<div id="sidebar">
<a href="#" title="open here">
<div class="benDiv">
O<br />P<br />E<br />N
<div class="beDiv">
YOUR CONTENT (CBOX) HERE'S
</div>
</div>
</a>
</div>Jika sobat kepengen memakai image/gambar, tinggal hapus lalu ganti deh yg bertuliskan O<br />P<br />E<br />N Kode HTML bisa dimasukan via Add a Gadget ► HTML/Javascript tapi bisa juga didalam tag <body> ... </body> template ;)Semoga bermanfaat :)
Happy blogging \m/
Tidak ada komentar:
Posting Komentar