Cara Membuat Contact Us di Blog Terbaru

Cara Membuat Contact Us di Blog Terbaru

Hallo teman-teman semuanya, selamat datang di DXTrip Blog.

Oke untuk kali ini DXTrip Blog akan berbagi cara bagaimana cara untuk membuat contact us atau contact form di blogger. Contact us ini berfungsi sebagai informasi kepada pengunjung yang ingin mengajukan pertanyaan atau kritikan dari sebuah blog tersebut.

Contact us juga sangat penting bagi yang ingin mendaftarkan ke Adsense, karena mungkin salah satu kriteria yang disukai oleh Adsense. Jadi dengan adanya contact form, kita bisa mendapatkan saran atau masukkan dari para pengunjung blog kita dan juga bisa membuat blog kita semakin menarik.

Berikut adalah cara bagaimana membuat contact us di blog, yuk kita simak tutorial dibawah ini :

Pertama, kita login ke blogger kita kemudian pilih pada menu Tata Letak > klik Tambahkan gadget > setelah menu sudah terbuka, maka pilih menu Gadget Lainnya dan klik tanda plus pada widget Formulir Kontak.

Jika kalian sudah memberikan widget pada blog kalian, maka lewati saja langkah-langkah yang sudah dijelaskan diatas.

Selanjutnya, klik pada menu Tema > Edit HTML > Tambahkan code dibawah ini sebelum </head>

<style type='text/css'>
#ContactForm1,#ContactForm1 br{display:none}</style>

Kemudian Simpan Tema.

Selanjutnya klik pada bagian Halaman > Halaman Baru > dan tambahkan code dibawah ini pada tab HTML.

<form name="contact-form">
<div class='formcolumn1'>
<input id="ContactForm1_contact-form-name" name="name" placeholder='Name' size="30" type="text" value="" />
</div>
<div class='formcolumn2'>
<input id="ContactForm1_contact-form-email" name="email" placeholder='Email' size="30" type="text" value="" />
</div>
<div class='formcolumn3'>
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder='Message' rows="7"></textarea>
</div>
<div class='formcolumn4'>
<input class="ripplelink" id="ContactForm1_contact-form-submit" type="button" value="Send Now" />
</div>
<div style="max-width: 100%; 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">
#ContactForm1,#comments{display:none}
#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{display:inline-block;width:100%;height:auto;margin:10px auto;padding:14px;background:#f4f7f8;color:#222;border:0;border-bottom:1px solid #c6cbcc;transition:all .6s}
#ContactForm1_contact-form-email-message{font-family:'Roboto';width:100%;height:250px;margin:10px auto;padding:14px;background:#f4f7f8;color:#222;border:0;border-bottom:1px solid #c6cbcc;transition:all .6s}
#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{background:#f4f7f8;outline:none;border-color:#f24a4a}
#ContactForm1_contact-form-submit{background:#fff;color:#5f6368;font-size:16px;width:161px;height:45px;float:left;padding:0 0 0 20px;margin:10px 0 3px 5px;cursor:pointer;border:none;border-radius:24px;box-shadow:0 1px 2px 0 rgba(60,64,67,0.302),0 1px 3px 1px rgba(60,64,67,0.149);transition:box-shadow .08s linear,min-width .15s cubic-bezier(0.4,0.0,0.2,1)}
.formcolumn4{position:relative}
.formcolumn4:before{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVFO11yvKhfFNMM3ky71V2B-wN1DDYLMKfWZmabQ-jfTe2Gjtf1eKVInmRuaA2rIvnMurYjx6zB8KWE3W1-OLGPP1l558nrz1yLBstmM0nqTckl_DtrlxNEOoAIWQ-zwSNP12FQVHPBDNv/s1600/mailme.png);background-position:center;background-repeat:no-repeat;background-size:20px;content:'';display:block;height:63px;width:32px;position:absolute;z-index:1;left:15px;top:0}
#ContactForm1_contact-form-submit:hover{background:#fafafb;box-shadow:0 1px 3px 0 rgba(60,64,67,0.302),0 4px 8px 3px rgba(60,64,67,0.149)}
#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{margin-top:35px}
form{color:#888}
.formcolumn1,.formcolumn2{float:left;width:50%}
.formcolumn1,.formcolumn2{margin:0 0 10px 0;padding:0 10px 0 0}
.formcolumn2{padding:0 0 0 10px}
@media only screen and (max-width:768px){.formcolumn1,.formcolumn2{width:100%;padding:0}}</style>

Lalu Edit Pengaturan entri seperti gambar dibawah.

Ganti semua code yang ditandai denga URL dan ID Blog. ID blog bisa dilihat pada saat sedang login di blogger. Contohnya seperti gambar di bawah ini :

 Jika sudah tinggal di Publikasi dan selesai.

Mungkin hanya segitu yang bisa saya kasih untuk Cara Membuat Contact Us di Blog Terbaru. Jika ingin ada yang ditanyakan, silahkan dengan berkomentar dibawah ini dan jangan lupa untuk terus berkunjung agar dapat update terbaru yang lainnya.

(Sumber: Arlina Design)

Baca Juga