Modifikasi contact form dengan style ui

3
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 : DEM O 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

Transcript of Modifikasi contact form dengan style ui

Page 1: 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 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

Page 2: 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}