Modifikasi Contact Form Dengan Style UI

Modifikasi Contact Form UI Style - Dengan adanya penambahan fitur baru blogger yaitu Contact Form ( send feed back ), maka banyak sekali para blogger yang sudah memodifikasinya dengan tampilan yang berbeda dan menjadikannya widget unik blog. dan untuk kali ini saya juga akan mencoba membuat sedikit efek contact me ( contact form ) dengan sedikit nuansa metro UI style.

Untuk demonya bisa lihat link dibawah ini :

• DEMO

Berikut konsep dasar pembuatannya :

JavaScript

//<![CDATA[
$('body').append('<div class="floating-ct"><div class="floating-ct-head"><a href="#">Contact Me</a></div><div class="floating-ct-body"></div></div>');
$('.ContactForm').appendTo('.floating-ct-body');
var slide_up_ct = false;
$('.floating-ct-head a').click(function(){
 if (!slide_up_ct) {
 slide_up_ct = true;
 $('.floating-ct-body').slideDown();
 } else {
 slide_up_ct = false;
 $('.floating-ct-body').slideUp();
 }
});
//]]>

CSS

.ContactForm, .ContactForm .title {
 display: none;
}
.floating-ct {
 position: fixed;
 width: 250px;
 right: 0;
 bottom: 0;
 z-index: 999;
}
.floating-ct-head a:hover {
color: #fff;
background: #2c3e50;
}
.floating-ct-head a {border-radius:8px 0 0 0;
text-decoration:none;
padding: 5px 10px;
background: #16a085;
color:#fff;
font-weight: bold;
display: inline-block;
zoom: 1;
}
.floating-ct-body {
 height: 311px;
 background: #FD6CA3;
 border: 1px solid #FD6CA3;
 padding: 10px;
 display: none;
}
.floating-ct-head {
 text-align: right;
}
.floating-ct-body .ContactForm {
 margin: 0;
 display: block!important;
}

Anda juga bisa menjadikannya dalam sebuah widget unik dengan Add Gadget >> HTML/Javascript >> dan copas Kode di bawah ini :

<script type='text/javascript'>
//<![CDATA[
$('body').append('<div class="floating-ct"><div class="floating-ct-head"><a href="#no-move">Contact Me</a></div><div class="floating-ct-body"></div></div>');
$('.ContactForm').appendTo('.floating-ct-body');
var slide_up_ct = false;
$('.floating-ct-head a').click(function(){
 if (!slide_up_ct) {
 slide_up_ct = true;
 $('.floating-ct-body').slideDown();
 } else {
 slide_up_ct = false;
 $('.floating-ct-body').slideUp();
 }
});
//]]>
</script>
<style>
.ContactForm, .ContactForm .title {
 display: none;
}
.floating-ct {
 position: fixed;
 width: 250px;
 right: 0;
 bottom: 0;
 z-index: 999;
}
.floating-ct-head a:hover {
color: #fff;
background: #2c3e50;
}
.floating-ct-head a {border-radius:8px 0 0 0;
text-decoration:none;
padding: 5px 10px;
background: #16a085;
color:#fff;
font-weight: bold;
display: inline-block;
zoom: 1;
}
.floating-ct-body {
 height: 311px;
 background: #FD6CA3;
 border: 1px solid #FD6CA3;
 padding: 10px;
 display: none;
}
.floating-ct-head {
 text-align: right;
}
.floating-ct-body .ContactForm {
 margin: 0;
 display: block!important;
}
</style>

PENTING..!!!

Agar tips ini bisa berjalan dengan sempurna sebelumnya pasang dulu widget contact form bawaan blogger, kemudian pasang kode css ini sebelum kode ]]</b:skin>

.ContactForm {display:none}