Wednesday, 30 January 2019

Membuat Contact From Diblog

Assalamu'alaikum warohmatulloh wabarokaatuh Sboat setia Catatan sederhana Kali ini kita belajar Membuat Contack From Di blogspot ,ok  langsung saja

Ingat Backup Tema kalau masih baru dalam mengedit tema, kalau sudah terbiasa kita lanjut

PERTAMA

Memasukan Code Css Di tema

Cara nya

KLIK TEMA lalu
klik Edit Html
TAMBAHKAN Code Dibawah ini  Diatas Tag < /HEAD>

<style type='text/css'>
#ContactForm1,#ContactForm1 br{display:none}
</style>


KEDUA

Tambahkan Gadget Contack From

Cara nya

Klik Tata Letak  Klik Add Gadget  Lalu cari Contack From

KETIGA

Klik Halaman

cara nya cari Di dasboard Blog sobat yang bertulis  Halaman lalu klik

SETTING DULU

1 COMENTAR IZINKAN
2 HTML APA ADANYA
3 TEKAN ENTER UNTUK GARIS BARU
4 TULIS TITLE    CONTAC US

kalau sudah didalam  Dibawah  entri  rubah Compose menjadi Html

Copy Code Dibawah ini lalu Pastekan Di Html

(Sebelum di pastekan Di html  Coba Code Dibawah ini edit dulu Di dalam Notepad)

<div dir="ltr" style="text-align: left;" trbidi="on">
<form name="contact-form">
<div class="formcolumn1">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" />
</div>
<div class="formcolumn2">
<input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" />
</div>
<div class="formcolumn3">
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="7"></textarea>
</div>
<div class="formcolumn4">
<input class="ripplelink" id="ContactForm1_contact-form-submit" type="button" value="Send Now" />
</div>
<div style="max-width: 100%; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
<style scoped="" type="text/css">
#ContactForm1,#comments{display:none}
#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{display:inline-block;width:100%;height:auto;margin:10px auto;padding:14px;background:#fff;color:#222;border:1px solid rgba(0,0,0,0.08)}
#ContactForm1_contact-form-email-message{font-family:'Roboto';width:100%;height:250px;margin:10px auto;padding:14px;background:#fff;color:#222;border:1px solid rgba(0,0,0,0.08)}
#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{background:#fff;outline:none;border-color:rgba(0,0,0,0.18)}
#ContactForm1_contact-form-submit{background:#fff;color:#5f6368;font-size:16px;width:161px;height:45px;float:left;padding:0 0 0 20px;margin:10px 0 3px 5px;cursor:pointer;border:none;border-radius:24px;box-shadow:0 1px 2px 0 rgba(60,64,67,0.302),0 1px 3px 1px rgba(60,64,67,0.149);transition:box-shadow .08s linear,min-width .15s cubic-bezier(0.4,0.0,0.2,1)}
.formcolumn4{position:relative}
.formcolumn4:before{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh5jnVeba-sZw0Go0rGEZC7Pa6VXtF7QG7ZruBenZIkvnJJoRSY8GU0urBrb6VkzUfNWPLHnTiNoC-iOYcw0TqwvomoHEZfLYgvNe1tGHD5WJqhwWoHdMTycJhto2rWEq8zUM2luM9ivnp/s1600/mailme.png);background-position:center;background-repeat:no-repeat;background-size:20px;content:'';display:block;height:63px;width:32px;position:absolute;z-index:1;left:15px;top:0}
#ContactForm1_contact-form-submit:hover{background:#fafafb;box-shadow:0 1px 3px 0 rgba(60,64,67,0.302),0 4px 8px 3px rgba(60,64,67,0.149)}
#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{margin-top:35px}
form{color:#888}
.formcolumn1,.formcolumn2{float:left;width:50%}
.formcolumn1,.formcolumn2{margin:0 0 10px 0;padding:0 10px 0 0}
.formcolumn2{padding:0 0 0 10px}
@media only screen and (max-width:768px){.formcolumn1,.formcolumn2{width:100%;padding:0}}
</style>
<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = 'xxx9959509585135577';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d7479959509585135577','//https://hudori123.blogspot.com/','xxx9959509585135577');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Sending...', 'contactFormMessageSentMsg': 'Your message has been sent.', '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': '677369144795890581', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script></div>


ket

-Sebelum Di praktekan Tulis Semua langkah Di Notepad..

-yang berwarna Merah ganti no id blog dengan blog sendiri   xxx9959509585135577

-yang berwarna Biru ganti url blog dengan blog sendiri    https://hudori123.blogspot.com/

-Cari id blog ketika  mengedit Di dasboard Blog Anda  itu ada id blog.. Yang berada  Diatas Kotak url seperti https://draft.blogger.com/blogger.g?blogID=blog id jumlah 19 angka

-Kalau Sobat masih Bingung klik saja Refrensi nya

-Hasil nya lihat Contac saya

selamat belajar


Refrensi

Master Arlina Desain


Alhamdulillah Catatan sederhana Membuat Contact From Diblog Telah selesai Mohon maaf Jika Ada Kesalahan Wasalamu'alaikum warohmatulloh wabarokaatuh


No comments:

Post a Comment