2020/01/27

Cara Memasang Contact Us Keren di Blogger #1

Cara Memasang Contact Us Keren di Blogger #1

Cara Memasang Contact Us Keren di Blogger #1 – Pada dasarnya di platform Blogger sendiri Laman kontak (contact) sudah ada dalam bentuk widget yang nantinya dapat dipasang pada sidebar blog kita.

Namun, bukan tidak mungkin bahwa 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 diperlukan 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 > 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, klik Simpan Template .

#Langkah Kedua
Perhatikan kembali menu di dasbor blog, klik Laman > Laman Baru > Mode 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, Kontak Kami , atau Contact Form. Setelah itu Publikasikan laman, dan lihat hasilnya dengan membuka link dari laman tersebut.

Demikian artikel dari saya tentang Cara Membuat Widget Kontak Pada Halaman Statis di Blogger. Semoga artikel diatas bermanfaat bagi sobat semua. Terima kasih dan selamat mencoba.

Tags :

bm
@anaz_arblit

Hanya Seorang Blogger dan Content Writer yang senang mempelajari dan berbagi Informasi, Tutorial dan seputar Dunia Internet. Jika ingin bekerjasama, Silahkan Hubungi kami melalui Email : admin@anaz.my.id.

Post a Comment