Cara Memasang Halaman Contact us di Blog- sangatlah mudah dan tentu saja fungsinya
cukup banyak. Jika kalian ingin memasang halaman Contatc us di blog kalian untuk
memudahkan pengunjung yang ingin request ataupun yang ingin memasang iklan di
blog kalian mungkin desain Contact us ini sangat membantu..
Jika kalian tertarik dengan tampilan Contact us ini kalian bisa ikuti Langkah-langkah berikut ini:
Langkah 1 : buatlah halaman statis terlebih dahulu dengan nama contact, contact me, atau apa pun yang Anda suka. Jika sudah, jangan di publish dulu melainkan di save/simpan lalu tutup.
Langkah 2 : Menuju ke tata letak, lalu add widget dan pilih formulir kontak. Saya sarankan untuk memasangnya di footer saja.
Langkah 3 : Setelah itu pilih Template lalu Edit HTML. Masukkan CSS berikut sebelum kode ]]></b:skin> atau </style>
/* CSS Contact ---- http://wajahilmu.blogspot.com/ */
#ContactForm1,#ContactForm1 br{display:none;}
#ContactForm1_contact-form-name,
#ContactForm1_contact-form-email{
width:50%;height:auto;margin:5px
auto;padding:10px;background:#fff;color:#444;border:1px solid
#e6e6e6;border-radius:3px;transition:all 0.5s ease-out;}
#ContactForm1_contact-form-email-message{width:450px;height:175px;margin:5px
0;padding:10px;background:#fff;color:#444;font-family:'Open
Sans',sans-serif;border:1px solid
#e6e6e6;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:#666;border-color:rgba(81,203,238,1);box-shadow:0
0 5px rgba(81,203,238,0.7);}
#ContactForm1_contact-form-submit
{font-family:'Open
Sans';float:left;background:#f3f3f3;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:none;border-radius:4rem;background-image:
linear-gradient(110deg, #fe3434 0%, #fe3434 50%, transparent 50%, transparent
100%);background-size:200%;background-position:120%
0;background-repeat:no-repeat;transition: background-position .4s ease, color
.4s ease;}
#ContactForm1_contact-form-submit:hover
{color:#fff;background-position:0 0;}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{
width:450px;margin-top:35px;}
Langkah 4 : Masih pada edit HTML, silahkan cari kode widget Formulir Kontak yang dipasang sebelumnya. Kira-kira seperti ini kodenya.
<b:widget id='ContactForm1' locked='false' title='Formulir
Kontak' type='ContactForm'>
<b:includable id='main'>
<b:if
cond='data:title != ""'>
<h2
class='title'><data:title/></h2>
</b:if>
<div
class='contact-form-widget'>
<div
class='form'>
<form
name='contact-form'>
<p/>
<data:contactFormNameMsg/>
<br/>
<input class='contact-form-name' expr:id='data:widget.instanceId +
"_contact-form-name"' name='name' size='30' type='text'
value=''/>
<p/>
<data:contactFormEmailMsg/>
<span style='font-weight: bolder;'>*</span>
<br/>
<input class='contact-form-email' expr:id='data:widget.instanceId +
"_contact-form-email"' name='email' size='30' type='text'
value=''/>
<p/>
<data:contactFormMessageMsg/>
<span style='font-weight: bolder;'>*</span>
<br/>
<textarea class='contact-form-email-message' cols='25'
expr:id='data:widget.instanceId +
"_contact-form-email-message"' name='email-message' rows='5'/>
<p/>
<input class='contact-form-button contact-form-button-submit'
expr:id='data:widget.instanceId + "_contact-form-submit"'
expr:value='data:contactFormSendMsg' type='button'/>
<p/>
<div
style='text-align: center; max-width: 222px; width: 100%'>
<p
class='contact-form-error-message' expr:id='data:widget.instanceId +
"_contact-form-error-message"'/>
<p
class='contact-form-success-message' expr:id='data:widget.instanceId +
"_contact-form-success-message"'/>
</div>
</form>
</div>
</div>
<b:include
name='quickedit'/>
</b:includable>
</b:widget>
Langkah 5 : Hapus kode <form name='contact-form'> sampai </form> lalu save. Jika sudah, langsung menuju ke halaman statis yang telah di buat sebelumnya lalu ubahlah Compose ke HTML.
Langkah 6 : Dalam Mode HTML, masukkan kode berikut lalu publish.
<div dir="ltr" style="text-align:
left;" trbidi="on">
<form name="contact-form"><span
style="color: #999999; display: inline-block; font-family: Open
Sans,Arial,Helvetica,sans-serif; font-weight: 700; margin-bottom: 10px;
margin-top: 15px;"><i class="fa fa-user"></i>
Name </span><br />
<input id="ContactForm1_contact-form-name"
name="name" size="30" type="text"
value="" /><br />
<br />
<span style="color: #999999; display:
inline-block; font-family: Open Sans,Arial,Helvetica,sans-serif; font-weight:
700; margin-bottom: 10px; margin-top: 15px;"><i class="fa
fa-envelope-o"></i> Email Address <span
style="background: #aaa; border-radius: 3px; color: white; font-size:
x-small; font-weight: normal; line-height: normal; margin-left: 5px; padding: 0
3px 1px 3px;">important</span></span><br />
<input id="ContactForm1_contact-form-email"
name="email" size="30" type="text"
value="" /><br />
<br />
<span style="color: #999999; display:
inline-block; font-family: Open Sans,Arial,Helvetica,sans-serif; font-weight:
700; margin-bottom: 10px; margin-top: 15px;"><i class="fa
fa-pencil-square-o"></i> Content <span style="background:
#aaa; border-radius: 3px; color: white; font-size: x-small; font-weight:
normal; line-height: normal; margin-left: 5px; padding: 0 3px 1px
3px;">important</span></span><br />
<textarea cols="25"
id="ContactForm1_contact-form-email-message"
name="email-message" rows="5"></textarea> <br
/>
<input
id="ContactForm1_contact-form-submit" type="button"
value="Send" /> <br
/>
<div
id="ContactForm1_contact-form-error-message"></div><div
id="ContactForm1_contact-form-success-message"></div></form>
<br /></div>
Jika sudah, silahkan uji coba halaman contact tersebut lalu cek email Anda. Sekian tutorial kali ini, jika ada pertanyaan, kritik dan saran silahkan berkomentar pada halaman ini. Terima kasih
