10+ Tips Ampuh Biar Blog Gres Anda Cepat Terindex Google - Yahoo - Bing

Hei guys, di kesempatan kali ini Titip Teknologi akan memperlihatkan tutorial bagaimana cara menciptakan / memasang halaman contact us di blog Anda. Halaman Contact us ialah sebuah halaman yang mempunyai kegunaan untuk pengunjung situs kita, kalau mereka ingin menghubungi atau mengontak kita selaku pemilik website atau blog. Halaman Contact us juga menjadi salah satu halaman yang diharapkan ketika situs Anda ingin didaftarkan ke google adsense.

Sama ibarat halaman sitemap di artikel sebelumnya, halaman contact us ini mempunyai tampilan yang simple, responsive, dan fast loading sehingga widget ini tidak akan memberatkan blog dan tidak akan awut-awutan ketika dibuka di tampilan mobile. Bagaimana caranya? silahkan Anda ikuti langkah-langkah dibawah ini.

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

Langkah 2 : Paste isyarat berikut di bab HTML nya.

Silakan isi form di bawah ini untuk menghubungi admin <a href="https://cara-awesome.blogspot.com/"><b></b></a>. Jika tidak ada halangan dan kesibukan lainnya, admin akan pribadi merespon pesan yang Anda kirimkan. <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 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:inline-block;width:100%;height:auto;margin:10px auto;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 auto;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:#232531;color:#fff;font-family:Roboto;font-size:16px;width:161px;height:45px;float:left;margin:10px 0 3px 5px;cursor:pointer;border:none;border-radius:24px;} .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{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> <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 bab yang berwarna merah dengan Link Blog Anda. sementara bab yang berwarna biru ganti dengan ID Blog Anda. untuk ID Blog dapat dilihat di url ketika Anda login ke Blogger. disitu ada blogID=nomor id. Lalu klik Publish.

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

Langkah 4 : Terakhir pilih bab Theme, kemudian klik Edit HTML. Tambahkan isyarat css dibawah ini, kemudian Save theme.

.quickedit,#ContactForm1,#ContactForm1 br {display:none}

Baca Juga : Cara Membuat Widget Random Post yang Ringan & Responsive di Blog

Selesai.. hingga disini seharusnya Anda sudah dapat menciptakan halaman contact us sendiri, kalau ada yang masih belum dimengerti dapat disampaikan di komentar. Sekian dan biar bermanfaat.