CONTOH KODE HTML PENULISAN YANG SALAH DI BLOGSPOT
Form kontak atau 'Contact Form' secara ajaib mampu meningkatkan performa sebuah halaman blog di mata mesin pencari, apalagi jika ada pengguna atau pengunjung yang menggunakannya. Namun bawaannya yang standard membuat sedikit sekali blogger yang menggunakannya. Di samping itu sebagian kita mungkin merasa widget tersebut kurang berguna bagi halaman sebuah web.
Pada tulisan yang lalu saya telah menjelaskan panjag lebar trik membuat kustomisasi tampilan 'FollowByEmail' dan pada kesempatan ini saya akan menunjukan cara paling mudah merobah tampilan 'Contact Form' yang juga tidak kalah kerennya, perhatikan contoh:
Cobalah isikan data kalian, karena form kontak diatas bukanlah sebuah gambar , melainkan sebundel kode HTML-CSS yang saya tanamkan lewat opsi HTML. Kalian dapat mengisikan nama, alamat email dan menuliskan pesan di dalam form.
Langkah pertama: Terlebih dahulu tambahkan CSS.
- Masuk ke pengaturan Blogger atau Dasbor blogger.
- Pilih Tema
- Pada menu Blogger Theme Designer yang muncul dengan beberapa pilihan, scroll keatas hingga bagian paling bawah yakni menu "Add CSS" atau "Tambahkan CSS" klik dan setelah itu akan muncul kotak CSS.
Copy kode CSS yang di inginkan untuk membentuk HTML, pastekan ke dalam kotak tadi. Kalian harus tahu dengan mempastekan kode CSS ke dalam kotak CSS, sama saja kalian menempatkan kode CSS di atas ]]></b:skin> melalui Edit HTML.
.contact-form-widget{margin-left:auto;margin-right:auto;width:600px;max-width:100%;padding:25px;background:#fff}.contact-title{text-align:center;font:41px fantasy;color:#121212;margin-bottom:25px}.contactf-name,.contactf-email{float:left;width:47%}.contactf-name{margin-right:6%}.name-icon img,.email-icon img{background:transparent!important;border:medium none!important;box-shadow:none!important;padding:11px 0!important;width:16px !important;height:16px !important;}.name-icon,.email-icon{position:absolute;z-index:1}.contact-form-name,.contact-form-email,.contact-form-email-message,.contact-form-name:hover,.contact-form-name:focus,.contact-form-email:hover,.contact-form-email:focus,.contact-form-email-message:hover,.contact-form-email-message:focus{width:100%;max-width:100%;margin:0 0 25px;padding:10px 10px 10px 25px;font:bold 16px cursive;text-shadow:0 1px 2px #ddd;color:#121212;background:transparent!important;border-color:#121212;border-width:0 0 2.5px;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.contact-form-name,.contact-form-email{height:40px}.contact-form-email-message,.contact-form-email-message:hover,.contact-form-email-message:focus{padding:10px!important}.contact-form-email-message{height:150px;border-width:2.5px!important}.contact-form-button-submit,.contact-form-button-submit:hover{background:#121212!important;width:30%;height:37px;font:bold 13px "Lucida Grande";letter-spacing:2px;color:#fff;text-align:center;border:medium none;cursor:pointer;display:block;margin:0 auto;outline:none}.contact-form-cross{border:medium none!important;box-shadow:none!important;padding:0!important;width:11px !important;height:11px !important;}
Langkah kedua: Tambahkan widget contact Form:
Cara yang lebih mudah:
Jika kalian merasa kesulitan dalam meletakan CSS, lebih baik lakukan saja cara berikut:
- Masuk ke dasbor / pengaturan blogger
- Pilih Layout atau Tataletak
- Pilih Add Gagdet atau Tambahkan Gadget
- Pilih HTML/JavaScript
- Pilih gagdet 'CotactForm' dan geser widget tersebut hingga ke bagian bawah footer template mungkin diatas atribusi.
Save template.
Cara yang lebih mudah:
Jika kalian merasa kesulitan dalam meletakan CSS, lebih baik lakukan saja cara berikut:
- Masuk ke dasbor / pengaturan blogger
- Pilih Layout atau Tataletak
- Pilih Add Gagdet atau Tambahkan Gadget
- Pilih HTML/JavaScript
- Pada halaman atau form kosong HTML/Javascript yang telah terbuka copy dan lalu paste-
- kan kode berikut ke dalamnya:
<style type="text/css">.contact-form-widget{margin-left:auto;margin-right:auto;width:600px;max-width:100%;padding:25px;background:#fff}.contact-title{text-align:center;font:41px fantasy;color:#121212;margin-bottom:25px}.contactf-name,.contactf-email{float:left;width:47%}.contactf-name{margin-right:6%}.name-icon img,.email-icon img{background:transparent!important;border:medium none!important;box-shadow:none!important;padding:11px 0!important;width:16px !important;height:16px !important;}.name-icon,.email-icon{position:absolute;z-index:1}.contact-form-name,.contact-form-email,.contact-form-email-message,.contact-form-name:hover,.contact-form-name:focus,.contact-form-email:hover,.contact-form-email:focus,.contact-form-email-message:hover,.contact-form-email-message:focus{width:100%;max-width:100%;margin:0 0 25px;padding:10px 10px 10px 25px;font:bold 16px cursive;text-shadow:0 1px 2px #ddd;color:#121212;background:transparent!important;border-color:#121212;border-width:0 0 2.5px;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.contact-form-name,.contact-form-email{height:40px}.contact-form-email-message,.contact-form-email-message:hover,.contact-form-email-message:focus{padding:10px!important}.contact-form-email-message{height:150px;border-width:2.5px!important}.contact-form-button-submit,.contact-form-button-submit:hover{background:#121212!important;width:30%;height:37px;font:bold 13px "Lucida Grande";letter-spacing:2px;color:#fff;text-align:center;border:medium none;cursor:pointer;display:block;margin:0 auto;outline:none}.contact-form-cross{border:medium none!important;box-shadow:none!important;padding:0!important;width:11px !important;height:11px !important;}</style><div class="widget ContactForm" id="ContactForm22"><div class="contact-form-widget"><h2 class="contact-title">Get in touch.</h2><div class="form"><form name="contact-form"><div class="contactf-name"><div class="name-icon"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCqE0bKeL20ORQa2_PIPxSAL0Y4RJxZf2GyR1NrfxyIkbvBz0niyTQ9X5Q1m3xkiBDdAkkgt9kbKRUbQmUPrQUJhVxBK9eu4a28cSUbwsSW2xy8D1fR99106rX_OEHkWZ4crxdOBB1VZD9/s1600/avatar%25281%2529.png" width="16" height="16" /></div><input class="contact-form-name" id="ContactForm1_contact-form-name" name="Name" size="30" type="text" value="Name" onblur='if (this.value == "") {this.value = "Name";}' onfocus='if (this.value == "Name") {this.value = "";}' /></div><div class="contactf-email"><div class="email-icon"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwUjoD1ZLHVSkwGCEs6AI_9WLK-fH9jSvcmDc1qRclvAa9Dw3BRGEtI1rxVfi8JklzcvyQKEZUMhKEVcKrs7sBpNvUjFFDRn798TefPyHM2mlIYpO7BV0f3PpGO39d-XZ4WZIb-wijnfUy/s1600/envelope%25281%2529.png" width="16" height="16" /></div><input class="contact-form-email" id="ContactForm1_contact-form-email" name="E-mail address" size="30" type="text" value="E-mail address" onblur='if (this.value == "") {this.value = "E-mail address";}' onfocus='if (this.value == "E-mail address") {this.value = "";}'/></div><div style="clear:both"></div><div class="contactf-message"><textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="Type your message here..." rows="5" value="Type your message here..." onblur='if (this.value == "") {this.value = "Type your message here...";}' onfocus='if (this.value == "Type your message here...") {this.value = "";}'></textarea><input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="SEND" /><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></div></div>
Jangan lupa geser widget ke bagian paling bawah di kaki (footer) template. Save template.
Komentar
Posting Komentar