Cara Membuat Formulir Kontak pada Sidebar Blogspot
Formulir Kontak atau Contact Form yang biasa di
pasang pada Blog atau Website. Fungsi dari Formulir Kontak itu sendiri adalah : Sebagai kontak komunikasi kita dengan pengunjung . Agar pengunjung dapat memberi saran masukan , kritikan mungkin juga meminta atau memberi Info pada Blog atau Artikel yang kita suguhkan Fungsi dari
Formulir Kontak itu sendiri adalah : Sebagai kontak komunikasi kita dengan pengunjung . Agar pengunjung dapat memberi saran masukan , kritikan mungkin juga meminta atau memberi Info pada Blog atau Artikel yang kita suguhkan
:
Ada dua Cara Pembuatan atau pemasangan yang akan menghiasi blog
Pertama adalah menggunakan Formulir Kontak ( Contact Form ) Blogspot yang di sediakan Blogger.com.
Kedua dengan cara menggunakan Style CSS kreativitas Dari para Blogger Masta
Seperti yang sudah saya janjikan artikel ini akan membahas membahas tentang
Cara Membuat Formulir Kontak pada Sidebar Blogspot
Cara Membuat Contact Us pada halaman statik Dengan CSS
Seperi biasa sobat masuk Blogger
- Dasboard Blogger
- Klik Template
- Klik Edit HTML
Copy kode di bawah ini dan pastekan di atas tag </style> atau ]]></b:skin>
/* CSS Menyembunyikan Formulir Kontak di Sidebar */ #ContactForm1,#ContactForm1 br {display:none!important;}
Letakan kode di bawah ini di atas tag </body>
<script type="text/javascript"> (function() { var css = document.createElement('link'); css.href = '//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'; css.rel = 'stylesheet'; css.type = 'text/css'; document.getElementsByTagName('head')[0].appendChild(css); })(); </script>
Selanjut nya beralih ke Laman
- Klik Laman
- Pilih Laman Baru
- judul Di Bagian Entri
Kemudin copy semua kode di bawah ini , selanjutnya pastekan di bagian LamanHTML ( Bukan Compos )
<style scoped="" type="text/css"> #post-wrapper {width:100%;} #sidebar-wrapper {display:none;} #comments,.post_meta,#blog-pager {display:none;} #ContactForm1_contact-form-name, #ContactForm1_contact-form-email{ width:100%;height:auto;margin:5px auto;padding:10px;background:#fff;color:#444;border:1px solid #ddd;border-radius:3px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;transition:all 0.5s ease-out;} #ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:10px;background:#fff;color:#444;font-family:'Open Sans',sans-serif;border:1px solid #ddd;border-radius:3px;transition:all 0.5s ease-out;} #ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;border-color:rgba(81,203,238,1);box-shadow:0 0 5px rgba(81,203,238,0.7);} #ContactForm1_contact-form-submit {width:100%;font-family:'Open Sans';float:left;background:#fff;color:#aaa;margin:10px auto;vertical-align:middle;cursor:pointer;padding:10px 18px!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;border-radius:3px;background-image: linear-gradient(110deg, #7986cb 0%, #7986cb 50%, transparent 50%, transparent 100%);background-size:200%;background-position:120% 0;background-repeat:no-repeat;border:1px solid #ddd;transition:all .8s ease, background-position .8s ease, color .8s ease;} #ContactForm1_contact-form-submit:hover {color:#fff;background-position:0 0;border-color:#7986cb;} #ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{ width:100%;margin-top:35px;} .contact-form-error-message-with-border {background:#f36c60;border:none;box-shadow:none;color:#fff;padding:5px 0;} .contact-form-success-message {background:#4fc3f7;border:none;box-shadow:none;color:#fff;} img.contact-form-cross {line-height:40px;margin-left:5px;} </style>
<form name="contact-form"> <span style="color: #666666; font-family: "open sans" , "arial" , "helvetica" , sans-serif; font-weight: 700;"><i class="fa fa-user"></i> Name </span > <input gt="" id="ContactForm1_contact-form-name" name="name" size="30" span="" style="color: #666666; font-family: "open sans" , "arial" , "helvetica" , sans-serif; font-weight: 700;" type="text" value="" /><i class="fa fa-envelope"></i> Email Address <span style="color: #f56954; font-size: x-small; font-weight: bold;">important</span>
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /> <span style="color: #666666; font-family: "open sans" , "arial" , "helvetica" , sans-serif; font-weight: 700;"><i class="fa fa-pencil-square-o"></i> Content <span style="color: #f56954; font-size: x-small; font-weight: bold;">important</span></span> <textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea> <input id="ContactForm1_contact-form-submit" type="button" value="Send" />
Jika Blog sobst belum terpasang Formulir Kontak atau Contact Form Dengan CSS, tidak ada salahnya untuk mencoba. Demikianlah Artikek yang bisa saya bagikan, semoga bermanfaat dan Sampai disini dulu , sampai jumpa di artikek berikutnya . Salam Blogger.....