Cara Membuat Halaman Contact Us Di Blogger

Hallo semuanya di postingan saya kai ini saya akan memberikan tutorial cara membuat halaman contact us di blogger. keuntungan dari memasang halaman contact us ini adalah pengunjung anda dapat menghubungi anda entah itu ingin menanyakan kabar atau meriquest artikel. 

nah langsung aja kita ke tutorial nya


pertama kalian buka dashboard blogger kalian lalu kalian pergi ke halaman




jika sudah kalian klik halaman baru

nah kaian pilih TAMPILAN HTML




jika sudah kalian salin kode di bawah 

<style>

/* Contact Form */

#comments,.post_meta,#blog-pager{display:none}form{color:#666} #kontak{margin:auto;max-width:640px} #ContactForm1_contact-form-name,#ContactForm1_contact-form-email{height:auto;margin:5px auto;padding:15px 12px;background:#fff;color:#444;border:1px solid #1d2129;box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;width:100%;min-width:100%;transition:all 0.5s ease-out}#ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:15px 12px;background:#fff;color:#444;border:1px solid #1d2129;box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;resize:none;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:#444;border-color:#66afe9;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,0.6)}#ContactForm1_contact-form-submit{float:left;background:#008c5f;margin:auto;vertical-align:middle;cursor:pointer;padding:12px 20px;font-size:14px;text-align:center;letter-spacing:.5px;border:0;width:100%;max-width:140px;border-radius:3px;color:#fff;font-weight:500;transition:all .8s ease}#ContactForm1_contact-form-submit:hover{background:#1d2129;color:#fff}#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:35px}.contact-form-error-message-with-border{background:#1d2129;border:none;box-shadow:none;color:#fff;padding:5px 0}.contact-form-success-message{background:#4fc3f7;border:none;box-shadow:none;color:#fff}img.contact-form-cross{line-height:40px;margin-left:5px}.post-body input{width:initial}

</style>


<form id="kontak" name="contact-form">

  <input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />

  <input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />

  <textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>

  <input id="ContactForm1_contact-form-submit" type="button" value="Kirim Pesan" />

  <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>


<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js"></script>

<script>//<![CDATA[

if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '5576513009414978958';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d5576513009414978958','//www.urlblog.com','idblog');

_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': '5576513009414978958', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));

//]]></script>


ganti url bblog dengan url blog kalian lalu ganti idblog dengan idblog kalian 

oiya bagi yang tidak tahu id blog https://www.blogger.com/blogger.g?blogID=12313124124

nah angka di belakang blogID itu adalah id blog kalian


nah jika sudah kalian pastekan dan simpan



udh deh jadi 

untuk demo nya kalian bisa klik link berikut Demo


oke mungkin itu saja tutorial singkat dari saya jika kurang paham silahkan comment di bawah

see you

Posting Komentar

Post a Comment (0)

Lebih baru Lebih lama