Cara Membuat Laman Contact Us Di Blogger


Cara Membuat Laman Contact Us Di Blogger
Selain Sitemap, About, Desclaimer, dan lain-lain. Anda juga memerlukan contact us. Laman Contact us juga merupakan suatu perangkat penting dalam membangun sebuah blog yang terpercaya dan professional.



Adapun fungsi dan manfaat dari contact us itu sendiri adalah :
  • Untuk menerima pesan dari pengunjung
  • Untuk mengetahui kritik dan saran dari pengunjung
  • Untuk melayani pengunjung mengenai konten blog anda
  • Mempermudah komunikasi antara pengunjung dan anda selaku admin
  • Kenyamanan dan keharmonisan antara anda dan pengunjung akan terjalin dengan baik

Untuk cara membuat Laman Contact Us di Blogger itu sendiri :
  • Kedua, masuk tab Laman, terus pilih laman baru
  • Ketiga, pada bagian Compose ganti dengan HTML
  • Keempat, Paste-kan kode ini di laman editor anda
<form id="kontak-seo" name="contact-form" style="
    padding-right: 25px;
"><br>
<input id="ContactForm1_contact-form-name" name="name" placeholder="Name *" size="30" type="text" value=""><br>
<br>
<input id="ContactForm1_contact-form-email" name="email" size="30" placeholder="Email *" type="text" value=""><br>
<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="Send Message">  <br>
<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><style scoped="" type="text/css">
#comments,.post_meta,#blog-pager{display:none}
form{color:#666}
#kontak-seo{margin:auto;max-width:300px}
#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{height:auto;margin:5px auto;padding:15px 12px;background:#fff;color:#444;border:1px solid rgba(0,0,0,.14);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;width:100%;min-width:100%;transition:all 0.5s ease-out}
#ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:15px 12px;background:#fff;color:#444;border:1px solid rgba(0,0,0,.14);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;resize:none;transition:all 0.5s ease-out}
#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;border-color:#66afe9;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,0.6)}
#ContactForm1_contact-form-submit{float:left;background:#34495e;margin:auto;vertical-align:middle;cursor:pointer;padding:12px 20px;font-size:14px;text-align:center;letter-spacing:.5px;border:0;width:100%;max-width:140px;border-radius:3px;color:#fff;font-weight:500;transition:all .8s ease}
#ContactForm1_contact-form-submit:hover{background:#3498db;color:#fff;}
#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:35px}
.contact-form-error-message-with-border{background:#f6f6f6;border:none;box-shadow:none;color:#444;padding:5px 0}
.contact-form-success-message{background:#4fc3f7;border:none;box-shadow:none;color:#fff}
img.contact-form-cross{line-height:40px;margin-left:5px}
.post-body input{width:initial}
@media only screen and (max-width:640px){
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-submit{width:100%;}}
.contact_layout{text-align:center;position:fixed;top:0;left:0;bottom:0;right:0;background:rgba(0,0,0,.8);z-index:99999}
.contact_message{width:50%;background:#fff;border-radius:5px;padding:20px;border:1px solid transparent;text-align:center;color:#333;position:absolute;top:30%;left:50%;margin-left:-25%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
.contact_message:before{content:"\f164";font-family:FontAwesome;font-weight:500;font-size:30px;display:block;margin-bottom:10px}
@media screen and (max-width:768px){.contact_message{width:90%!important;margin-left:-45%!important}}
</style><br>
<script type="text/javascript">
//<![CDATA[
if (window.jstiming) window.jstiming.load.tick('widgetJsBefore');
//]]>
</script><br>
<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script><br>
<script type="text/javascript">
//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '286056051677839066';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\286056051677839066','//teorinewbie.blogspot.com/','286056051677839066');
_WidgetManager._RegisterWidget("_ContactFormView", new _WidgetInfo("ContactForm1", "footer1", null, document.getElementById("ContactForm1"), {"contactFormMessageSendingMsg": "Sending...", "contactFormMessageSentMsg": "<div class='contact_layout'><div class='contact_message'><b>Your message has been sent</b>.<br/>Jika tidak ada halangan dan kesibukan lainnya, admin akan langsung merespon pesan yang Anda kirimkan.</div></div><br/>", "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": "286056051677839066", "contactFormNameMsg": "Name", "contactFormEmailMsg": "Email", "contactFormMessageMsg": "Message", "contactFormSendMsg": "Send", "submitUrl": "https://www.blogger.com/contact-form.do"}, "displayModeFull"));
//]]>
</script>
<div class="clear"></div>
  • Kelima, Ganti yang saya warna merah i dengan Blog ID Anda dan Alamat Blog Anda
  • Keenam, Publish dan Lihat hasilnya.

NB: Email Notifikasi Contact Us akan masuk di Gmail>Sosial

untuk penampakan contact usnya bisa cek disini : CONTACT US 



0 komentar