Cara Membuat Halaman Contact Pada Blog

Cara membuat halaman contact pada blog - Hallo guys, kali ini saya akan membagikan bagaimana cara membuat halaman contact pada blog. Contact merupakan elemen penting dalam suatu blog ataupun website dimana fungsinya bisa sangat banyak tergantung bagaimana cara kita mengelola website atau blog. Ibaratnya contac adalah alat penghubung kita dengan dunia luar, sehingga bisa saling terkoneksi dengan jalan komunikasi yang mudah lewat internet online.

Berikut ini cara buat contact us via email dengan html pada halaman statis blogger, cara nya cukup mudah dan praktis, kita tinggal memanfaatkan halaman statis pada blogger dengan menerapkan mode HTML.

Cara membuat contact us di blogger seperti ini:  Halaman baru > HTML > Copy dan paste code di bawah ini pada halaman kamu:

<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'] = '58891862532827193632';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\58891862532827193632','//webtecknoo.blogspot.com/','58891862532827193632');
_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": "58891862532827193632", "contactFormNameMsg": "Name", "contactFormEmailMsg": "Email", "contactFormMessageMsg": "Message", "contactFormSendMsg": "Send", "submitUrl": "https://www.blogger.com/contact-form.do"}, "displayModeFull"));
//]]>
</script>
<div class="clear"></div>

Selanjutnya ganti code yang berwarna "merah" dengan no id blogger kamu, serta ganti alamat blog dengan url blog kamu. Cara mengetahui no id blog kamu bisa dilihat ketika membuka akun blog di blogger, contohnya seperti gambar dibawah ini:

Cukup mudah bukan?, pesan yang dikirimkan langsung terkirim ke alamat email akun blogger. Bisa di cek lewat gmail . jika terdapat eror atau ada yang tidak berfungsi dengan baik bisa langsung di tanyakan. begitulah cara membuat contact di blogspot via email dengan html pada halaman statis blogger. Terimakasih

Share this post