Membuat Widget Contact Form Melayang

MERDEKA FILES, Jakarta - Contact Form adalah salah satu fasilitas email dari blog yang berfungsi menghubungkan antara pengunjung dan pemilik blog untuk saling berkomunikasi secara personal. Cara pengiriman pesannya pun cukup mudah, kita hanya perlu menulis nama, alamat email, dan isi pesan. Jadi tidak perlu repot-repot login ke akun email, namun contact form sudah tersedia di blog kita sendiri.

Nah, ini dia cara pemasangan widget tersebut yang merupakan gabungan dari kode Contact Form yang di pasang di static page.

1. Buka blog > Edit HTML > Kemudian pasang kode CSS di bawah ini tepat di atas ]]></b:skin>

/* CSS Contact Form */

.ContactForm, .ContactForm .title {

 display:none;

}

.floating-ai {

 position:fixed;

 width:250px;

 left:0;

 bottom:0;

 z-index:999;

}

.floating-ai-head a {

 padding:5px 10px;

 background:#2997e0;

 color:#fff;

 font-weight:400;

 display:inline-block;

 font-family:Oswald,sans-serif;

 text-transform:uppercase;

 *display:block;

 zoom:1;

 transition:all 0.3s linear;

}

.floating-ai-head a:hover {

 background:#2588ca;

 color:#fff;

}

.floating-ai-body {

 height:285px;

 background:#fff;

 padding:10px;

 display:none;

 box-shadow:0 0 5px 0 rgba(0,0,0,0.2);

}

.floating-ai-head {

 text-align:left;

}

.floating-ai-body .ContactForm {

 margin:0;

 display:block!important;

}

#ContactForm1_contact-form-name, #ContactForm1_contact-form-email {

 background:#eee;

 margin-bottom:10px;

 border:none;

 color:#8f8f8f;

 padding:2px;

 width:75%;

}

#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus {

 background:#f5f5f5;

 transition:all 0.3s linear;

}

#ContactForm1_contact-form-email-message {

 background:#eee;

 margin-bottom:10px;

 border:none;

 color:#8f8f8f;

 font-family:Oswald,sans-serif;

 padding:5px;

 width:95%;

}

#ContactForm1_contact-form-submit {

 width:100px;

 color:#fff;

 font-family:Oswald,sans-serif;

 text-transform:uppercase;

 font-weight:400;

 font-size:14px;

 cursor:pointer;

 background:#57ad68;

 border:none;

 float:left;

 transition:background 0.3s linear;

}

#ContactForm1_contact-form-submit:hover {

 background:#468a53;

}

Catatan : Untuk font dan warna disesuaikan dengan blog Sobat.

2. Pasang Script di bawah ini tepat di atas </body> dan simpan template.

<script type='text/javascript'>

//<![CDATA[

$('body').append('<div class="floating-ai"><div class="floating-ai-head"><a href="#no-move">Contact</a></div><div class="floating-ai-body"></div></div>');

$('.ContactForm').appendTo('.floating-ai-body');

var slide_up_ai = false;

$('.floating-ai-head a').click(function(){

 if (!slide_up_ai) {

 slide_up_ai = true;

 $('.floating-ai-body').slideDown();

 } else {

 slide_up_ai = false;

 $('.floating-ai-body').slideUp();
}
});

//]]>

</script>

3. Kemudian pasang widget contact form di Tata Letak > Tambahkan Gadget > Pilih Gadget Lainnya > dan tambahkan widget Formulir Kontak

4. Terakhir, simpan widget dan segera lihat hasilnya. Semoga bermanfaat...

Sumber

Sebarkan Artikel Ini :

Sebar di FB Sebar di Tweet Sebar di GPlus

About Unknown

WEBSITE ini didedikasikan untuk ilmu pengetahuan dan HUMAN BEING, silahkan memberikan komentar, kritik dan masukan. Kami menerima artikel untuk dimuat dan dikirim ke kawanram@gmail.com. Selanjutnya silahkan menghubungi kami bila memerlukan informasi lebih lanjut. Salam PEMBEBASAN!