Cara Membuat Contact Form Simple di Blogger - Contact form merupakan salah satu hal yang sebaiknya ada dalam suatu blog. Mengapa harus anda? Hal ini dikarenakan contact form sanggup jadi jembatan penghubung yang baik antara pemilik blog dengan pembacanya. Dengan adanya contact form pada blog anda menciptakan pengunjung anda sanggup menghubungi dan bertanya anda secara individu tanpa mengganggu privasi, artinya hanya anda dan pengunjung anda (yang mengirim pesan) yang mengetahuinya
Formulir Kontak juga sanggup sarana untuk melaksanakan kolaborasi antara admin dengan pembaca blognya. Semua berawal dari komunikasi, termasuk melaksanakan seruan kerja sama. Salah satu upaya yang sanggup dilakukan adalah melalui formulir tersebut.
Jangan khawatir, untuk pembuatannya tidaklah sulit. Karena yang diperlukan hanyalah elemen HTML, CSS, dan juga Javasricpt. Adapun cara menciptakan dan memasangnya di blogger(blogspot) adalah dengan dua cara. Apa saja? Simak tutorialnya berikut ini
Cara Membuat Contact Form di Blogger
Cara Pertama
- Back Up Template anda terlebih dahulu
- Masuk ke Halaman
- Pilih Halaman baru, masuk ke mode HTML, bukan compose
- Langkah selanjutnya masukkan instruksi berikut ini
<form id="kontak-arlina" name="contact-form"> <input id="ContactForm1_contact-form-name" name="name" placeholder="Nama *" size="30" type="text" value="" /> <input id="ContactForm1_contact-form-email" name="email" size="30" placeholder="Email *" type="text" value="" /> <textarea cols="35" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Isi Pesan Anda Disini *" rows="5"></textarea> <input id="ContactForm1_contact-form-submit" type="button" value="Kirim Pesan" /> <div style="max-width: 222px; text-align: center; width: 100%;"> <div id="ContactForm1_contact-form-error-message"> </div> <div id="ContactForm1_contact-form-success-message"> </div> </div> </form> <style scoped="" type="text/css"> #comments,.post_meta,#blog-pager{display:none} form{color:#0088FF} #kontak-arlina{margin:5px;max-width:600px} #ContactForm1_contact-form-name,#ContactForm1_contact-form-email{height:auto;margin:10px auto;padding:20px 12px;background:#fff;color:#444;border:1px solid rgba(0,0,0,.14);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;width:100%;min-width:100%;transition:all 0.5s ease-out} #ContactForm1_contact-form-email-message{width:100%;height:160px;margin:8px 0;padding:20px 12px;background:#fff;color:#00c4ff;border:1px solid rgba(0,0,0,.14);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;resize:none;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:#66afe9;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,0.6)} #ContactForm1_contact-form-submit{float:right;background:linear-gradient(50deg,#3A00FF,#0088FF);margin:auto;vertical-align:middle;cursor:pointer;padding:12px 20px;font-size:14px;text-align:center;letter-spacing:.5px;border:0;width:100%;max-width:140px;border-radius:3px;color:#fff;font-weight:500;transition:all .8s ease} #ContactForm1_contact-form-submit:hover{background:#4E00FF;color:#fff;} #ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:35px} .contact-form-error-message-with-border{background:#f6f6f6;border:none;box-shadow:none;color:#444;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} .post-body input{width:initial} @media only screen and (max-width:640px){ #ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-submit{width:100%;}} </style> <div id='show-cat'> </div> <div id='show-post'> <script type='text/javaScript'> var cat_home='ISI DENGAN URL BLOG ANDA';cat_numb=11;cat_pre='Prev';cat_nex='Next'; var cat_name;var cat_start;var cat_class; function show_post2(a){var tt=a.feed.openSearch$totalResults.$t;dw='';dw+='<ul>';for(var i=0;i<cat_numb&&i<a.feed.entry.length;i++){var entry=a.feed.entry[i];cat_title=entry.title.$t;for(var j=0;j<entry.link.length;j++){if(entry.link[j].rel=='alternate'){var cat_url=entry.link[j].href}}dw+='<li>';dw+=(cat_start+i)+'. <a href="'+cat_url+'" rel="nofollow" title="Cara Membuat Contact Form Simple Di Blogger (Blogspot)">'+cat_title+'</a>';dw+='</li>'}dw+='</ul>';dw+='<div id="navi-cat">';if(cat_start>1){dw+='<a href="" onclick="show_post(\''+cat_name+'\',\''+(cat_start-cat_numb)+'\',\''+cat_class+'\');return false" title="Cara Membuat Contact Form Simple Di Blogger (Blogspot)">'+cat_pre+'</a>'}if((cat_start+cat_numb-1)<tt){dw+='<a href="" onclick="show_post(\''+cat_name+'\',\''+(cat_start+cat_numb)+'\',\''+cat_class+'\');return false" title="Cara Membuat Contact Form Simple Di Blogger (Blogspot)">'+cat_nex+'</a>'}dw+='<span>'+cat_start;if(cat_start!=tt){dw+=' – '+(cat_start+i-1)}dw+=' / '+tt+'</span>';dw+='</div>';document.getElementById('show-post').innerHTML=dw+'<style type="text/css">.cat-'+cat_class+' a{background:#bbb!important;color:#fff!important}<\/style>'}function show_post(a,b,c){var d=document.getElementsByTagName('head')[0];e=document.createElement('script');e.type='text/javascript';e.setAttribute('src',cat_home+'/feeds/posts/default/-/'+a+'?alt=json-in-script&start-index='+b+'&max-results='+cat_numb+'&callback=show_post2');d.appendChild(e);cat_name=a;cat_start=parseInt(b),cat_class=c}function show_cat(a){var cat=a.feed.category;dw='';dw+='<ul>';for(var i=0;i<cat.length-1;i++){for(var j=i+1;j<cat.length;j++){if(cat[i].term>cat[j].term){cat_hv=cat[i].term;cat[i].term=cat[j].term;cat[j].term=cat_hv}}}for(var i=0;i<cat.length;i++){dw+='<li class="cat-'+i+'">';dw+='<a href="" onclick="show_post(\''+cat[i].term+'\',\'1\',\''+i+'\');return false" title="Cara Membuat Contact Form Simple Di Blogger (Blogspot)">';dw+=cat[i].term;dw+='</a>';dw+='</li>'}dw+='</ul>';document.getElementById('show-cat').innerHTML=dw}document.write('<script type="text/javascript" src="'+cat_home+'/feeds/posts/default?alt=json-in-script&max-results=0&callback=show_cat"><\/script>'); </script> </div> Kode by Arlinadzgn modified by
- Klik Publish
Setelah mempublishnya, jangan lupa tambahkan Widget Laman melalui tata letak. Tambahkan Contact Form, supaya sanggup tampil pada area home page
Cara Kedua
- Masuk ke blogger anda
- Pilih tata letak
- Tambahkan gadget (anda boleh meletakkannya dimana saja, baik di sidebar maupun footer)
- Pilih gadget HTML/Javascript
- Masukkan instruksi yang sama ibarat tadi ke dalam kotak, beri judul sesuai harapan anda.
- Klik Simpan
<form id="kontak-arlina" name="contact-form">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Nama *" size="30" type="text" value="" />
<input id="ContactForm1_contact-form-email" name="email" size="30" placeholder="Email *" type="text" value="" />
<textarea cols="35" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Isi Pesan Anda Disini *" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Kirim Pesan" />
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div></div></form>
<style scoped="" type="text/css">
#comments,.post_meta,#blog-pager{display:none}
form{color:#0088FF}
#kontak-arlina{margin:5px;max-width:600px}
#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{height:auto;margin:10px auto;padding:20px 12px;background:#fff;color:#444;border:1px solid rgba(0,0,0,.14);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;width:100%;min-width:100%;transition:all 0.5s ease-out}
#ContactForm1_contact-form-email-message{width:100%;height:160px;margin:8px 0;padding:20px 12px;background:#fff;color:#00c4ff;border:1px solid rgba(0,0,0,.14);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;resize:none;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:#66afe9;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,0.6)}
#ContactForm1_contact-form-submit{float:right;background:linear-gradient(50deg,#3A00FF,#0088FF);margin:auto;vertical-align:middle;cursor:pointer;padding:12px 20px;font-size:14px;text-align:center;letter-spacing:.5px;border:0;width:100%;max-width:140px;border-radius:3px;color:#fff;font-weight:500;transition:all .8s ease}
#ContactForm1_contact-form-submit:hover{background:#4E00FF;color:#fff;}
#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:35px}
.contact-form-error-message-with-border{background:#f6f6f6;border:none;box-shadow:none;color:#444;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}
.post-body input{width:initial}
@media only screen and (max-width:640px){
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-submit{width:100%;}}
</style>
<div id='show-cat'>
</div>
<div id='show-post'>
<script type='text/javaScript'>
var cat_home='ISI DENGAN URL BLOG ANDA';cat_numb=11;cat_pre='Prev';cat_nex='Next';
var cat_name;var cat_start;var cat_class;
function show_post2(a){var tt=a.feed.openSearch$totalResults.$t;dw='';dw+='<ul>';for(var i=0;i<cat_numb&&i<a.feed.entry.length;i++){var entry=a.feed.entry[i];cat_title=entry.title.$t;for(var j=0;j<entry.link.length;j++){if(entry.link[j].rel=='alternate'){var cat_url=entry.link[j].href}}dw+='<li>';dw+=(cat_start+i)+'. <a href="'+cat_url+'" rel="nofollow" title="Cara Membuat Contact Form Simple Di Blogger (Blogspot)">'+cat_title+'</a>';dw+='</li>'}dw+='</ul>';dw+='<div id="navi-cat">';if(cat_start>1){dw+='<a href="" onclick="show_post(\''+cat_name+'\',\''+(cat_start-cat_numb)+'\',\''+cat_class+'\');return false" title="Cara Membuat Contact Form Simple Di Blogger (Blogspot)">'+cat_pre+'</a>'}if((cat_start+cat_numb-1)<tt){dw+='<a href="" onclick="show_post(\''+cat_name+'\',\''+(cat_start+cat_numb)+'\',\''+cat_class+'\');return false" title="Cara Membuat Contact Form Simple Di Blogger (Blogspot)">'+cat_nex+'</a>'}dw+='<span>'+cat_start;if(cat_start!=tt){dw+=' – '+(cat_start+i-1)}dw+=' / '+tt+'</span>';dw+='</div>';document.getElementById('show-post').innerHTML=dw+'<style type="text/css">.cat-'+cat_class+' a{background:#bbb!important;color:#fff!important}<\/style>'}function show_post(a,b,c){var d=document.getElementsByTagName('head')[0];e=document.createElement('script');e.type='text/javascript';e.setAttribute('src',cat_home+'/feeds/posts/default/-/'+a+'?alt=json-in-script&start-index='+b+'&max-results='+cat_numb+'&callback=show_post2');d.appendChild(e);cat_name=a;cat_start=parseInt(b),cat_class=c}function show_cat(a){var cat=a.feed.category;dw='';dw+='<ul>';for(var i=0;i<cat.length-1;i++){for(var j=i+1;j<cat.length;j++){if(cat[i].term>cat[j].term){cat_hv=cat[i].term;cat[i].term=cat[j].term;cat[j].term=cat_hv}}}for(var i=0;i<cat.length;i++){dw+='<li class="cat-'+i+'">';dw+='<a href="" onclick="show_post(\''+cat[i].term+'\',\'1\',\''+i+'\');return false" title="Cara Membuat Contact Form Simple Di Blogger (Blogspot)">';dw+=cat[i].term;dw+='</a>';dw+='</li>'}dw+='</ul>';document.getElementById('show-cat').innerHTML=dw}document.write('<script type="text/javascript" src="'+cat_home+'/feeds/posts/default?alt=json-in-script&max-results=0&callback=show_cat"><\/script>');
</script>
</div>
Sekarang anda sudah berhasil memasangnya. Jika anda ingin mengetahui jadinya sanggup lihat pada demo berikut ini.
Baca Juga Tutorial Berikut Ini
Penutup
Sistem kerja formulir kontak ini adalah mengirimkan pesan menuju alamat email pemilik blog (tentu saja alamat email yang dipakai untuk login ke akun bloggernya). Ketika ada pesan masuk, maka akan ada pemberitahuan di email. Saya rasa hingga sini anda sanggup memahaminya.Bagaimana? Praktis kan cara membuatnya? Jika anda masih belum mengerti wacana cara menciptakan contact form di blogspot ini anda sanggup eksklusif menanyakannya kepada admin. Sekian, agar bermanfaat.
