Selamat datang kembali di Demo IdBoegis, Blog yang membahas seputar Tips Adsense, Tips Komputer, Tutorial Blog, SSH Gratis, Tips Youtube, Tips Smartphone dan informasi internet lainnya.
Pada Artikel kali ini kita akan membahas Cara Memasang Contact Form di Halaman Statis Versi 2, Postingan ini masih berhubungan dengan Artikel Widget.
Cara membuat/ memasang contact form di halaman statis - Halo sobat siabdi, apa kabar kalian semua? semoga kita selalu dalam perlindunganNYA. Amin... Baiklah, sebelumnya saya sudah pernah membagikan tutorial mengenai cara memindahkan widget contact ke halaman statis. Dan kali ini saya akan memberikan tutorial mengenai cara membuat halaman contact form keren versi 2. Pada dasarnya fungsi dari contact form ini sama saja, yakni guna mempermudah pengunjung blog untuk mengirimkan pesan kepada sang pemilik blog, baik pesan kritik saran ataupun pesan untuk penawaran kerja sama.
Namun, pada kesempatan kali ini ada yang sedikit berbeda dari tutorial yang pernah saya bagikan sebelumnya, yakni tampilan contact form di halaman statis kali ini bisa di katakan lebih keren dari pada tutorial yang sudah pernah saya bagikan sebelumnya, dimana pada tutorial tersebut saya masih menggunakan contact form default blogger hanya saja penempatannya di pindahkan di halaman statis. Makin penasaran bukan :D Okelah langsung saja perhatikan gambar di bawah ini, kurang lebig nanti hasilnya akan nampak seperti gambar berikut.
Bagi anda yang ingin menerapkan di blognya, silahkan ikuti langkah-langkah di bawah ini :
2. Kemudian, setelah widget tersebut terpasang di blog sobat, selanjutnya silahkan sobat masuk ke halaman template --> edit template dan cari kode berikut :
Silahkan hapus kode yang berada pada area yang saya tandai di atas sehingga hasilnya akan nampak seperti di bawah ini.
3. Silahkan simpan template sobat.
4. Selanjutnya silahkan masuk ke halaman laman dan silahkan buat laman baru dengan judul Contact, kemudian silahkan sobat masuk pada mode html dan silahkan masukkan kode di bawah ini.
*Note : Sebaiknya setelah kode di atas sudah sobat paste, di sarankan untuk tidak membuka halaman tersebut dalam mode compose, karena bisa merusak tampilan contact formnya.
5. Terakhir silahkan publish dan lihat hasilnya.
Oiya, jangan lupa juga ya untuk membaca artikel yang berjudul cara mengatasi icon awesome yang tidak mau muncul di template blog.
Demikian artikel kali ini mengenai cara memasang contact form di halaman statis blogger versi 2. Terimakasih telah membaca artikel diatas, semoga bermanfaat dan selamat mencoba :)
Pada Artikel kali ini kita akan membahas Cara Memasang Contact Form di Halaman Statis Versi 2, Postingan ini masih berhubungan dengan Artikel Widget.
Cara Memasang Contact Form di Halaman Statis Versi 2
Advertisement
Namun, pada kesempatan kali ini ada yang sedikit berbeda dari tutorial yang pernah saya bagikan sebelumnya, yakni tampilan contact form di halaman statis kali ini bisa di katakan lebih keren dari pada tutorial yang sudah pernah saya bagikan sebelumnya, dimana pada tutorial tersebut saya masih menggunakan contact form default blogger hanya saja penempatannya di pindahkan di halaman statis. Makin penasaran bukan :D Okelah langsung saja perhatikan gambar di bawah ini, kurang lebig nanti hasilnya akan nampak seperti gambar berikut.
Cara Memasang Contact Form di Halaman Statis
1. Langkah pertama, pastikan pada blog sobat sudah terpasang widget contact form bawaan blogger. Apabila belum terpasang silahkan pasang terlebih dahulu, silahkan masuk ke halaman tata letak --> add gadget --> more gadget --> kemudian silahkan pilih contact form, silahkan letakkan widget tersebut di mana saja.2. Kemudian, setelah widget tersebut terpasang di blog sobat, selanjutnya silahkan sobat masuk ke halaman template --> edit template dan cari kode berikut :
<b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>
<b:includable id='main'>
HAPUS SEMUA KODE YANG ADA DI AREA INI
</b:includable>
</b:widget>
</b:section>
Silahkan hapus kode yang berada pada area yang saya tandai di atas sehingga hasilnya akan nampak seperti di bawah ini.
<b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>
<b:includable id='main'>
</b:includable>
</b:widget>
</b:section>
3. Silahkan simpan template sobat.
4. Selanjutnya silahkan masuk ke halaman laman dan silahkan buat laman baru dengan judul Contact, kemudian silahkan sobat masuk pada mode html dan silahkan masukkan kode di bawah ini.
<div class='siabdi-contact-form'>
<div class='form'>
<!-- Custom Contact Form By siabdi start -->
<div class='siabdi-contact-title'>
Contact Form
</div>
<form name='contact-form'>
<!-- Name Field -->
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' value="Name" size='30' type='text' onblur='if (this.value == "") {this.value = "Name";}' onfocus='if (this.value == "Name") {this.value = "";}' />
<p></p>
<!-- Email ID Field -->
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' value="Email ID" size='30' type='text' onblur='if (this.value == "") {this.value = "Email ID";}' onfocus='if (this.value == "Email ID") {this.value = "";}'/>
<p></p>
<!-- Message Field -->
<textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' name='email-message' value='Leave Your Message..' onblur='if (this.value == "") {this.value = "Leave Your Message..";}' onfocus='if (this.value == "Leave Your Message..") {this.value = "";}'></textarea>
<p></p>
<!-- Clear Button -->
<input class='contact-form-button contact-form-button-submit siabdi-button-color' type='reset' value='Clear'/>
<!-- Send Button -->
<input class='contact-form-button contact-form-button-submit siabdi-button-color' id='ContactForm1_contact-form-submit' type='button' value='Send'/>
<p></p>
<!-- Validation -->
<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>
</form>
<!-- End Custom Contact Form By siabdi -->
</div></div>
<style>
.siabdi-contact-form { background:#fff; box-shadow:-1px 2px 3px #ddd; font:12px arial; width:100%; max-width:320px; margin:20px auto; padding:15px; border:1px solid #ddd; }
.siabdi-contact-title { box-shadow:-1px 2px 3px #ddd; text-shadow:0 1px 1px rgba(0,0,0,.3); margin:0 0 10px 0; font-weight:400; padding:10px 15px; font:16px Arial; cursor:pointer; text-align:center; color:#fef4e9; border:solid 1px #da7c0c; background:#f78d1d; }
.contact-form-name,.contact-form-email,.contact-form-email-message { max-width:320px; width:100%; font-weight:bold; }
.contact-form-name { background:#f3f3f3 url(https://1.bp.blogspot.com/-myc7EfjmrJQ/V1MkjEfiopI/AAAAAAAAAaY/EpEGs4EE5YYSwJFhYD9wUz-NxCtTyPDdQCLcB/s1600/aa.png) no-repeat 7px 8px; background:#f3f3f3; border:1px solid #ddd; box-sizing:border-box; color:#A0A0A0; display:inline-block; font-family:Arial,sans-serif; font-size:13px; font-weight:bold; height:35px; margin:0; margin-top:5px; padding:5px 15px 5px 28px; box-shadow:inset -2px 2px 3px #ddd; vertical-align:top; }
.contact-form-email { background:#F2F2F2 url(https://2.bp.blogspot.com/-j4FdPs6RMEU/V1MkjNDfX0I/AAAAAAAAAac/NPO447zDntcqvgc6hDtKysUCf5xSPRJhgCLcB/s1600/bb.png) no-repeat 7px 10px; background-color:#F2F2F2; border:1px solid #ddd; box-sizing:border-box; color:#A0A0A0; display:inline-block; font-family:Arial,sans-serif; font-size:13px; font-weight:bold; height:35px; margin:0; margin-top:5px; padding:5px 15px 5px 28px; vertical-align:top; box-shadow:inset -2px 2px 3px #ddd; }
.contact-form-email:hover,.contact-form-name:hover { border:1px solid #bebebe; box-shadow:0 1px 2px rgba(5,95,255,.1); padding:5px 15px 5px 28px; }
.contact-form-email-message:hover { border:1px solid #bebebe; box-shadow:0 1px 2px rgba(5,95,255,.1); padding:10px; }
.contact-form-email-message { background:#FFF; background-color:#f2f2f2; border:1px solid #ddd; box-sizing:border-box; color:#A0A0A0; display:inline-block; font-family:arial; font-size:13px; margin:0; margin-top:5px; padding:10px; vertical-align:top; max-width:320px !important; height:150px; border-radius:4px; box-shadow:inset -2px 2px 3px #ddd; }
.contact-form-button { cursor:pointer; height:32px; line-height:28px; font-weight:bold; border:none; }
.contact-form-button { display:inline-block; zoom:1; *display:inline; vertical-align:baseline; margin:0 2px; outline:none; cursor:pointer; text-align:center; text-decoration:none; font:14px/100% Arial,Helvetica,sans-serif; padding:.5em 2em .55em; text-shadow:0 1px 1px rgba(0,0,0,.3); box-shadow:-1px 2px 3px #ddd; }
.contact-form-button:hover { text-decoration:none; }
.contact-form-button:active { position:relative; top:1px; }
.siabdi-button-color { color:#fef4e9; border:solid 1px #da7c0c; background:#f78d1d; }
.siabdi-button-color:hover { background:#f47c20; }
.siabdi-button-color:active { color:#fcd3a5; }
.contact-form-name { background:#F3F3F3 url(https://2.bp.blogspot.com/-j4FdPs6RMEU/V1MkjNDfX0I/AAAAAAAAAac/NPO447zDntcqvgc6hDtKysUCf5xSPRJhgCLcB/s1600/bb.png) no-repeat 7px 6px; padding:15px 15px 15px 28px; }
</style>
*Note : Sebaiknya setelah kode di atas sudah sobat paste, di sarankan untuk tidak membuka halaman tersebut dalam mode compose, karena bisa merusak tampilan contact formnya.
5. Terakhir silahkan publish dan lihat hasilnya.
Oiya, jangan lupa juga ya untuk membaca artikel yang berjudul cara mengatasi icon awesome yang tidak mau muncul di template blog.
Demikian artikel kali ini mengenai cara memasang contact form di halaman statis blogger versi 2. Terimakasih telah membaca artikel diatas, semoga bermanfaat dan selamat mencoba :)
EmoticonEmoticon