New Popup Cbox Guestbook / Buku Tamu

Saat ini mungkin telah banyak kreasi-kreasi dari para bloger dengan memodifikasi tampilan guestbook / buku tamu. Selain bertujuan untuk mempercantik tampilan juga untuk memperhemat tempat pada halaman blog kita.

Pada kali ini saya coba berbagi sedikit kreasi yang mungkin adalah salah satu pengembangan dari sebuah code css pop up yang saya terapkan pada cbox untuk buku tamu / guestbook.

Caranya seperti biasa :

• Login dulu ke bloger
• Pilih Rancangan
• Tambah gadget
• Pilih HTML/Javascript
• Copy paste code berikut :

<style>
label {position: relative;}
.box{
position:absolute;
left:0;top:100%;
z-index:100;
-webkit-backface-visibility:hidden;
background-color:#eee;
background:-webkit-gradient(
linear,left top,left bottom,from(#eee),to(#4f697e));
-webkit-linear-gradient(top,#eee,#4f697e);
background:-moz-linear-gradient(top,#eee,#4f697e);
background:-ms-linear-gradient(top,#eee,#4f697e);
background:-o-linear-gradient(top,#eee,#4f697e);
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
-moz-background-clip:padding;
-webkit-background-clip:padding-box;
background-clip:padding-box;
width:270px;
padding:3px;
margin:10px 0;
opacity:0;
-webkit-transform:scale(0) skew(50deg);
-moz-transform:scale(0) skew(50deg);
-ms-transform:scale(0) skew(50deg);
-o-transform:scale(0) skew(50deg);
-webkit-transform-origin:0 -30px;
-moz-transform-origin:0 -30px;
-ms-transform-origin:0 -30px;
-o-transform-origin:0 -30px;
-webkit-transition:-webkit-transform ease-out .35s,opacity ease-out .4s;
-moz-transition:-moz-transform ease-out .35s,opacity ease-out .4s;
-ms-transition:-ms-transform ease-out .35s,opacity ease-out .4s;
-o-transition:-o-transform ease-out .35s,opacity ease-out .4s}
.box:after{
position:absolute;
bottom:100%;
left:30px;
border-bottom:20px solid #eee;
border-left:14px solid transparent;
border-right:14px solid transparent;
width:0;height:0}
.popUpControl:checked ~ label>
.box{
opacity:1;
-webkit-transform:scale(1) skew(0deg);
-moz-transform:scale(1) skew(0deg);
-ms-transform:scale(1) skew(0deg);
-o-transform:scale(1) skew(0deg)}
.popUpControl{display:none}
.button{
font-size:20px;
font-weight:bold;
padding:3px;
border:1px solid #4f697e;
-webkit-border-radius:5px;
-moz-border-radius:5px;
-o-border-radius:5px;
-ms-border-radius:5px;
border-radius:5px}
.button:hover{
font-size:20px;
font-weight:bold;
color:#B11B40;
margin:0;
padding:3px;
text-align:center;
border:1px solid #4f697e;
-webkit-border-radius:70px;
-moz-border-radius:70px;
-o-border-radius:70px;
-ms-border-radius:70px;
border-radius:70px;
-webkit-transition:all .6s ease-out;
-moz-transition:all .6s ease-out;
-o-transition:all .6s ease-out;transition:all .6s ease-out}
#cpbox:checked ~ label>span:first-child{display:none}
#cpbox:checked ~ label:before{content:"Terimakasih atas kunjungannya..!"}
</style>
<input type="checkbox" id="cpbox" class="popUpControl" />
<label for="cpbox" class="button">
<span>Guestbook!</span>
<span class="box">
<!-- BEGIN CBOX - www.cbox.ws -->
DI SINI KODE CBOX
<!-- END CBOX -->
</span></label>

Untuk code yang diblok, silakan disesuaikan.

Selamat mencoba, semoga bermanfaat..!