Cara Membuat Laman Contact Us Yang Keren Di Blogger

Oke kali ini saya akan memberikan cara membuat contact us yang super keren dan stylish. Contact us ini fungsinya agar pengunjung blog yang berkunjung ke blog kita bisa langsung memberikan pesan entah berupa kritik, saran atau pertanyaan langsung ke pemilik blog melalui laman contact us, yang nantinya pesan itu akan masuk ke email si pemilik blog.

Cara Membuat Laman Contuct Us Yang Keren Di Blogger1

Seperti apa contact us yang akan kita buat? yuk cek hasilnya ( disini ) di contact us milik RiseOfBlogger

Nah jika kamu tertarik untuk membuat laman contact us yang keren untuk blogger kamu simak terus ya.

Cara Membuat Laman Contuct Us Yang Keren Di Blogger

• Langkah pertama silahkan kamu buka ke bagian Tata Letak di menu blogger yang tersedia
• Lalu tambahkan widget Formulir Kontak di sembarang, jangan dihapus biarkan saja begitu nanti akan kita sembunyikan dan hanya akan tampil pada laman saja.

Cara Membuat Laman Contuct Us Yang Keren Di Blogger2

• Setelah itu silahkan masukkan kode dibawah ini dan simpan pada laman, misalnya laman tersebut kamu tulis dengan judul Contact Us lalu publikasikan

<div id="contact_wrap">

<h3>

Hubungi Kami</h3>

<form name="contact-form">

<input id="ContactForm1_contact-form-name" name="name" placeholder="Nama" size="30" type="text" value="" />

<input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" />

<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Pesan" rows="5"></textarea>

<input id="ContactForm1_contact-form-submit" type="button" value="Kirim" />

<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>

</div>

<style type="text/css">

/* Menyembunyikan elemen dalam postingan */

#comments, #blog-pager, .breadcrumbs, .post-footer{display:none}

</style>

• Nah jika sudah kini saatnya merubah style dari contact us tersebut agar mirip seperti yang diinginkan dengan cara copy kode dibawah ini lalu buka menu Template dan klik Edit HTML
• Tekan CTRL+F cari kode ini ]]></b:skin>
• Paste kode dibawah ini diatas kode ]]></b:skin>

/* CSS Contact Form Light Theme by BloggerTut.com */

#ContactForm1{

display:none;

}

#contact_wrap {

margin: auto;

width: 321px;

height: 380px;

padding: 25px;

border-radius: 1em;

border-top:1px solid #dbdbdb;

border-right:1px solid #b2b2b2;

border-left:1px solid #dbdbdb;

border-bottom:1px solid #9d9d9d;

background-color:#666;

filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#fff', endColorstr='#fff');

background-image:-webkit-linear-gradient(top, #fff 30%, #fff 30%, #fff 100%);

background-image:-moz-linear-gradient(top, #fff 30%, #fff 30%, #fff 100%);

background-image:-ms-linear-gradient(top, #fff 30%, #fff 30%, #fff 100%);

background-image:-o-linear-gradient(top, #fff 30%, #fff 30%, #fff 100%);

background-image:linear-gradient(top, #fff 30%, #fff 30%, #fff 100%);

box-shadow: 1px 1px 5px #000;

}

#contact_wrap h3{

color: #fff;

font-family:Georgia;

font-size: 20px;

font-style:italic;

font-weight:bold;

margin: 0 -36px 20px -36px;

padding: 12px;

text-align: center;

text-shadow: 2px 0 0 #1f4962;

-webkit-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;

-moz-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;

box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;

background-color: #333;

position: relative;

}

#contact_wrap h3:before {

content: ' ';

position: absolute;

bottom: -10px;

left: 0;

width: 0;

height: 0;

border-style: solid;

border-width: 10px 0 0 10px;

border-color: #333 transparent transparent transparent;

}

#contact_wrap h3:after {

content: ' ';

position: absolute;

bottom: -10px;

right: 0;

width: 0;

height: 0;

border-style: solid;

border-width: 0 0 10px 10px;

border-color: transparent transparent transparent #333;

}

#ContactForm1_contact-form-name{

width: 270px;

height:auto;

margin: 5px auto;

padding: 10px 10px 10px 40px;

background:#f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiASSLuixlH_eInHVGPjaX1XsQTgoZyfkRaf073pnMoSblOvIKVvn1dVsItYjcAleHool9L6lS0k-BZbLlh2_Xx4D3xBUmYZNaFjkDKJBQSEFEXzgi5RHVzCvQLp0KsmE9cVHbxcHFd880/s1600/user.png)no-repeat 10px center;

color:#777;

border:1px solid #ccc;

-webkit-border-radius: 4px;

-moz-border-radius: 4px;

border-radius: 4px;

-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;

box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;

}

#ContactForm1_contact-form-email{

width: 270px;

height:auto;

margin: 5px auto;

padding: 10px 10px 10px 40px;

background: #f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEY7g3HUtbLY64o9v_4qradwVwfIDO__UYaDGQH9eA144rYWFcBbM51lo7L7YA1sBtUDb7bgImSEg6ZG1viT025USsV_AXnVi1bjYog6pNPzA8fm8bXA0aFx3iWSnv6Pqg9br2t3Uw31Y/s1600/pen.png)no-repeat 10px center;

color:#777;

border:1px solid #ccc;

-webkit-border-radius: 4px;

-moz-border-radius: 4px;

border-radius: 4px;

-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;

box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;

}

#ContactForm1_contact-form-email-message{

width: 320px;

height: 150px;

margin: 5px auto;

padding: 10px 10px 10px 40px;

font-family:Arial, sans-serif;

background: #f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS4ket7C4juWDpgssTebv2L0Rh2n5jUk74hTBXp8v7YXRNmBsv0AHDGB4egw-ECO4HqRBlOO9lWIPm2o1FAuQGfe7voawbZq0cXPR7fvhQZHrVxmjZH43Cx5ykEwWsKWIGcTPb_V7XjcM/s1600/msg2.png)no-repeat 10px 10px;

color:#777;

border:1px solid #ccc;

-webkit-border-radius: 4px;

-moz-border-radius: 4px;

border-radius: 4px;

-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;

box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;

}

#ContactForm1_contact-form-submit {

width: 95px;

height: 30px;

float: right;

color: #FFF;

padding: 0;

cursor:pointer;

margin: 25px 0 3px 0 0;

background-color:#000;

border-radius:4px;

text-shadow: 1px 0 0 #1f4962;

-webkit-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;

-moz-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;

box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;

background-color: #000;

border:1px solid #194f6d;

}

#ContactForm1_contact-form-submit:hover {

background:#f2f2f2;

color:#000;

}

#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{

width: 320px;

margin-top:35px;

}

• Selesai, simpan template dan lihat hasilnya.