Setelah tadi saya bagikan pandua mengenai Cara Menambahkan Widget Kontak From Blogger Resmi, kali ini saya memposting bagaimana Cara mempercantik Widget tersebut agar kelihatan lebih menarik.
Cara Mempercantik Tampilan Widget Contact Form di Halaman Statis - Dengan memanfaatkan Script CSS dan HTML, ternyata widget contact form
bawaan Blogger ini bisa dipercantik tampilannya di halaman statis.
Kurang Lebih hasilnya akan seperti pada screenshot di bawah ini:
Ada dua tampilan yaitu tampilan dengan Light (untuk Blog dengan background cerah) dan Dark (untuk Blog dengan background gelap)
Berikut Panduannya :
Langkah 1. Buat widget contact form melalui menu tataletak/layout
Jangan hapus widget ini, karena nanti cukup disembunyikan dengan kode CSS.
Langkah 2. Buat Sebuah laman Baru dengan Judul Contact Us, Kontak
Kami atau Hubungi Kami atau terserah Anda. Lalu Simpan kode script di
bawah ini pada mode HTML (jangan pada mode compose).
<div id="contact_wrap">
<h3>
Hubungi Kami</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" />
<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>
Langkah 3. Menambahkan Kode CSS untuk merubah tampilan widget contact form di laman statis.
Simpan kode script CSS di bawah ini tepat di atas kode ]]></b:skin> dari edit HTML Template.
/* 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/AVvXsEi72wySXdJ45XYKu68sVWK91bJASN2QYaP8TYZl1-84jrt-y9vjtJ8V1fjUmadfXIiEih2WFEqE28U6ql8947Q9WOjloeltpzB1bdvXtDhyOCoR40qfd5DOXGQ4cWTwlLIyuhljaxjlxBk/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/AVvXsEj7wGbAsn8nIdvcAVEetWlhIqhPUKOxH6EtNodE8LTWKInZcI8knx1ZI5m47S3OzYmVEovJmLXXWy5u7hja8HEsvCg_etzgUUCoE-xh2D-JO2oPd98iMg1XnEVbJxyK_D0Ei1Yfevz6Kq8/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/AVvXsEjHC__QywOZNIZLmL_UXyuVAg3F_Y5SJ2vNEfd4dWNUC5x23anXGd4WtLknzUTc-izT8VVNl5fGQDDAiNvp2qi8ZLb5RAgqAk8FFNstk6NQfJXzdcP9O5kfOyE6ouEQTUklb6VkPbyPJHU/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;
}
/* CSS Contact Form Dark Theme by BloggerTut.com */
#ContactForm1{
display:none;
}
#contact_wrap {
margin: auto;
width: 321px;
height: 380px;
padding: 25px;
border-radius: 1em;
border: #600 solid 1px;
border-bottom: #420000 solid 1px;
background-color:#983738;
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,
startColorstr='#bf5355', endColorstr='#983738');
background-image:-webkit-linear-gradient(top, #bf5355 0%, #a94244 50%,
#983738 100%);
background-image:-moz-linear-gradient(top, #bf5355 0%, #a94244 50%,
#983738 100%);
background-image:-ms-linear-gradient(top, #bf5355 0%, #a94244 50%,
#983738 100%);
background-image:-o-linear-gradient(top, #bf5355 0%, #a94244 50%,
#983738 100%);
background-image:linear-gradient(top, #bf5355 0%, #a94244 50%, #983738
100%);
}
#contact_wrap h3{
color: #fff;
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 #3b5931;
-webkit-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #111;
-moz-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #111;
box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #111;
background-color: #659156;
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: #000 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 #000;
}
#ContactForm1_contact-form-name{
width: 270px;
height:auto;
margin: 5px auto;
padding: 10px 10px 10px 40px;
background:#2b2e31
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi72wySXdJ45XYKu68sVWK91bJASN2QYaP8TYZl1-84jrt-y9vjtJ8V1fjUmadfXIiEih2WFEqE28U6ql8947Q9WOjloeltpzB1bdvXtDhyOCoR40qfd5DOXGQ4cWTwlLIyuhljaxjlxBk/s1600/user.png)no-repeat
10px center;
color:#d2d2d2;
border:1px solid #ce6d6e;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #ce6d6e
0px 1px 0px;
box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #ce6d6e 0px 1px
0px;
}
#ContactForm1_contact-form-email{
width: 270px;
height:auto;
margin: 5px auto;
padding: 10px 10px 10px 40px;
background: #2b2e31
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7wGbAsn8nIdvcAVEetWlhIqhPUKOxH6EtNodE8LTWKInZcI8knx1ZI5m47S3OzYmVEovJmLXXWy5u7hja8HEsvCg_etzgUUCoE-xh2D-JO2oPd98iMg1XnEVbJxyK_D0Ei1Yfevz6Kq8/s1600/pen.png)no-repeat
10px center;
color:#d2d2d2;
border:1px solid #ce6d6e;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #ce6d6e
0px 1px 0px;
box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #ce6d6e 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: #2b2e31
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhCkfXnooJbzjWPDPbRMAIY2x2GrBsJG4lv7O8Hkk-PeFML3GyhJGbYD_z0k2pNHnZOAcKV2ggKJG31ThHKUJNNLzM16v9hvx7boeEptbsvCIPqEOkaXJ5go2JLm2ZAoSHEAcCr-VhM-Y/s1600/msg.png)no-repeat
10px 10px;
color:#d2d2d2;
border:1px solid #ce6d6e;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #ce6d6e
0px 1px 0px;
box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #ce6d6e 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: #659156;
border:1px solid #333;
}
#ContactForm1_contact-form-submit:hover {
background:#5d894d;
}
#ContactForm1_contact-form-error-message,
#ContactForm1_contact-form-success-message{
width: 320px;
margin-top:35px;
}
Sesuaikan dengan template anda masing-masing. Jika anda memahami kode
CSS, anda juga masih bisa memodifikasi warna form dari script tersebut
sesuai dengan keinginan Anda.
Selamat mencoba
Semoga bermanfaat.
sumber :tukangtokoonline.web.id
: