Cara Membuat Halaman Contact Us yang Simple & Responsive di Blog

Hei guys, di kesempatan kali ini cara awesome akan memberikan tutorial bagaimana cara membuat halaman contact us yang simple dan responsive di blog Anda dengan mudah. Halaman Contact us adalah sebuah halaman yang berguna untuk pengunjung situs kita, jika mereka ingin menghubungi atau mengontak kita selaku pemilik website atau blog. Halaman Contact us juga menjadi salah satu halaman yang diperlukan saat situs Anda ingin didaftarkan ke Google Adsense.
contact us blogger yang simple dan responsive

Sama seperti halaman sitemap di artikel sebelumnya, halaman contact us ini memiliki tampilan yang simple, responsive, dan fast loading sehingga widget ini tidak akan memberatkan blog dan tidak akan berantakan saat dibuka di tampilan mobile. Bagaimana caranya? silahkan Anda ikuti langkah-langkah dibawah ini.

Langkah 1 : Login ke Blogger, ke bagian Pages lalu buatlah halaman baru.

Langkah 2 : Paste kode berikut di bagian HTML nya.

mode html di halaman contact us


<form name="contact-form">
<div class="formcolumn1"> <input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" placeholder="Name" /> </div> 
<div class="formcolumn2"> <input id="ContactForm1_contact-form-email" name="email" size="30" type="email" value="" placeholder="Email" /> </div> 
<div class="formcolumn3"> <textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="7" placeholder="Your message..."></textarea> </div> 
<div class="formcolumn4"> <input id="ContactForm1_contact-form-submit" type="button" value="Send Message" /> </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:block;width:96%;height:auto;margin:10px 0;padding:14px;background:#fff;color:#222;border:1px solid rgba(0,0,0,0.08)} #ContactForm1_contact-form-email-message{font-family:'Roboto';width:100%;height:250px;margin:10px 0;padding:14px;background:#fff;color:#222;border:1px solid rgba(0,0,0,0.08)} #ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{background:#fff;outline:none;border-color:rgba(0,0,0,0.18)} #ContactForm1_contact-form-submit{background:#0a122d;color:#fff;font-family:Roboto;font-size:14px;width:auto;float:left;cursor:pointer;border:none;border-radius:3px;padding:15px 20px} .formcolumn4{position:relative} #ContactForm1_contact-form-submit:hover{background:#00c9ff;transition:all .3s ease;} #ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{margin-top:35px} form{color:#888} .formcolumn1,.formcolumn2{width:100%;padding:0} @media only screen and (max-width:768px){.formcolumn1,.formcolumn2{width:100%;padding:0}} </style> <script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '4177205204185375577';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d4177205204185375577','//www.cara-awesome.blogspot.com/','4177205204185375577'); _WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Sending...', 'contactFormMessageSentMsg': 'Your message has been sent.', 'contactFormMessageNotSentMsg': 'Message could not be sent. Please try again later.', 'contactFormInvalidEmailMsg': 'A valid email address is required.', 'contactFormEmptyMessageMsg': 'Message field cannot be empty.', 'title': 'Contact Form', 'blogId': '4177205204185375577', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull')); //]]> </script>
Catatan : Ubah bagian yang berwarna merah dengan Link Blog Anda. sementara bagian yang berwarna biru ganti dengan ID Blog Anda. untuk ID Blog bisa dilihat di url saat Anda login ke Blogger. disitu ada blogID=nomor id. Lalu klik Publish.

Langkah 3 : Sekarang ke bagian Layout, klik Add a Gadget lalu pilih Contact Form. Klik Save. Untuk penempatannya silahkan Anda tentukan sendiri, bebas dimana saja.

add contact form nya blogger


Langkah 4 : Terakhir pilih bagian Theme, lalu klik Edit HTML. Tambahkan kode css dibawah ini, lalu Save theme.
.quickedit,#ContactForm1,#ContactForm1 br {display:none}

Selesai.. sampai disini seharusnya Anda sudah bisa membuat halaman contact us sendiri, jika ada yang masih belum dimengerti bisa disampaikan di komentar. Sekian dan semoga bermanfaat.

Posting Komentar untuk "Cara Membuat Halaman Contact Us yang Simple & Responsive di Blog"