Membuat Kontak Form Untuk Blog Yang Menyembunyikan Js Default Blogger
Kontak merupakan salah satu sarana yang harus disediakan oleh pemilik website atau blog supaya pengunjung lebih gampang menghubungi admin kalau ada yang kurang dimengerti terkait dengan isi blog tersebut. Secara default kontak blogger dapat pribadi ditambahkan melalui page layout atau tata letak, baik di sidebar atau footer, dan dikala ini sudah banyak yang memindahkan kontak tersebut ke halaman static. Namun untuk blog yang menyembunyikan javascript default blogger, memindahkan default contact blogger ke halaman static tidak akan berfungsi, solusinya kita harus menyimpan JS tersebut secara manual kedalam HTML. Supaya JS tersebut tidak mempengaruhi loading seluruh halaman blog, maka kita harus menambahkan tag kondisional khusus halaman kontak tersebut.
Bagaimana anda tertarik? coba simak pesan-pesan berikut ini ihwal menciptakan kontak form untuk blog yang menyembunyikan js default blogger:
Demo
Silahkan simpan arahan css dibawah ini diatas
</head><b:if cond='data:blog.url == "URL-HALAMAN-STATIC"'>
<style type='text/css'>
/*<![CDATA[*/
.contact-box{margin:10px 0 0 50px}
.contact-box svg{width:24px;height:24px;vertical-align:-6px;margin-right:5px}
.contact-box svg path{fill:#444}
.contact-me{display:block}
.contact-me a{color:#333;text-decoration:none}
.contact-me a:hover{color:#eb4938}
.contact-me span{-webkit-user-select:all;-moz-user-select:all;-ms-user-select:all;user-select:all}
.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:16px;font-family:Roboto,Arial,sans-serif;font-weight:300;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}
.message{width:100%;max-width:100%;text-align:left}
#contactForm input .span1,#contactForm textarea .span1{display:block;width:0;height:3px;background:#e8554e;position:absolute;left:50%;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out}
#contactForm input .span2,#contactForm textarea .span2{display:block;width:0;height:3px;background:#e8554e;position:absolute;right:50%;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out}
#contactForm input span{bottom:0}
#contactForm input:focus,#contactForm textarea:focus{outline:0}
#contactForm input:focus .span1,#contactForm textarea:focus .span1,#contactForm input:focus .span2,#contactForm textarea:focus .span2{width:50%}
@media screen and (max-width:768px) {
.contact_message{width:90%!important;margin-left:-45%!important}
.contact-form-box{width:100%}
.contact-box{margin:10px 0 0}
}
/*]]>*/
</style>
</b:if>kemudian simpan arahan javascript ini diatas
</body><b:if cond='data:blog.url == "URL-HALAMAN-STATIC"'>
<script src='https://www.blogger.com/static/v1/widgets/2859494812-widgets.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '3025760016463066759';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d3025760016463066759','//www.nomifrod.com/','3025760016463066759'); _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 pribadi 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": "3025760016463066759", "contactFormNameMsg": "Name", "contactFormEmailMsg": "Email", "contactFormMessageMsg": "Message", "contactFormSendMsg": "Send", "submitUrl": "https://www.blogger.com/contact-form.do"}, "displayModeFull"));
//]]>
</script>
</b:if>selanjutnya simpan arahan berikut ini di halaman static mode html (bukan compose)
<div class="contact-box">
<div class="contact-me">
<svg viewBox="0 0 24 24"><path d="M20,8L12,13L4,8V6L12,11L20,6M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4Z" /></svg><span>emailanda@gmail.com</span>
</div>
<div class="contact-me">
<svg viewBox="0 0 24 24"><path d="M20,2A2,2 0 0,1 22,4V20A2,2 0 0,1 20,22H4A2,2 0 0,1 2,20V4C2,2.89 2.9,2 4,2H20M20,12H18V10H17V12H15V13H17V15H18V13H20V12M9,11.29V13H11.86C11.71,13.71 11,15.14 9,15.14C7.29,15.14 5.93,13.71 5.93,12C5.93,10.29 7.29,8.86 9,8.86C10,8.86 10.64,9.29 11,9.64L12.36,8.36C11.5,7.5 10.36,7 9,7C6.21,7 4,9.21 4,12C4,14.79 6.21,17 9,17C11.86,17 13.79,15 13.79,12.14C13.79,11.79 13.79,11.57 13.71,11.29H9Z" /></svg><a href="https://plus.google.com/+username" target="_blank" title="Google Plus">Google Plus</a>
</div>
<div class="contact-me">
<svg viewBox="0 0 24 24"><path d="M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3M18,5H15.5A3.5,3.5 0 0,0 12,8.5V11H10V14H12V21H15V14H18V11H15V9A1,1 0 0,1 16,8H18V5Z" /></svg><a href="https://www.facebook.com/username" target="_blank" title="Facebook">Facebook</a>
</div>
<div class="contact-me">
<svg viewBox="0 0 24 24"><path d="M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3M17.71,9.33C18.19,8.93 18.75,8.45 19,7.92C18.59,8.13 18.1,8.26 17.56,8.33C18.06,7.97 18.47,7.5 18.68,6.86C18.16,7.14 17.63,7.38 16.97,7.5C15.42,5.63 11.71,7.15 12.37,9.95C9.76,9.79 8.17,8.61 6.85,7.16C6.1,8.38 6.75,10.23 7.64,10.74C7.18,10.71 6.83,10.57 6.5,10.41C6.54,11.95 7.39,12.69 8.58,13.09C8.22,13.16 7.82,13.18 7.44,13.12C7.81,14.19 8.58,14.86 9.9,15C9,15.76 7.34,16.29 6,16.08C7.15,16.81 8.46,17.39 10.28,17.31C14.69,17.11 17.64,13.95 17.71,9.33Z" /> </svg><a href="https://twitter.com/username" target="_blank" title="Twitter">Twitter</a>
</div>
<div class="contact-me">
<svg viewBox="0 0 24 24"><path d="M7.8,2H16.2C19.4,2 22,4.6 22,7.8V16.2A5.8,5.8 0 0,1 16.2,22H7.8C4.6,22 2,19.4 2,16.2V7.8A5.8,5.8 0 0,1 7.8,2M7.6,4A3.6,3.6 0 0,0 4,7.6V16.4C4,18.39 5.61,20 7.6,20H16.4A3.6,3.6 0 0,0 20,16.4V7.6C20,5.61 18.39,4 16.4,4H7.6M17.25,5.5A1.25,1.25 0 0,1 18.5,6.75A1.25,1.25 0 0,1 17.25,8A1.25,1.25 0 0,1 16,6.75A1.25,1.25 0 0,1 17.25,5.5M12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9Z" /></svg><a href="https://www.instagram.com/username" target="_blank" title="Instagram">Instagram</a>
</div>
<div class="contact-me">
<svg viewBox="0 0 24 24"><path d="M16.75,13.96C17,14.09 17.16,14.16 17.21,14.26C17.27,14.37 17.25,14.87 17,15.44C16.8,16 15.76,16.54 15.3,16.56C14.84,16.58 14.83,16.92 12.34,15.83C9.85,14.74 8.35,12.08 8.23,11.91C8.11,11.74 7.27,10.53 7.31,9.3C7.36,8.08 8,7.5 8.26,7.26C8.5,7 8.77,6.97 8.94,7H9.41C9.56,7 9.77,6.94 9.96,7.45L10.65,9.32C10.71,9.45 10.75,9.6 10.66,9.76L10.39,10.17L10,10.59C9.88,10.71 9.74,10.84 9.88,11.09C10,11.35 10.5,12.18 11.2,12.87C12.11,13.75 12.91,14.04 13.15,14.17C13.39,14.31 13.54,14.29 13.69,14.13L14.5,13.19C14.69,12.94 14.85,13 15.08,13.08L16.75,13.96M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C10.03,22 8.2,21.43 6.65,20.45L2,22L3.55,17.35C2.57,15.8 2,13.97 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12C4,13.72 4.54,15.31 5.46,16.61L4.5,19.5L7.39,18.54C8.69,19.46 10.28,20 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z" />
</svg><span>nomor-whatsapp</span>
</div>
<div class="contact-me">
<svg viewBox="0 0 24 24"><path d="M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12,2Z" /></svg><a href="URL-GOOGLE-MAPS" target="_blank" title="Map of bloganda">Alamat-anda</a>
</div>
</div>
<br />
<div class="contact-form-box">
<div>
Atau dapat memakai form di bawah ini.
</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="" />
<span class="span1"></span><span class="span2"></span>
</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="" />
<span class="span1"></span><span class="span2"></span>
</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>
<span class="span1"></span><span class="span2"></span>
</div>
<input id="ContactForm1_contact-form-submit" type="button" class="btn btn-default" value="Kirim" />
<div class="clear"></div>
<div class="message">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>atau dapat juga semua arahan diatas disimpan pribadi di halaman static, tapi berdasarkan beberapa blogger sebaiknya disimpan di html supaya loading lebih cepat. Sama halnya dengan template amp yang semuanya ngumpul di html dalam satu style.
Oke sudah ya selamat mencoba dan supaya bermanfaat... Sumber https://www.nengain.web.id/
Belum ada Komentar untuk "Membuat Kontak Form Untuk Blog Yang Menyembunyikan Js Default Blogger"
Posting Komentar