Membuat Floating Contact Form Pada Blog

SHARE:

Cara membuat floating contact form yang muncul secara melayang di pojok kanan bawah halaman blog bisa kalian gunakan untuk tampilan yang menarik

Membuat Floating Contact Form Pada Blog
Screenshoot tampilan floating contact form
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?

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.

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

Selanjutnya ke pemasangan kode Javascript dan Css


Copy kode berikut ini lalu 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 lalu 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 browser ponsel.

COMMENTS

Nama

Adsense,4,Blog,10,Design Blog,5,Seo,4,
ltr
item
Belajar Ngeblog: Membuat Floating Contact Form Pada Blog
Membuat Floating Contact Form Pada Blog
Cara membuat floating contact form yang muncul secara melayang di pojok kanan bawah halaman blog bisa kalian gunakan untuk tampilan yang menarik
https://3.bp.blogspot.com/-FYyTJX7VjYQ/Wj0jiwU-MlI/AAAAAAAACfM/jyJkA478qRgwFvrK2IUH-acHbpYQGgZJACLcBGAs/s640/Floating%2Bcontact.png
https://3.bp.blogspot.com/-FYyTJX7VjYQ/Wj0jiwU-MlI/AAAAAAAACfM/jyJkA478qRgwFvrK2IUH-acHbpYQGgZJACLcBGAs/s72-c/Floating%2Bcontact.png
Belajar Ngeblog
https://alimbanjar.blogspot.com/2017/12/membuat-floating-contact-form.html
https://alimbanjar.blogspot.com/
https://alimbanjar.blogspot.com/
https://alimbanjar.blogspot.com/2017/12/membuat-floating-contact-form.html
true
4087688367466372745
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy