Contact form style-2 untuk blogger

Beberapa saat yang lalu saya sudah memposting cara membuat contact form di halaman statis blog, di posting ini saya akan berbagi style contact form yang ke-2 di blog ini. Fungsinya sama yaitu untuk membantu pengunjung blog mengirim pesan ke admin blog dan untuk cara dan penempatannya juga sama, perbedaannya terletak hanya pada style yang digunakan dan tentunya kode yang digunakan akan sedikit berbeda.

Cara membuat contact form style ke-2 untuk blogger

I. Menambahkan gadget contact form pada bagian sidebar

1. Klik Tata Letak, Pada Layout bagian Sidebar silahkan klik Tambahkan Gadget, lalu pilih Contact Form.
2. Beri judul "contact", lalu klik Simpan.

II. Menyembunyikan gadget contact form pada bagian sidebar

1. Klik Tema, Edit HTML.
2. Letakkan kode berikut di atas kode ]]></b:skin>

#ContactForm1 {display:none;}

3. Klik Simpan.

III. Menambahkan halaman statis yang berisi contact form

1. Klik Halaman, Tambahkan Halaman baru.

2. Pindah mode penulisan ke mode HTML.
3. Masukkan kode berikut

<style type="text/css">
.contact-form {
width:600px;
max-width:100%;
margin-left:auto;
margin-right:auto;
padding:0;
color:#444
}

.contactf-name {
float:left;
width:45%
}

.contactf-email {
float:right;
width:45%
}

.contact-form-name,.contact-form-email,.contact-form-email-message {
width:100%;
max-width:100%;
padding:20px 15px;
margin:20px 0 30px
}

.contact-form-button,.contact-form-button-submit {
width:20%;
max-width:20%;
height:40px;
color:#fff;
background:#3af;
font-size:.875em;
border-radius:5px
}

.contact-form-button-submit {
-webkit-transition:background-color 100ms ease-out 100ms;
-moz-transition:background-color 100ms ease-out 100ms;
-o-transition:background-color 100ms ease-out 100ms;
transition:background-color 100ms ease-out 100ms
}

.contact-form-button-submit:hover {
background:#2b93de
}

</style>
<script>
var blogId = nomor-ID-blog;//1234*****
var contactFormMessageSendingMsg ='Mengirim...';
var contactFormMessageSentMsg = 'Pesan terkirim.';
var contactFormMessageNotSentMsg = 'Pesan tidak terkirim, coba beberapa saat lagi.';
var contactFormEmptyMessageMsg ='Harap isi kotak pesan.';
var contactFormInvalidEmailMsg = 'Harap isi alamat email yang valid.'
var widgetLoaded=false;
function sendEmailMsg() {
ifwidgetloaded:= false) { _WidgetManager._RegisterWidget(_ContactFormView,new _WidgetInfo(ContactForm1,'sidebar',null,document.getElementById(ContactForm1),{'contactFormMessageSendingMsg': contactFormMessageSendingMsg,'contactFormMessageSentMsg': contactFormMessageSentMsg,'contactFormMessageNotSentMsg': contactFormMessageNotSentMsg,'contactFormInvalidEmailMsg': contactFormInvalidEmailMsg,'contactFormEmptyMessageMsg': contactFormEmptyMessageMsg,'title': 'Contact Form','blogId': blogId,'contactFormNameMsg': 'Name','contactFormEmailMsg': 'Email','contactFormMessageMsg': 'Message','contactFormSendMsg': 'Send','submitUrl': 'https://www.blogger.com/contact-form.do'},'displayModeFull'));
widgetloaded:true
}

</script>
<div class="contact-form">
<form name="contact-form">
<div class="contactf-name">
Nama : <br />
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /></div>
<div class="contactf-email">
Email: <em>(harus diisi)</em><br />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /></div>
<div style="clear: both;"></div>
<div class="contactf-message">
Pesan: <em>(harus diisi)</em><br />
<textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" rows="7" style="height: 149px; margin: 0px;"></textarea></div>
<br />
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" onclick="sendEmailMsg()" type="button" value="Kirim" />
<div style="max-width: 450px; text-align: center; width: 100%;">
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>
<style type="text/css"> .post-footer,.sharing-button {
display:none!important
}

Pada bagian nomor ID blog (yang bercetak tebal), silahkan anda ganti dengan ID blog anda.
4. Klik Publikasikan untuk menyimpan.

IV. Menampilkan link yang berisi halaman contact form di tab halaman utama blog

1. Klik Tata Letak, Pada Layout bagian tab silahkan anda klik Tambahkan Gadget, Pilih yang Halaman.

2. Untuk bagian Judul kosongkan saja, berikutnya klik Tambahkan Item Baru.
3. Berikutnya bagian kolom nama silahkan anda ketik "contact" nanti secara otomatis akan muncul URL halaman contact form yang sudah anda buat pada bagian kolom URL halaman.
4. Terakhir klik Simpan.

Demikianlah cara membuat contact form style ke-2 untuk blogger, semoga bermanfaat.