Cara Memasang kontak Form di Halaman Statis Blogger

Advertisement
Halo para pembaca dan sahabat alviyatun, jumpa lagi dengan saya blogger pemula yang masih belajar menjadi blogger yang baik.

Kali ini saya mau berbagi cara buat dan cara pasang Contact form halaman static blogger ala arlina dezign pada template Phantom.
Mungkin sudah banyak yang bahas di luar sana mengenai cara membuat contact form di halaman statis, namun barang kali masih ada teman-teman blogger yang masih belum tahu cara buat dan pasang contact form, mungkin ini bisa di coba.

Baiklah sahabat alviyatun, langsung saja kita ke pokok pembahasan tentang cara membuat dan memasang contact form di halaman static blogger.
Berikut ini cara pasang "Kontak Form" di halaman statis:

Langkah Pertama Menambahkan Widget Contact Form Blogger:

pastikan anda sudah menambahkan contact form bawaan blogger, jika belum silahkan anda ikuti cara berikut:

1. Login ke dasbor blog anda
2. Pilih Tata Letak
3. Tambah gadget baru lihat gambar dibawah
Memasang Contact Form Halaman Statis

4. Pilih contact form/formulir kontak seperti gambar diatas
5. Save dan untuk sementara biarkan saja widget Contact Form berada di bagian sidebar.

Langkah Kedua Menyembunyikan Contact Form Bawaan Blogger:

menyembunyikan contact form bawaan blogger yang telah di tambahkan tadi, caranya adalah
1. Pada Halaman Blogger pilih TEMPLATE seperti gambar dibawah
Memasang Contact Form Halaman Statis

2. Pilih EDIT HTML lihat gambar diatas
3. Anda harus sudah menambahkan kode CSS font-awesome 4.0.3, jika belum silahkan tambahkan kode berikut dan letakan dibawah kode < head >
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
4. Selanjutnya Salin kode berikut
/* CSS Contact Form */
#ContactForm1{
display:none;
}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{
width: 300px;
height:auto;
margin: 5px auto;
padding: 10px;
background: #f2f2f2;
border: 1px solid #ccc;
color:#777;
}
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{
background: #fffff7;
}
#ContactForm1_contact-form-email-message{
width: 450px;
height: 175px;
margin: 5px auto;
padding: 10px;
background: #f2f2f2;
border: 1px solid #ccc;
color:#777;
font-family:Arial, sans-serif;
}
#ContactForm1_contact-form-submit {
width: 101px;
height: 35px;
float: left;
color: #FFF;
padding: 0;
margin: 10px 0 3px 0 0;
cursor: pointer;
background: #5E768D;
border: 1px solid #556f8c;
border-radius:3px;
}
#ContactForm1_contact-form-submit:hover {
background:#435c74;
}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{
width: 450px;
margin-top:35px;
}
5. Pastekan kode yang telah di copy barusan dan letakan sebelum kode ]]> < /b:skin >
6. Klik Save

Langkah Ketiga Membuat Halaman Contact Form Halaman Statis:

Untuk langkah selanjutnya agar "Kontak Form" hanya tampil pada halaman statis maka kita harus membuat halaman baru pada menu laman static
Dan berikut ini caranya:
1. Pada dasbor Blogger pilih Laman

Memasang Contact Form Halaman Statis

2. Buat laman baru lihat gambar diatas
3. Klik mode HTML editing
Memasang Contact Form Halaman Statis

4. Copy lalu Pastekan kode di bawah ini
<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 id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />  

