modifikasi contact form dengan style ui
TRANSCRIPT
6/9/14 Modifikasi Contact Form Dengan Style UI | SAMSURY SITES
samsury-sites.blogspot.com/2014/06/modifikasi-contact-form-dengan-style-ui.html 1/3
SAMSURY SITES Tutorial Blog
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="#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;
HOME CSS3 FLAT UI WIDGET UNIK Modifikasi Contact Form Dengan Style UI
6/9/14 Modifikasi Contact Form Dengan Style UI | SAMSURY SITES
samsury-sites.blogspot.com/2014/06/modifikasi-contact-form-dengan-style-ui.html 2/3
$('.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;
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}
6/9/14 Modifikasi Contact Form Dengan Style UI | SAMSURY SITES
samsury-sites.blogspot.com/2014/06/modifikasi-contact-form-dengan-style-ui.html 3/3
Older Post
Sign out
Notify me
Enter your comment...
Comment as: Virlyz Nyzam (Google)
Publish
Preview
BY SAMSURY SITES