1/6/17

Memindahkan Widget Contact Form (Formulir Kontak) ke Halaman Statis Blogger

Widget Contact Form (Formulir Kontak) bawaan dari blogger atau blogspot, pada awalnya hanya bisa di pasang pada sidebar saja, akan tetapi semakin berkembangnya blogger, kini sudah bisa memasang widget contact form pada halaman statis blogger.

Memindahkan Widget Contact Form (Formulir Kontak) ke Halaman Statis Blogger

Kegunaan Widget Contact Form (Formulir Kontak) sendiri adalah layanan untuk menghubungi atau mengirim pesan ke email pemilik/penulis blog. Cara penggunaanya juga cukup mudah, pembaca yang ingin mengirim pesan tinggal mengetik nama, email dan pesan lalu tinggal dikirim, kemudian akan sampai ke akun gmail pemilik blog.

Silahkan Anda lihat contoh widget contact form (formulir kontak) pada halaman statis.


Lalu bagaimana cara Memindahkan Widget Contact Form ke Halaman Blogger ini ? simak tutorialnya dibawah ini.

Langkah pertama

Pada langkah pertama ini kita akan memasang Widget Contact Form (Formulir Kontak) di sidebar blog kita.

1. Pada dashboard blog Anda pilih menu Tata Letak/Layout. Lalu pada sidebar pilih Tambah Widget. Pilih gadget lainnya lalu pilih Formulir kontak.

langkah pertama Memindahkan Widget Contact Form

2. Lalu cek apakah widget Formulir kontak ini bekerja atu tidak. Jika bekerja kita lanjutkan ke langkah kedua.

Langkah kedua

Pada  langkah kedua ini kita akan menyembunyikan Widget Contact Form (Formulir Kontak) yang tadi Anda pasang pada sidebar. Untuk menyembunyikannya kita akan menggunakan Kode CSS, silahkan anda copy pastekan kode di bawah ini tepat di atas  ]]></b:skin> atau </style>.

Rekomendasi : Cara Memasukan Kode CSS di Blogger

#ContactForm1,#ContactForm1 br{
 display:none;
 visibility:hidden;
}

Langkah Ketiga (Terakhir)

1. Buatlah laman baru pada halama statis blogger/blogspot.


2. Pilih tab HTML pada (Compose | HTML),kemudian pastekan script dibawah ini pada laman tersebut.

<div dir="ltr" style="text-align: left;" trbidi="on">

Silahkan lampirkan pesan anda di contact form di bawah ini untuk menghubungi admin anditoblog.blogspot.com. Jika saya tidak ada kesibukan lain maka saya akan langsung membalas pesan anda. Maaf jika saya membalasnya lama.&nbsp;</div>

<br />

<form id="kontak-andito" name="contact-form">

<input id="ContactForm1_contact-form-name" name="name" placeholder="Name *" size="30" type="text" value="" />

<input id="ContactForm1_contact-form-email" name="email" placeholder="Email *" size="30" type="text" value="" />

<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message *" rows="5"></textarea>

<input id="ContactForm1_contact-form-submit" type="button" value="Send Message" /> 

<div style="max-width: 222px; text-align: center; width: 100%;">

<div id="ContactForm1_contact-form-error-message">

</div>

<div id="ContactForm1_contact-form-success-message">

</div>

</div>

</form>

<style scoped="" type="text/css">

#comments,.post_meta,#blog-pager{display:none}

form{color:#666}

#kontak-andito{margin:auto;max-width:640px}

#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{height:auto;margin:5px auto;padding:15px 12px;background:#fff;color:#444;border:1px solid rgba(0,0,0,.14);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;width:100%;min-width:100%;transition:all 0.5s ease-out}

#ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:15px 12px;background:#fff;color:#444;border:1px solid rgba(0,0,0,.14);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;resize:none;transition:all 0.5s ease-out}

#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;border-color:#66afe9;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,0.6)}

#ContactForm1_contact-form-submit{float:left;background:#95a5a6;margin:auto;vertical-align:middle;cursor:pointer;padding:12px 20px;font-size:14px;text-align:center;letter-spacing:.5px;border:0;width:100%;max-width:140px;border-radius:3px;color:#fff;font-weight:500;transition:all .8s ease}

#ContactForm1_contact-form-submit:hover{background:#e74c3c;color:#fff;}

#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:35px}

.contact-form-error-message-with-border{background:#f6f6f6;border:none;box-shadow:none;color:#444;padding:5px 0}

.contact-form-success-message{background:#4fc3f7;border:none;box-shadow:none;color:#fff}

img.contact-form-cross{line-height:40px;margin-left:5px}

.post-body input{width:initial}

@media only screen and (max-width:640px){

#ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-submit{width:100%;}}

</style>

</div>

3. Jika sudah, Simpan laman tersebut.

Silahkan Anda test, apakah bekerja atau tidak, jika Anda mendapat pesan pada email Anda dapat disimpulkan bahwa widget Formulir kontak ini bekerja.

Sekian dari saya, semoga bermanfaat.

Happy Blogging ! ☺

You might also enjoy reading

Subscribe

Daftarkan email Anda untuk mendapatkan Artikel terbaru pilihan dari Andito Blog

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai