Cara Membuat Contact Form Disamping Kanan Blog

Cara agar Contact Form berada disamping blog?Sebenarnya ini hanya untuk inovasi saja agar para blogger tidak bosan dengan gaya Contact Form yang sudah ada. Contact Form juga sangat berguna untuk berkomunikasi dengan para Reader blog. guna untuk meningkatkan kredibilitas blog Contact Form sangat diperlukan. untuk itu contact form harus disediakan. nah, bagaimana cara memasang Contact Form berada disamping kanan blog. berikut tahapan-tahapannya :

1. Buka dashboard blogger

2. Pergi ke Tata Letak.

3. Add Widget/Gadget

4. Kemudian Add "Contact Form/Formulir Kontak"

5. Setelah itu, Pergi ke "Template", Lalu klik "Edit Template. untuk mencari contact form yang sudah ditambahkan ditata letak tadi ditemplate. Gunakan Ctrl+F agar memudahkan dalam pencarian. lihat gambar dibawah ini ;

6. Setelah langkah diatas sudah terpenuhi, kita hanya akan menambahkan widget/gadget diTata Letak

7. Langkah Terakhir, Add/letakkan kode berikut :

<style>
.form-parent {width:323px;height:auto;background: transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSutHYHphHEesUKN7msp0XeUxDy2vgBOxQHHvdn6azdQze9pgzvgELB-6w5EIhx_dmOX3VqzikwDMAJfBbziFx_nthB9no57pDptRJsDVP6llBScoeKRCm_ULRyoZeRoDePgz-yR-TM0Om/s1600/contact-button.png') no-repeat right 10px;position:fixed;top:150px;left: -275px;z-index:9999999;transition:all ease .6s;-moz-transition:all ease .6s;-webkit-transition:all ease .6s;-o-transition:all ease .6s;}
.form-parent:hover {left:0;}
.cc-float-form {background:-moz-linear-gradient(top, #2b2a2b 5%, #0a0a0a 100%);background:-webkit-linear-gradient(top, #2b2a2b 5%, #0a0a0a 100%);background:-o-linear-gradient(top, #2b2a2b 5%, #0a0a0a 100%); background:-ms-linear-gradient(top, #2b2a2b 5%, #0a0a0a 100%); background:linear-gradient(to bottom, #2b2a2b 5%, #0a0a0a 100%);color:#fafafa;padding:10px; width:250px;border:2px solid #000; border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px;}
#ContactForm1 {display:none;}
.contact-form-area {background: #222;width: 245px;padding: 10px 0px;border: 1px solid #111;box-shadow: 2px 2px 2px #111 inset; -webkit-box-shadow: 2px 2px 2px #111 inset;font-family:Verdana, Geneva, sans-serif;color:#fafafa;font-size: 12px;}
#cc {float:right;font-size:9px;margin-top:-10px;color:#777;}#cc a { color: #777;text-decoration:none;}
</style>
<div class='form-parent'>
<form name="contact-form" class="cc-float-form">
<p></p>
Name:<br />
<input class="contact-form-area" id="ContactForm1_contact-form-name" name="name" size="30" value="" type="text" />
<p></p>
Email:
<span style="color:red;">*</span><br />
<input class="contact-form-area" id="ContactForm1_contact-form-email" name="email" size="30" value="" type="text" />
<p></p>
Message: <span style="color:red;">*</span><br />
<textarea class="contact-form-area" id="ContactForm1_contact-form-email-message" name="email-message" cols="25" rows="5"></textarea>
<p></p>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" value="Send" type="button" />
<p></p>
<div style="text-align: center; max-width: 222px; width: 100%">
<p class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></p>
<p class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></p>
</div>
<div id="cc">
<a href="#" target="_blank"></a>
</div>
</form>
</div>