Friday, 7 December 2018

Cara Memasang Contact Us Keren di Blogger/Blogspot

Cara Memasang Contact Us Keren di Blogger/Blogspot – Laman kontak (contact) pada dasarnya di platform Blogger sendiri sudah dalam bentuk widget yang nantinya dapat dipasang pada sidebar blog kita. Namun, bukan tidak mungkin widget ini dapat dipindahkan ke tempat lain, misalnya menjadi sebuah laman tersendiri di blog. Berkaitan dengan itu, pada tutorial kali ini saya akan berbagi tutorial tentang cara membuat widget Contact form di halaman static/statis blog.




Seperti diketahui bahwa laman ataupun widget kontak ini sangat perlu bahkan wajib terpasang pada masing-masing blog. Laman ini telah menjadi sarana berbagai macam hal pengguna blog itu sendiri. Mulai dari mengirimkan saran dan kritikan terhadap blog, bertanya kepada admin blog, bahkan sebagai sarana pembuka obrolan sampai curhat-curhatan masalah pacar, rumah tangga, keuangan dan kejombloan.

Jika di blog anda belum terpasang widget contact us ini, atau sekadar mengganti layout laman contact us di blog anda, silahkan mengikuti tutorialnya berikut ini.

Sebelum melakukan edit template pada blog anda, hal pertama yang perlu dipastikan ialah bahwa Formulir Kontak (bawaan blogger) sudah ditambahkan pada sidebar blog anda tersebut.

#Langkah Pertama
Login ke blogger dan pilih blog > Tata Letak > Tambahkan Gadget > Gadget Lainnya > Formulir Kontak. Perhatikan gambar berikut ini.


#Langkah Kedua
Perhatikan menu di dasbor blog, klik Template > Edit HTML. Kemudian letakkan kode berikut ini tepat di atas kode </head>


<style type='text/css'>#ContactForm1{display:none}</style><b:if cond='data:blog.pageType == &quot;static_page&quot;'><style type='text/css'>/* Contact form */#ContactForm1_contact-form-email,#ContactForm1_contact-form-name{width:70%;height:auto;margin:5px auto 15px;padding:10px;background:#ebebeb;border:1px solid #ccc;color:#777;border-radius:3px;box-shadow:0 4px 0 0 #c7c5c7}#ContactForm1_contact-form-email-message:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-name:focus{background:#fffff7;outline:0}#ContactForm1_contact-form-email-message{width:95%;height:170px;margin:5px auto;padding:10px;background:#ebebeb;border:1px solid #ccc;color:#777;font-family:Arial,sans-serif;border-radius:3px;box-shadow:0 4px 0 0 #c7c5c7}#ContactForm1_contact-form-submit{display:block;height:35px;float:left;color:#FFF;padding:0 20px;margin:10px 0 5px;cursor:pointer;background-color:#f4836a;box-shadow:0 4px 0 0 #c75b45;border:1px solid #eb7d67;border-radius:3px;text-shadow:0 1px 0 #de5135}#ContactForm1_contact-form-submit:hover{background-color:#f5785f}#ContactForm1_contact-form-submit:active{position:relative;top:2px;box-shadow:0 2px 0 0 #c75b45}#ContactForm1_contact-form-submit:focus{outline:0}#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:15px;text-align:left}@media screen and (max-width:768px){#ContactForm1_contact-form-email,#ContactForm1_contact-form-email-message,#ContactForm1_contact-form-name{width:96%}}@media screen and (max-width:480px){#ContactForm1_contact-form-email,#ContactForm1_contact-form-email-message,#ContactForm1_contact-form-name{width:94%}.post-body{margin:0 15px}}</style></b:if>

Kemudian, simpan template .


#Langkah Ketiga
Perhatikan kembali menu di dasbor blog, klik Laman > Laman Baru > HTML. Kemudian hapus kode yang ada, lalu ganti dengan kode berikut ini.


<div dir="ltr" style="text-align: left;" >Silahkan isi form di bawah ini untuk menghubungi kami. Jika tidak ada halangan dan kesibukan lainnya, kami akan langsung merespon dengan cepat pesan yang Anda kirimkan.<br /><form name="contact-form"><input id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" /><br /><input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" /><br /><textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="5"></textarea><br /><input id="ContactForm1_contact-form-submit" type="button" value="Kirim" /><br /><div class="clear"></div><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></div>


Namun, jika anda hanya ingin mengedit saja, maka klik saja Edit pada laman yang sudah ada. Sebelum mempublikasikan, jangan lupa buat judulnya dulu, misalnya
Contact Us atau Kontak , atau juga Kontak Kami . Setelah itu Publikasikan laman, dan lihat hasilnya dengan membuka link dari laman tersebut.

Demikian tutorial blogger tentang cara membuat widget kontak pada halaman statis di blogger/blogspot . Semoga bermanfaat.

Hanya seorang Blogger & Content Writer yang senang mempelajari dan berbagi informasi, tutorial dan seputar dunia internet.


EmoticonEmoticon