Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Membuat Halaman Kontak pada Blog

Brosis, kali ini saya mau memberikan sedikit tips tentang cara membuat halaman kontak pada blog terutama yang memakai platform blogspot, Halaman atau menu Kontak ini menjadi penting ketika ada pembaca blog kamu ingin mengajukan pertanyaan atau mengirim tulisan ke admin secara personal. Kali ini saya menemukan bentuk kolom kontak yang lumayan bagus untuk blogspot dimana kolomnya sudah responsive. Baiklah saya tidak akan berlama-lama, silakan ikuti caranya sebagai berikut.

Langkah pertama buatlah dulu widget kontak pada blog kamu, caranya sangat mudah silakan masuk ke dasbor blog cari tata letak cari tambahkan widget (sembarangan saja) kemudian pilih lainnya kemudian pilih kontak kemudian simpan.

Setelah itu buatlah halaman statis baru dengan judul kontak atau apa sajalah yang tepat, atau bisa juga edit halaman statis kontak kamu yang sudah ada, setelah itu masukkan kode berikut pada halaman statis kamu tapi pada mode HTML.

<div id="contact_wrap">
<h3>
Hubungi Akriko</h3>
<form 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" placeholder="Email" size="30" type="text" value="" />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Pesan" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Kirim" />
<br />
<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>
</div>
<style type="text/css">
/* Menyembunyikan elemen dalam postingan */
#comments, #blog-pager, .breadcrumbs, .post-footer{display:none}
</style>
Huruf yang warna merah bisa kamu ganti dengan kata yang kamu inginkan, setelah itu silakan kamu publikasikan atau perbarui halaman statis kontak kamu itu.

Setelah selesai membuat atau mengedit halaman statis, sekarang tinggal satu langkah lagi supaya tampilan kontak kamu terlihat lebih bagus. Silakan masuk ke dasbor, kemudian cari pengaturan template kemduian pilih edit HTML. setelah itu cari kode berikut  ]]></b:skin> gunakan kombinasi ctrl+F supaya bisa menemukan kode tersebut dengan cepat. setelah kamu temukan kode tersebut maka silakan paste kode CSS di bawah ini tepat di atas kode ]]></b:skin>



/* CSS Contact Form Light Theme by BloggerTut.com */
#ContactForm1{
display:none;
}
#contact_wrap {
margin: auto;
width: 321px;
height: 380px;
padding: 25px;
border-radius: 1em;
border-top:1px solid #dbdbdb;
border-right:1px solid #b2b2b2;
border-left:1px solid #dbdbdb;
border-bottom:1px solid #9d9d9d;
background-color:#cccccc;
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#f2f2f2', endColorstr='#cccccc');
background-image:-webkit-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
background-image:-moz-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
background-image:-ms-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
background-image:-o-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
background-image:linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
box-shadow: 1px 1px 5px #ccc;
}
#contact_wrap h3{
color: #e8f3f9;
font-family:Georgia;
font-size: 20px;
font-style:italic;
font-weight:bold;
margin: 0 -36px 20px -36px;
padding: 12px;
text-align: center;
text-shadow: 2px 0 0 #1f4962;
-webkit-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;
-moz-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;
box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;
background-color: #3689b9;
position: relative;
}
#contact_wrap h3:before {
content: ' ';
position: absolute;
bottom: -10px;
left: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 10px 0 0 10px;
border-color: #333 transparent transparent transparent;
}
#contact_wrap h3:after {
content: ' ';
position: absolute;
bottom: -10px;
right: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 10px 10px;
border-color: transparent transparent transparent #333;
}
#ContactForm1_contact-form-name{
width: 270px;
height:auto;
margin: 5px auto;
padding: 10px 10px 10px 40px;
background:#f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjytyXuDw8vWhsxOksZzU64jIRA1KFN0l7HpqCpttkTQow4y5lr3LEUKQEL5vSOk9pCPRwyRwn0GwPpvU-h8FHiYD6eKkDeWzq4bbyhHwGWOxcRLfOQKGL8IKdq_l78OUywT4KBw_sH9uc/s1600/user.png)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: 270px;
height:auto;
margin: 5px auto;
padding: 10px 10px 10px 40px;
background: #f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvM4YoSPZ7zPAFhiLS-NRiI7RGzQvqhCDotQLi9OQ1lQzdTT_Jc1G0XfZRBfoM_maTzrPzkPQTlkFZj1ekALLts_Qf_crk06CAQNR6NfV_Qmu37fMNrkIA9FwTNbdf2kXXXgH59hWO8EU/s1600/pen.png)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: 270px;
height: 150px;
margin: 5px auto;
padding: 10px 10px 10px 40px;
font-family:Arial, sans-serif;
background: #f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUms9EpnuZKNOFgtJfADIFoU3D6HAaFGIZrkr2I7woQIKbdYoV54Bc9FsimDWT5j4gXdrjgFgpliQVnaizYmMaYLABk9v3ESLOdzOrvrcsRH81MsW52uALvwHMSumSeaNLln8a2HUdrOA/s1600/msg2.png)no-repeat 10px 10px;
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: 95px;
height: 30px;
float: right;
color: #FFF;
padding: 0;
cursor:pointer;
margin: 25px 0 3px 0 0;
background-color:#005a8a;
border-radius:4px;
text-shadow: 1px 0 0 #1f4962;
-webkit-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;
-moz-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;
box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;
background-color: #3689b9;
border:1px solid #194f6d;
}
#ContactForm1_contact-form-submit:hover {
background:#4c9bc9;
}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{
width: 320px;
margin-top:35px;
}
Jika Script tidak bisa di copy silakan klik disini.

Setelah itu silakan simpan template kamu, nah sekarang coba lihat halaman statis kontak kamu, maka akan terlihat seperti gambar di bawah ini.
Nah cukup mudah bukan cara membuat tampilan kontak keren di blogspot? nah mungkin hanya itu sedikit tips blog dari saya semoga bermanfaat.
Kriana
Kriana Saya hanya orang yang menyempatkan diri untuk menulis tentang apa saja ketika saya sempat menulis, untuk diri sendiri maupun informasi untuk orang lain

Posting Komentar untuk "Cara Membuat Halaman Kontak pada Blog"