Latest News

Cara Menyembunyikan Tampilan Contact Form Bawaan Blogger dan Mempercantik Tampilannya di Menu Halaman

Cara Menyembunyikan Tampilan Contact Form Bawaan Blogger dan Mempercantik Tampilannya di Menu HalamanSobat blogger! artikel ini merupakan kelanjutan dari artikel saya sebelumnya tentang cara menampilkan contact form bawaan blogger ke menu halaman statis blog. Pada artikel sebelumnya kita sudah berhasil membuat sebuah kontak form pada menu halaman statis blog kita. Tetapi kita masih punya satu masalah yaitu blog yang kita miliki ini masih memiliki contact form pada side bar atau footer (tergantung sobat sebelumnya meletakan gadget ini. Karena kita sudah mempunya menu kontak saya, sekarang tiba gilarannya kita menyembunyikan form contact tersebut dari sidebar blog kita.
Pada kesempatan kali ini kita juga akan melakukan sedikit perubahan pada tampilan form contact yang sudah ada. Maksudnya supaya agar tampilan form contact ini lebih serasi dengan luasnya halaman statis blog kita. Trik ini penulis dapatkan dari para senior blogger di alamat ini. Jika kita membuka kembali menu kontak saya, maka kita akan menemukan form kontak seperti gambar berikut.
Sekarang kita akan mencoba mengubahnya menjadi lebih kurang seperti gambar berikut ini.
Kalau kita melihat tampilan gambar yang kedua, terlihat bahwa kolom-kolom untuk nama, alamat email dan isi pesan lebih besar dari yang sebelumnya. Mungkin sebagian sobat blogger kurang suka dengan tampilan seperti ini. Jika sobat suka sobat bisa lakukan langkah-langkah berikut ini.
  1. Buka dashboard blog sobat, kemudian pilih template dan edit HTML seperti terlihat pada gambar berikut ini.
  2. Setelah itu sobat tekan di keyboard tombol control dan tombol F (ctrl + F) untuk melakukan pencarian cepat seperti terlihat pada gambar.
  3. Ketikan (pastekan) kode ]]></b:skin> pada kolom pencarian kemudian tekan enter.
  4. Copy kode di bawah ini kemudian pastekan tepat di atas ]]></b:skin>
/* CSS Contact Form edit harianja*/
#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;
}
/* batas CSS Contact Form edit harianja*/


Setelah itu silahkan sobat klik tombol simpan template untuk menyimpan perubahan, namun sebelum itu sebaiknya sobat klik dulu tombol pratinjau template untuk memastikan tidak ada kesalahan pada blog sobat akibat penambahan kode. Jika setelah sobat menekan tombol pratinjau template muncul blog sobat berarti tidak terjadi kesalahan dengan penambahan itu. Setelah yakin silahkan simpan template dan lihat hasilnya pada blog sobat. Insya Allah tampilan kontak form sobat sudah berubah dan form contact yang ada di sidebar blog sobatpun sudah tak terlihat lagi. Demikian sahabat blogger artikel dari saya selamat mencoba. good luck!!

2 Responses to "Cara Menyembunyikan Tampilan Contact Form Bawaan Blogger dan Mempercantik Tampilannya di Menu Halaman"