天使の宮殿

Hai semuanya!
Hari ini blog ini maintenance dari pagi karena sedang ada error. Sorry banget buat yang sudah berkunjung tapi nggak bisa akses. Tapi masalahnya sudah kelar kok setelah cek dan ricek ternyata masalahnya ada pada script yang bentrok jadi pagenya pada ngeblank semua (huff).
Tapi sebagai permintaan maaf, hari ini aku kasih bonus deh ;)

Sudah pada tau belum kalau ada fitur baru di Blogger (Blogspot) di mana kita bisa menambahkan sebuah formulir kontak? 

Formulir kontak di sini bukan hanya kita embed saja tetapi bisa juga kita pernak-pernik lho dengan sedikit kode. Apabila kita embed-kan saja, maka tampilannya akan statis seperti saat kita menambahkan gadget ke sidebar, footer, atau header. Statis artinya biarpun kita klik di mana saja tampilan tersebut tetap ada. Nah, biar tampak lebih bagus kita harus mengubah letaknya. Di sini kita akan menempatkannya pada halaman blog saja karena terkesan lebih rapi dan berkelas. Kita juga tidak perlu khawatir karena gadget ini dikembangkan oleh Blogger. Aku sudah testing kirim-kirim pesan juga. Baik send maupun replynya sudah ok १✌˚◡˚✌५

Silahkan ikuti langkah-langkah atau gambar-gambar berikut ya!

Step 1

Buka Dashboard Blogger kamu dan pilih Tata Letak.

Step 2

Pada Sidebar klik pada pilihan Tambahkan Gadget.

Step 3

Pada menu Tambahkan Gadget, pilih Gadget Lainnya. Klik pada icon tambah (+) yang ada pada Formulir Kontak.

Step 4

Tekan tombol Simpan dan otomatis gadget tersebut akan ditambahkan ke sidebar. Beginilah penampakannya dalam blog.

Step 5

Kaku ya? 

Hehe..

Sekarang saatnya kita pindahkan ♪

Kembali pada Dashboard Blogger kamu. Klik pada Laman untuk membuat sebuah halaman baru.

Pakai Laman kosong ya pada drop down menu Laman.

Step 6

Pada Laman Baru, masuk pada menu HTML dan masukkan kode berikut. Ingat ya, HTML bukan menu Compose.

Untuk copy, select text dan tekan CTRL+C.

Setelah itu klik Publikasikan. 

Jangan lupa masukkan judul laman :D

Step 7

Saatnya untuk modifikasi contact menu pada Blogger!

Masuk kembali pada Dashboard Blogger dan pilih menu Template lalu Edit HTML.

Tempatkan kursor kamu di kotak Edit HTML dan tekan CTRL+F

Cari kode ]]></b:skin>

Masukkan kode berikut tepat di atas kode tersebut. Kemudian Simpan Template.