<span style="color: #666666; font-family: Open Sans,Arial,Helvetica,sans-serif; font-weight: 700;"><i class="fa fa-envelope"></i> Email Address <span style="color: #f56954; font-size: x-small; font-weight: bold;">important</span></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" />  
<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;}
#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>
6. Beri Nama Judul Halaman misalnya Kontak Saya, Setelah itu Publikasikan dan lihat hasilnya, kurang lebih seperti gambar paling atas. Atau anda bisa lihat kurang lebih seperti gambar berikut ini
Atau anda juga bisa lihat pada halaman Kontak blog AlviyatuN yang kebetulan juga pake Script Contact Form ala Arlina Dezign diatas. Nah, para pembaca dan sahabat AlviyatuN, demikian cara buat dan pasang "Kontak Form" Halaman Statis Blogger ala Arlina dezign. Semoga bermanfaat dan jangan lupa like dan sharenya ya.
Bagi sahabat yang mau cari Hiburan yuk kunjungi Pertandingan nusaimoe pekan ke 3  resmi dimulai
SALAM BLOGGING!!
DMCA.com Protection Status
Advertisement

Masukan email Anda disini untuk mendapatkan update postingan secara gratis:

21 Responses to "Cara Memasang kontak Form di Halaman Statis Blogger"

  1. Terima kasih sudah berbagi Mbak.

    BalasHapus
    Balasan
    1. Sama-sama mas Ghost Ships...
      Terima kasih karena sudah mengunjungi blog saya ini

      Hapus
  2. pake google formulir ajah mba. keren formulir kontakny,

    BalasHapus
    Balasan
    1. Hmmm, itu sesuai selera aja mas Fajar...
      Terima kasih atas saran dan kritiknya mas

      Hapus
  3. patut dicoba nih triknya.... ijin pasang di blog saya mbak.. terima kasih

    BalasHapus
    Balasan
    1. Silahkan dicoba mas naufal hadian, semoga berhasil.
      Terima kasih sudah berkunjung

      Hapus
  4. Wah trik baru nih :3 ijin coba ya :D

    BalasHapus
    Balasan
    1. Silahkan mas Situsku...
      Terima kasih sudah berkunjung

      Hapus
  5. formnya kyk gimana tuh ? coba ditambah ss hasilnya biar makin uwaw artikelnya :D

    BalasHapus
    Balasan
    1. Halo mas Agustiar,,,
      Ss sebetulnya sudah saya sispkan pada awal postingan mas, namun karena banyak yang tidak membaca dengan seksama jadi kesannya tidak ada SS nya untuk itu nanti akan saya pindahkan posisi SS ke bagian bawah postingan supaya jelas.
      Terima kasih sudah berkunjung

      Hapus
  6. Statis itu maksudnya gimana gan?maaf masih belum berpengalaman tentang blog!

    BalasHapus
    Balasan
    1. Silahkan buka link dibawah mas Zaini Zaina

      Hapus
  7. izin ccoba nih gan, tapi saya sama dengan yang diatas, statis itu apa?

    BalasHapus
    Balasan
    1. Silahkan di simak mas di postingan ini http://www.alviya.com/2016/01/halaman-statis-itu-apa-sih.html

      Hapus
  8. mantap gan (y) sangat pantas untuk di praktekkan (y)

    BalasHapus
    Balasan
    1. Silahkan dicoba mas Ariefsigli, semoga berhasil...
      Terima Kasih sudah berkunjung

      Hapus
  9. waini nih...yang dicari-cari dari kemarin..
    eh nyasar disini..
    thanks tutorialnya min, sangat bermanfaat.

    BalasHapus
    Balasan
    1. Sama-sama mas, terima kasih sudah berkunjung ke blog sederhana saya.
      Salam

      Hapus
  10. Saya gagal terus masang Kontak form, makanya pake Widget aja deh taro di Footer biar gampang hehehehe

    BalasHapus
  11. sangat membantu mas, terimakasih atas tutorialnya. sukses selalu

    BalasHapus
    Balasan

    1. Sama-sama mas, terima kasih sudah berkunjung....
      satu lagi, jangan panggil saya mas, tapi mbak.
      Salam!!

      Hapus

• Silahkan berkomentar yang relevan dengan isi artikel yang akan menggambarkan profesionalisme dan kualitas diri Anda.
• Komentar basa-basi tidak akan dipublikasikan
• Komentar yang mengandung link tautan aktif tidak akan dipublikasikan, jadi percuma Anda pasang link aktif