Memasang Widget Fixed Contact Form di Blog

8/27/2015
Memasang Widget Fixed Contact Form di Blog

Memasang Widget Fixed Contact Form di Blog - Pada kesempatan ini Saya akan berbagi tentang cara memasang widget fixed contact form yang berarti widget ini akan muncul di halaman blog tepatnya di sudut kanan bawah.

Seperti yang kita tahu, widget contact form / formulir kontak merupakan salah satu fasilitas email dari Blogger 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 dengan widget contact form ini sudah tersedia di blog kita.

Bagi yang sebelumnya pernah menggunakan trik ini : Memasang Formulir Kontak pada Halaman Statis

Silakan hapus terlebih dahulu semua kode terkait trik tersebut.

Sebelumnya pastikan di blog sobat sudah terpasang widget contact form. Jika belum tambahkan widget tersebut di Tata Letak > Tambahkan widget baru. Ok, langsung saja dengan cara penerapannya.

1. Buka Blogger > Template > Edit HTML > Kemudian tambahkan kode di bawah ini tepat di atas ]]></b:skin> atau </style>

/* Fixed Contact Form */
.ContactForm,.ContactForm .title{display:none}
.floating-ai{position:fixed;width:280px;right:30px;bottom:0;z-index:99}
.floating-ai-head a{padding:8px 10px;background:#2997e0;color:#fff;font-weight:400;display:inline-block;transition:all .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 2px 5px 0 rgba(0,0,0,.26)}
.floating-ai-head{text-align:right}
.floating-ai-body .ContactForm{margin:0;display:block!important}
#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{background:#fff;border:0;padding:10px 0;color:#999;font-weight:normal;width:100%;max-width:initial;border-bottom:1px solid #ccc;transition:.2s ease all}
#ContactForm1_contact-form-email-message{background:#fff;border:none;color:#8f8f8f;padding:10px 0;width:100%;max-width:initial;border-bottom:1px solid #ccc}
#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus,#ContactForm1_contact-form-name:hover,#ContactForm1_contact-form-email:hover,#ContactForm1_contact-form-email-message:hover{background:#fff;box-shadow:none;border-bottom-color:#ff3c3c;transition:all .3s linear}
#ContactForm1_contact-form-submit{position:relative;color:#fff;font-weight:400;font-size:12px;cursor:pointer;background:#57ad68;border:none;float:left;box-shadow:0 0 0 0 rgba(0,0,0,0.19);transition:all .3s linear}
#ContactForm1_contact-form-submit:hover{background:#468a53;}
#ContactForm1_contact-form-submit:active{box-shadow:0 4px 15px 0 rgba(0,0,0,0.19);}
.contact-form-widget form{display:table;margin:0 auto;}
.contact-form-widget {max-width:initial;}
.floating-ai-body{-moz-box-sizing:initial;-webkit-box-sizing:initial;box-sizing:initial}

2. Selanjutnya tambahkan kode di bawah ini sebelum </body>

<script type='text/javascript'>
//<![CDATA[
// Fixed Contact Form
$("body").append('<div class="floating-ai"><div class="floating-ai-head"><a href="#no-move">Contact Form</a></div><div class="floating-ai-body"></div></div>'),$(".ContactForm").appendTo(".floating-ai-body");var slide_up_ai=!1;$(".floating-ai-head a").click(function(){slide_up_ai?(slide_up_ai=!1,$(".floating-ai-body").slideUp()):(slide_up_ai=!0,$(".floating-ai-body").slideDown())});
//]]>
</script>

3. Simpan template dan lihat hasilnya.



Demikian tentang Cara Memasang Widget Fixed Contact Form di Blog, semoga bermanfaat.

Artikel Terkait

Next Article
« Prev Post
Previous Article
Next Post »
Penulisan markup di komentar
  • Untuk menulis huruf bold gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline gunakan <u></u>.
  • Untuk menulis huruf strikethrought gunakan <strike></strike>.
  • Untuk menulis kode HTML gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silakan parse kode pada kotak parser di bawah ini.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

25 comments

wihh, mbak Arlina emang kreatif banget dalam mengembangkan design seperti ini.. (y)

Balas

Maaf OOT
cara buat Popular Post seperti di blog demo gimana ya :)

Balas

Yang itu cm iseng aja hehe... nanti saya post

Balas

Mbak arlina kalo contact form seperti ini ,misal ada yg ngontact email yang tertuju kepada kita itu tertuju email yang mana ya mba ? misal kita pnya blog tpi adminya banyak

Balas

Terkirim ke semua admin

Balas

Terimakasih ka arlina yang cantik :)

Balas

mbak biar responsive mobile gimana mbak caranya ? terimakasih :)

Balas

Kl itu bisa dikreasikan kembali

Balas

Saya kira, contact formnya di menu statis... yang sesuai dengan gambarnya

Balas

Mba ko pas saya coba hasilnya jadi seperti ini
http://prntscr.com/89urhdi

Balas

Iya, itu hanya background aja

Balas

langsung dipasang mba...

Balas

mbak arlina, request donk buatin template book shop atau sepaket dengan website penerbit buku. lagi butuh nih, berbayar gak apa dah yang penting responsive. thanks mbak ...

Balas

kgak muncul mbak :p

Balas

Tidak muncul mbak :( yang ada cuma putih doang
http://prntscr.com/8ajs41

Balas

gak muncul, tampilan putih semua

Balas

resultnya kok malah ke blog zolzoy?. oh iya mbak , cara bikin contact form seperti mbak arlina gimana ya kok keren ? :-)

Balas

keren , berlangganan sama arlina ;)

Balas

Bak,biasa ajarin bikin emplate ngak??

Balas

Silakan tambahkan komentar sesuai dengan topik dan komentar dengan link akan dihapus, terima kasih.