#ContactForm1{
display:none;
}
#contact_wrap {
margin: auto;
width: 365px;
height: 475px;
padding: 25px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzyTVNSPuh0NWsj1WCziaLENaijr23CypobS1Wv2ME-IgA4tkragA_Kuqws1WxWjU4I3vBAJ7yDlMk4tQeLnLWGNt14A7SiKJn4PWGQrGGCcJQn88BCnnmAzJPTCj9Ty2PMZAY9n1mqWTH/s1600/www.angels-palace.net+-+flowery+frame.gif.gif)no-repeat center; border-radius: 1em;
background-color:transparent;
box-shadow: 1px 1px 5px #ccc;
}
#contact_wrap h3{
font-weight:none;
color: #ffffff;
font-family:Josefin Sans;
font-size: 14px;
font-style:normal;
margin: 60px 90px 20px 90px;
padding: 8px;
text-align: center;
text-shadow: 1px 0 0 #e8e8e8;
background-color: #feafb9;
position: relative;
}
<!--www.angels-palace.net Contact Form Blogger-->
#ContactForm1_contact-form-name{
width: 230px;
height:auto;
margin: 20px 0 10px 40px;
padding: 10px 10px 10px 40px;
background:#f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbcH4uPnWixAYMWXZa2FXZk9A2TFjGyHDqMFVF3VgP6bh0TP1yxMvS91g6c9Fk8wLbtI5LPnhdTHReFmbdH7SKpuV0K01IcbOopXhXIAIyCfnkFdPSWm02tsDB6-BkSHfFVMgiauTiRs-Z/s1600/www.angels-palace.net+-+crown+pixel.gif.gif)no-repeat 10px center;
color:#777;
border:1px solid #ccc;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
}
#ContactForm1_contact-form-email{
width: 230px;
height:auto;
margin: 10px 0 10px 40px;
padding: 10px 10px 10px 40px;
background: #f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmowQjwJruHtlQaAYYvtnlvTQ3vsJSHu7P9aslDm6K_RwE0y_cBZNje30Vra3jivAg3Fu9RJz8mYy_oR49unLA2wgUUTLWISVq6z_9mc1quT6SCnJO7o7aQx-TCrQ-GAL-7VRUdoI7ssPv/s1600/www.angels-palace.net+-+open+email.gif.gif)no-repeat 10px center;
color:#777;
border:1px solid #ccc;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
}
#ContactForm1_contact-form-email-message{
width: 230px;
height: 100px;
margin: 10px 0 10px 40px;
padding: 10px 10px 10px 40px;
font-family:Arial, sans-serif;
background: #f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjibIwoNlhYWOz9FII-mJy0CttqEvE58r9MV_fGTtEXl79oNKAtGts5ZZOMEsjjOHAZqTCsgNzyEAJBu0F36gFFikL-G3MJhZohNibxxD9SOVKE2FxovKhYL3w6oe1dJSn1fGAGN7PvlHJB/s1600/www.angels-palace.net+-+dokidokilove+pixel.gif.gif)no-repeat 9px 5px;
color:#777;
border:1px solid #ccc;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
}
#ContactForm1_contact-form-submit {
width: 80px;
height: 30px;
float: right;
color: #FFF;
padding: 0;
cursor:pointer;
margin: 15px 45px 15px 0;
background-color:#fdeaea;
border-radius:4px;
text-shadow: 1px 0 0 #e8e8e8;
background-color: #fbb4b4;
border:1px solid #feafb9;
}
#ContactForm1_contact-form-submit:hover {
background:#ffbfbf;
}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{
width: 320px;
margin:50px 10px 0 10px;
}

Sekarang bukalah halaman Kontak Menu kamu. Akan tampak tampilan seperti berikut :)


Bagaimana? Cantik kan dibandingkan dengan yang sebelumnya dengan warna yang monoton.

PS : Apabila kamu pakai template kontak menu ini, jangan hilangkan creditnya ya karena untuk membuat ini benar-benar sangat memakan waktu bagiku ><

Oh ya, sebagai tambahan. Kamu mungkin perlu mengubah email tujuan kontak ini karena :

• untuk menghindari akun Blogger atau email kamu dihack karena orang lain mengetahui email Google kamu
• untuk menghindari inbox berlebihan (dalam hal ini : spam messages) karena sebagaimana kita lihat, kontak Blogger ini tidak didukung verifikasi kata.

Cara menggantinya adalah :

• Buka Profile Blogger kamu dan pilih Edit Profile.
• Pada bagian Identitas, ubahlah Alamat Email kamu. Secara default, alamat email kamu adalah alamat GMail yang kamu pakai untuk akun Blogger ini. 

Tidak perlu khawatir, mengubah Alamat Email kamu tidak akan mengganti alamat email yang kamu gunakan untuk masuk ke Blogger. Seperti di atas, aku mengubah alamat emailku ke email Yahoo. Salah satu fitur Yahoo Mail yang tidak dimiliki oleh GMail adalah fitur alamat email mudah buang. Kamu bisa menggunakannya untuk menghindari orang-orang yang tidak bertanggung jawab menyalahgunakan email Yahoo utama kamu :)

Semoga bermanfaat ya sobat!
Nggak terasa panjang banget ngetiknya (o.o)
Honestly aku buat kontak ini cuma untuk testing saja. Jadi kamu tidak akan melihat kontak ini di blog aku untuk selanjutnya. Lagipula aku sudah mempunyai kontak form sendiri yang didukung verifikasi kata. Mwihihi.. Btw, apa ada yang merasakan Blogger agak ngadat dan banyak error belakangan ini?