Yang sebelumnya sudah saya bahas mengenai cara membuat contact form menggunakan halaman statis pada blog, kali ini saya akan memberikan tutorial cara membuat floating contact form. Apa bedanya dengan contact form biasanya?

Membuat contact form pada blog

Bedanya kalau contact form halaman statis, menggunakan halaman untuk membuat contact formnya. Namun kalau floating itu, contact form yang menempel pada blog pojok kanan bawah. Kalian bisa lihat contohnya seperti gambar di atas.

Baca Juga : Cara Mengaktifkan Tag Deskripsi Penelusuran dan Description Blog

Cara Membuat Floating Contact Form Pada Blog

Pertama pada template anda pastikan sudah support dengan jQuery, jika belum Copy code berikut ini lalu paste sebelum tag </head>
[<SCRIPT TYPE="TEXT/JAVASCRIPT" SRC="HTTPS://AJAX.GOOGLEAPIS.COM/AJAX/LIBS/JQUERY/1.9.1/JQUERY.MIN.JS"></SCRIPT>]

Jika sudah klik Save Template

Pemasangan kode Javascript dan Css

Copy kode berikut ini dan paste sebelum ]]></b:skin>
[/*FLOATING CONTACT FORM BY BLOGGERITEMS.COM*/
 .CONTACTFORM, .CONTACTFORM .TITLE {
 DISPLAY: NONE;
 }
 .FLOATING-CT {
 POSITION: FIXED;
 WIDTH: 250PX;
 RIGHT: 0;
 BOTTOM: 0;
 Z-INDEX: 999;
 }
 .FLOATING-CT-HEAD A {
 PADDING: 5PX 10PX;
 BACKGROUND: #09F;
 COLOR: WHITE;
 FONT-WEIGHT: BOLD;
 DISPLAY: INLINE-BLOCK;
 *DISPLAY: BLOCK;
 ZOOM: 1;
 }
 .FLOATING-CT-BODY {
 HEIGHT: 285PX;
 BACKGROUND: WHITE;
 BORDER: 1PX SOLID #09F;
 PADDING: 10PX;
 DISPLAY: NONE;
 }
 .FLOATING-CT-HEAD {
 TEXT-ALIGN: RIGHT;
 }
 .FLOATING-CT-BODY .CONTACTFORM {
 MARGIN: 0;
 DISPLAY: BLOCK!IMPORTANT;
}]

Kemudian Copy kode di bawah dan paste sebelum </body>
[<SCRIPT TYPE='TEXT/JAVASCRIPT'>
 //<![CDATA[
 /*FLOATING CONTACT FORM BY BLOGGERITEMS.COM*/
 $('BODY').APPEND('<DIV CLASS="FLOATING-CT"><DIV CLASS="FLOATING-CT-HEAD"><A HREF="#NO-MOVE">CONTACT</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>>]

Klik simpan dan silahkan kalian lihat hasilnya. Untuk contact ini juga akan terlihat ketika dibuka pada browser mobile.

Itulah tutorial cara membuat contact form dengan tampilan melayang pada blog yang menggunakan platform Blogger.

LEAVE A REPLY

Please enter your comment!
Please enter your name here