Cara Membuat Halaman Kontak Blogger Keren

cara membuat halaman kontak blogger, halaman kontak blogger keren, halaman kontak blogger responsive

Cara membuat halaman kontak blogger - Halaman kontak merupakan salah satu fitur yang sangat penting dan harus ada dalam sebuah blog, baik blog personal maupun blog bisnis.

Halaman kontak sangat memudahkan pengunjung untuk menghubungi penulis atau admin blog jika ada hal yang ingin ditanyakan maupun bagi yang ingin kerjasama.

Di platform blogger sendiri sudah disediakan widget kontak yang bisa Anda pasang di sidebar blog. Namun, menurut saya widget kontak di sidebar blog kurang menarik dilihat.

Ada baiknya agar Anda membuat halaman khusus untuk kontak blog. Hal ini bisa mengurangi widget di sidebar sehingga loading blog Anda menjadi semakin cepat.

Cara Membuat Halaman Kontak Blogger

Berikut akan saya bagikan beberapa kode untuk membuat halaman kontak di blog. Pastikan Anda mengikuti panduan berikut ini sesuai dengan yang sudah dijelaskan.

  • Pertama silahkan Buat Halaman Baru di blogger Anda dengan nama "Kontak Kami" atau apa saja (bebas). Kemudian masukkan kode berikut ke halaman tersebut dan Terbitkan halaman.
  • <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://2.bp.blogspot.com/-nkmaptT0VoA/WumFePAy9DI/AAAAAAAAGlM/8lA5aRi2E-okumpdikjQancIKDjYaGNqwCLcBGAs/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>
  • Masuk ke Tata Letak blog Anda dan tambahkan widget Formulir Kontak agar halaman kontak yang Anda buat tersebut bisa berfungsi dengan baik.
  • cara menambah widget formulir kontak blogger

  • Agar widget formulir kontak tidak tampil di sidebar blog, masuk ke Tema >> Edit HTML dan masukkan kode berikut sebelum </head>.
  • <style type='text/css'>
    #ContactForm1,#ContactForm1 br{display:none}
    </style>
  • Bagi yang melakukan optimasi blog dengan menyembunyikan Css dan Javascript Blogger, silahkan masukkan kode berikut ini.
  • <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'] = '6243576702872104792';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d6243576702872104792','//www.arlinacode.com/','6243576702872104792');
    _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': '6243576702872104792', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
    //]]>
    </script>

Kode untuk membuat halaman kontak ini saya dapatkan dari blog arlinacode.com. Jadi untuk melihat demo halaman kontak diatas, silahkan ke blog tersebut.

Itulah cara membuat halaman kontak blogger keren versi terbaru. Bagi yang belum memiliki halaman kontak di blog, silahkan buat sekarang juga agar blog Anda lebih profesional.

Posting Komentar