◄ Min  Size Fonts: + | - | ± Color: Max ►

Show Hide Pure use CSS for Cbox

Entah sudah berapa postingan mengenai trick show/hide yang kebanyakan digunakan dalam urusan Cbox. Yup's benar sekali, yaitu menyembunyikan keberadaan sesuatu agar tidak tampak yang padahal ada keberadaannya (roaming language) Silahkan sobat cari dengan keyword show hide pada kotak search yg tersedia :) pasti buanyak deh trick²nya ;)
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...

Klik buat mengambil link!

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/
Loading...
XShow Hide Pure use CSS for Cbox

Subscribe my posts Register For Free!

3 comments

[?] g+ convert

DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...

al-Quran

MISC

Resources

WANT BE HERE!!! CONTACT ME :P
1 2 3 4 5 6 7 8 9

FACEBOOK PAGE