✔ Cara Menciptakan Contact Us Html
Seperti yang pernah saya jelaskan mengenai tujuan blog ini yaitu untuk membagikan tutorial cara menjadi publisher blogger dari awal hingga menghasilkan uang. Salah satu langkah yang saya temukan dikala berguru blogger yaitu menciptakan contact us, maka saya akan membagikan Cara Membuat Contact us HTML menyerupai pada blog masigun.
Form Contact us yakni cara pengunjung blog anda untuk berkomunikasi secara pribadi dengan pembuat blog atau penulisnya.
Manfaat menambahkan contact us antara lain
1. Pengunjung blog Anda sanggup memberikan pertanyaan sesuai dengan salah satu isi artikel diblog anda, atau menanyakan sesuatu yang pengunjung Anda butuhkan secara pribadi.
2. Jika Pengunjung Anda memperlihatkan saran atau kritik mengenai blog Anda lewat halaman contact us, pengunjung lainnya tidak akan melihat saran dan kritik jikalau saran tersebut berupa kritikan yang pedas.
3. Manfaat terpenting dengan adanya contact us, kemungkinan besar blog anda akan disetujui oleh google adsense.
4. Jika pengunjung Anda berkomentar atau mengirimkan pesan melalui contact us, anda akan mendapat notifikasi melaluui email yang terhubung dengan akun blogger Anda. Kaprikornus Anda akan lebih cepat untuk merespon email tersebut. Apa Anda tertarik untuk membut contact us?
Cara menciptakan halaman Contact us pada blog
1. Masuk ke akun blogger anda, klik halaman kemudian buat halaman baru.
2. Isi judul dengan Contact us atau hubungi saya, kemudian copy instruksi html dibawah ini dan pastekan pada halaman HTML bukan Compose.
<style type='text/css' scoped=''>/*<![CDATA[*/
.contact-form-box {
width: 100%;
margin: 20px auto;
padding: 0
}
#contactForm .floating-label-form-group {
font-size: 14px;
position: relative;
margin-bottom: 0;
padding-bottom: 20px;
border-bottom: 1px solid #ddd
}
#contactForm .floating-label-form-group.floating-label-form-group-with-focus {
position: relative
}
#contactForm .floating-label-form-group:after,
#contactForm .floating-label-form-group:before {
position: absolute;
bottom: -1px;
width: 0;
height: 2px;
background-color: #e8554e;
content: "";
transition: width .4s ease-in-out;
display: block
}
#contactForm .floating-label-form-group:before {
right: 50%
}
#contactForm .floating-label-form-group:after {
left: 50%
}
#contactForm .floating-label-form-group.floating-label-form-group-with-focus:after,
#contactForm .floating-label-form-group.floating-label-form-group-with-focus:before {
width: 50%
}
#contactForm .floating-label-form-group input,
#contactForm .floating-label-form-group textarea {
z-index: 1;
position: relative;
padding-right: 0;
padding-left: 0;
border: none;
border-radius: 0;
font-size: 14px;
font-family: Roboto, Arial, sans-serif;
font-weight: 400;
background: 0 0;
box-shadow: none!important;
resize: none
}
#contactForm .floating-label-form-group label {
display: block;
z-index: 0;
position: relative;
top: 2em;
margin: 0;
font-size: 12px;
font-family: Roboto, Arial, sans-serif;
font-weight: 300;
line-height: 1.764705882em;
vertical-align: middle;
vertical-align: baseline;
opacity: 0;
-webkit-transition: top .3s ease, opacity .3s ease;
-moz-transition: top .3s ease, opacity .3s ease;
-ms-transition: top .3s ease, opacity .3s ease;
transition: top .3s ease, opacity .3s ease
}
#contactForm .floating-label-form-group::not(:first-child) {
padding-left: 14px;
border-left: 1px solid #eee
}
#contactForm .floating-label-form-group-with-value label {
top: 0;
opacity: 1
}
#contactForm .floating-label-form-group-with-focus label {
color: #e8554e
}
#contactForm {
border-top: 1px solid #ddd
}
#contactForm textarea.form-control {
height: auto
}
#contactForm .form-control {
display: block;
width: 100%;
color: #555
}
#contactForm input:active,
#contactForm input:focus,
#contactForm textarea:active,
#contactForm textarea:focus {
outline: 0
}
#contactForm .btn,
#contactForm .contact-form-button-submit {
font-family: Roboto, Arial, sans-serif;
font-weight: 700;
text-transform: uppercase;
font-size: 18px;
letter-spacing: 1px;
border-radius: 0;
padding: 0 25px;
height: 51px;
line-height: 51px;
color: #333;
background-color: #fff;
border: 1px solid #ccc;
cursor: pointer;
margin: 20px 0 0;
background-image: none
}
#contactForm .contact-form-button {
height: 51px;
line-height: 51px
}
#contactForm .btn-default:focus,
#contactForm .btn-default:hover,
#contactForm .contact-form-button-submit:focus,
#contactForm .contact-form-button-submit:hover {
background-color: #e8554e;
border: 1px solid #be403a;
color: #fff
}
.contact-form-error-message-with-border,
.contact-form-success-message-with-border {
background: #fff;
border: 1px solid #ddd;
bottom: 0;
box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
color: #666;
font-size: 16px;
font-weight: 400;
line-height: 30px;
opacity: 1;
position: static;
text-align: center;
margin: 20px 0 0
}
.contact-form-cross {
height: 11px;
margin: 0 5px;
vertical-align: 0!important;
width: 11px;
-moz-box-shadow: none!important;
-webkit-box-shadow: none!important;
-goog-ms-box-shadow: none!important;
box-shadow: none!important
}
.contact_layout {
text-align: center;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: rgba(0, 0, 0, .8);
z-index: 99999
}
.contact_message {
width: 50%;
background: #fff;
border-radius: 5px;
padding: 20px;
border: 1px solid transparent;
text-align: center;
color: #333;
position: absolute;
top: 10%;
left: 50%;
margin-left: -25%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.contact_message:before {
content: "\f164";
font-family: FontAwesome;
font-weight: 500;
font-size: 30px;
display: block;
margin-bottom: 10px;
}
@media screen and (max-width:768px) {
.contact_message {
width: 90%!important;
margin-left: -45%!important;
}
.contact-form-box {
width: 100%;
}
}
/*]]>*/
</style>
<div class="contact-form-box">
<div>Silahkan isi form di bawah ini untuk menghubungi admin Masigun. </div>
<br/>
<form name="contact-form" id="contactForm">
<div class="floating-label-form-group">
<label>Name</label>
<input type="text" class="form-control" placeholder="Name" id="ContactForm1_contact-form-name" name="name" value="" /> </div>
<div class="floating-label-form-group">
<label>Email Address</label>
<input type="text" class="form-control" placeholder="Email Address" id="ContactForm1_contact-form-email" name="email" value="" /> </div>
<div class="floating-label-form-group">
<label>Message</label>
<textarea rows="5" class="form-control" name="email-message" placeholder="Message" id="ContactForm1_contact-form-email-message"></textarea>
</div>
<input id="ContactForm1_contact-form-submit" type="button" class="btn btn-default" value="Kirim" />
<div class="clear"></div>
<div style="max-width: 100%; text-align: left; width: 100%;">
<div id="ContactForm1_contact-form-error-message"> </div>
<div id="ContactForm1_contact-form-success-message"> </div>
</div>
</form>
</div>
<script src='https://code.jquery.com/jquery-1.12.4.min.js' type='text/j4vascript'></script>
<script>
$(function() {
$("body").on("input propertychange", ".floating-label-form-group", function(e) {
$(this).toggleClass("floating-label-form-group-with-value", !!$(e.target).val());
}).on("focus", ".floating-label-form-group", function() {
$(this).addClass("floating-label-form-group-with-focus");
}).on("blur", ".floating-label-form-group", function() {
$(this).removeClass("floating-label-form-group-with-focus");
});
});
</script>
<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/j4vascript"></script>
<script type="text/j4vascript">
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '1877745665889604279';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d1877745665889604279','//masigun.com/','1877745665889604279');
_WidgetManager._RegisterWidget("_ContactFormView", new _WidgetInfo("ContactForm1", "footer1", null, document.getElementById("ContactForm1"), {"contactFormMessageSendingMsg": "Sending...", "contactFormMessageSentMsg": "<div class='contact_layout'><div class='contact_message'><b>Your message has been sent</b>.<br/>Jika tidak ada halangan dan kesibukan lainnya, admin akan eksklusif merespon pesan yang Anda kirimkan.</div></div><br/>", "contactFormMessageNotSentMsg": "Message could not be sent. Please try again later.", "contactFormInvalidEmailMsg": "A valid email address is required.", "contactFormEmptyMessageMsg": "Message field cannot be empty.", "title": "Contact Form", "blogId": "1877745665889604279", "contactFormNameMsg": "Name", "contactFormEmailMsg": "Email", "contactFormMessageMsg": "Message", "contactFormSendMsg": "Send", "submitUrl": "https://www.blogger.com/contact-form.do"}, "displayModeFull"));
</script>
3. Isi dengan id Blogger diatas yang saya beri warna dengan ID blog Anda sendiri. Untuk melihat ID blog silahkan Anda buka postingan saya pada Cara mengetahui ID blog.
4. Peringatan jangan sekali-kali atau mencoba mengklik compose sesudah instruksi html diatas anda paste pada halaman HTML sebab akan terjadi kesalahan pada contact us yang anda buat. artinya contact us yang Anda buat tidak akan bekerja
5. Setelah simpulan klik publikasi dan jangan lupa untuk submit kewebmaster tool. jikalau Anda belum tahu cara submit artikel ke webmaster tool silahkan baca postingan saya mengenai cara submit artikel ke webmaster tool.
Begiulah cara menciptakan contact us html ala masigun.com. jikalau Anda menemukan hambatan dikala menerapkannya pada blog anda silahkan berkomentar dipostingan ini atau beritahu saya melalui halaman contact us. Sumber http://www.masigun.com
0 Response to "✔ Cara Menciptakan Contact Us Html"
Posting Komentar