Cara Membuat Layanan Contact Us di Blogger

Halaman contact us adalah layanan yang diberikan kepada pengunjung untuk memberikan pesan kepada admin. Halaman ini sangat perlu diterapkan, karena memudahkan pengunjung dalam memberikan pesan kepada admin. Terkadang menambahkan form contact us ini sering kali di salah gunakan oleh orang, seperti sengaja memberi pesan yang ga bermutu, mengkritik hal yang gajelas dan lain-lain. Tapi dibalik itu, banyak manfaatnya jika anda memasang form contact us ini, biasanya blog dengan tema download, anda bisa memanfaatkan form contact us ini untuk pengunjung dalam me-request software. Dengan mengisi nama, email dan pesan yang akan disampaikan, lalu anda menekan tombol "send" maka pesan anda akan langsung terkirim ke email admin. Kemungkinan akan dibales oleh admin jika dia sedang aktif.

Biasanya form contact us ini diguanakan oleh pengunjung jika komentar pengunjung tidak mendapatkan balasan dari sang admin, biasanya pengunjung menggunakan layanan contact us ini.

Berikut ini keuntungan membuat layanan contact us :
  1. Pengunjung anda dapat menyampaikan pertanyaan dengan topik dari salah satu artikel anda.
  2. Pengunjung anda dapat memberi kritikan atau saran yang mungkin secara tidak langsung.
  3. Layanan Contact us ini adalah menu yang harus ada jika anda ingin mengajukan "Google Adsense" 
Berikut ini kekurangan jika anda membuat layanan contact us :
  1. Pengunjung yang kadang-kadang suka jail mengirim pesan tidak jelas atau semacamnya yang sudah pasti tidak penting ataupun pesan yang membuat kita marah.
  2. Terkadang pengunjung tidak mengisi data dengan benar, walaupun data tidak benar pesan tetap saja terkirim ke email admin.
  3. Pengunjung mengirim pesan diluar artikel yang dimaksud.





  • LIVE DEMO

  • Sebelumnya saya pernah membuat postingan tentang layanan contact us juga, anda bisa menggunakan ini jika anda tertarik.

    Baca Juga :
    Form contact us yang saya bagikan kali ini menggunakan 3 input, diantaranya Name, Email dan Message, dan juga dibekali 2 tombol yaitu, tombol "Send" dan juga tombol "Reset". Ok langsung saja ke proses pembuatannya.

    Cara Membuat Layanan Contact Us di Blogger

    Cara Pertama :

    1. Buka Blogger - Kemudian Login.
    2. Dashboard - Halaman.

    Cara Kedua :

    1. Buatlah 1 halaman dengan judul "Contact Us" atau "Hubungi Kami".
    2. Pilih bagian HTML.

    Screenshoot :

    3. Copy & Paste kode berikut ini dan letakkan pada bagian HTML jangan pada bagian COMPOSE.
    <div dir="ltr" style="text-align: left;" trbidi="on">
    <style>
    .notification{
        height: 35%;
        width: 90%;
        font-size: 16px;
        font-weight:bold;
        text-align: left;
        color: #fff!important;
        background: #07ACEC;
        padding: 15px 25px;
        border-radius: 4px;
        border: none;
        outline: none;
        box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
        margin-top: 15px;
            }  
    .ribbon{position:relative;z-index:1;padding:1em 2em}
    .ribbon-tampilan{font-size:120%!important;text-transform:uppercase;width:60%;position:relative;background:#07ACEC;color:#fff;text-align:center;padding:1em 2em;margin:2em auto 3em}
    .ribbon-tampilan:before,.ribbon-tampilan:after{content:"";position:absolute;display:block;bottom:-1em;border:1.5em solid #07ACEC;z-index:-1}
    .ribbon-tampilan:before{left:-2em;border-right-width:1.5em;border-left-color:transparent}
    .ribbon-tampilan:after{right:-2em;border-left-width:1.5em;border-right-color:transparent}
    .ribbon-tampilan .ribbon-nama:before,.ribbon-tampilan .ribbon-nama:after{content:"";position:absolute;display:block;border-style:solid;border-color:#07ACEC transparent transparent transparent;bottom:-1em}
    .ribbon-tampilan .ribbon-nama:before{left:0;border-width:1em 0 0 1em}
    .ribbon-tampilan .ribbon-nama:after{right:0;border-width:1em 1em 0 0}
    
    .contact-us{
    float:none;
    position:relative;
    margin-bottom:45px;
    margin-right:10px
    }
    .contact-us input,.contact-us textarea{
    font-size:15px;
    padding:15px 0;
    display:block;
    width:100%;
    border:none;
    border-bottom:1px solid #ddd
    }
    .contact-us input:focus,.contact-us textarea:focus{
    outline:none
    }
    .contact-us label{
    color:#999;
    font-size:15px;
    font-weight:400;
    position:absolute;
    pointer-events:none;
    left:0;
    top:10px;
    transition:.2s ease all;
    }
    .contact-us input:focus ~ label,.contact-us input:valid ~ label,.contact-us textarea:focus ~ label,.contact-us textarea:valid ~ label{
    top:-20px;
    font-size:14px;
    color:#07ACEC;
    }
    .form{
    position:relative;
    display:block;
    width:100%;
    }
    .form:before,.form:after{
    content:'';
    height:2px;
    width:0;bottom:1px;
    position:absolute;
    background:#07ACEC;
    transition:.2s ease all;
    }
    .form:before{
    left:50%;
    }
    .form:after{
    right:50%;
    }
    .contact-us input:focus ~ .form:before,.contact-us input:focus ~ .form:after,.contact-us textarea:focus ~ .form:before,.contact-us textarea:focus ~ .form:after{
    width:50%;
    }
    .minimalis{
    position:absolute;
    height:50%;
    width:100px;
    top:25%;
    left:0;
    pointer-events:none;
    opacity:.5;
    }
    .contact-us input:focus ~ .minimalis,.contact-us textarea:focus ~ .minimalis{
    animation:inputminimaliser .3s ease;
    }
    .contact-us input:focus ~ label,.contact-us input:valid ~ label,.contact-us textarea:focus ~ label,.contact-us textarea:valid ~ label{
    top:-20px;
    font-size:13px;
    color:#07ACEC;
    }
    input#ContactForm1_contact-form-email-message{
    height:150px;
    }
    input#ContactForm1_contact-form-submit{
    color:#fff!important;
    height: 50px;
    font-size: 14px;
    font-weight:bold;
    background:#07ACEC;
    padding:15px 25px;
    border-radius:4px;
    border:none;
    outline:none;
    box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
    cursor:pointer;
    transition:all .4s ease-in-out;
    text-transform:uppercase;
    float:left;
    margin-top:15px;
    }
    input#ContactForm1_contact-form-submit:hover{
    box-shadow:0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    }
    input#ContactForm2_contact-form-submit{
    height: 50px;
    font-weight: bold;
    font-size: 14px;
    color:#fff!important;
    background:#07ACEC;
    padding:15px 25px;
    border-radius:4px;
    border:none;
    outline:none;
    box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
    cursor:pointer;
    transition:all .4s ease-in-out;
    text-transform:uppercase;
    float:right;
    margin-top:15px;
    }
    input#ContactForm2_contact-form-submit:hover{
    box-shadow:0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    }
    #ContactForm1_contact-form-error-message{
    float:right;
    background:#D32F2F;
    color:#fff;
    font-size:13px;
    font-weight:700;
    border-radius:3px;
    }
    #ContactForm1_contact-form-success-message{
    float:right;
    background:#4CAF50;
    color:#fff;
    font-size:13px;
    font-weight:700;
    border-radius:3px;
    }
    </style>
    
    <br />
    <br />
    <div class="ribbon">
    <h1 class="ribbon-tampilan">
    <strong class="ribbon-nama">Hubungi Kami</strong>
    </h1>
    <form name="contact-form">
    <div class="contact-us">
    <input class="validate" id="ContactForm1_contact-form-name" name="name" required="" type="text" value="" />
    <span class="minimalis"></span>
    <span class="form"></span>
    <label> Your Name</label>
    </div>
    <div class="contact-us">
    <input class="validate" id="ContactForm1_contact-form-email" name="email" required="" type="email" value="" />
    <span class="minimalis"></span>
    <span class="form"></span>
    <label> Your Email</label>
    </div>
    <div class="contact-us">
    <textarea class="validate" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" required="" rows="5"></textarea>
    <span class="minimalis"></span>
    <span class="form"></span>
    <label> Your Message</label>
    </div>
    <input id="ContactForm1_contact-form-submit" type="button" value="Send" />
    <input id="ContactForm2_contact-form-submit" type="reset" value="Reset" />
    <br />
    <div id="ContactForm1_contact-form-error-message">
    </div>
    <div id="ContactForm1_contact-form-success-message">
    </div>
    </form>
    <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'] = '53970099181xxxxxxx';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogIDx3d53970099181xxxxxxx','//','53970099181xxxxxxx');
    _WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': '<span style="padding:5px 10px">Sending...</span>', 'contactFormMessageSentMsg': '<span style="padding:5px 10px">Your message has been sent.</span>', 'contactFormMessageNotSentMsg': '<span style="padding:5px 10px">Message could not be sent. Please try again later.</span>', 'contactFormInvalidEmailMsg': '<span style="padding:5px 10px">A valid email address is required.</span>', 'contactFormEmptyMessageMsg': '<span style="padding:5px 10px">Message field cannot be empty.</span>', 'title': 'Contact Form', 'blogId': '53970099181xxxxxxx', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
    //]]>
    </script></div>
    <br />
    </div>

    Keterangan :

    Temukan pada kode diatas gunakan (CTRL + F) "53970099181xxxxxxx" silakan anda ganti dengan BlogID kepunyaan anda. Berikut ini adalah cara mencari BlogID :

    Screenshoot :


    4. Simpan Template!

    Demikianlah Tutorial kali ini, bila ada kesalahan? silakan jangan sungka untuk berkomentar dibawah ini. Terakhir, silakan anda lihat atau bisa pratinjau. Lalu kemudian isi dengan nama, email dan pesan yang akan dikirim, kemudian cek email apakah email masuk atau tidak. Sekian dari saya, Semoga Bermanfaat! Thanks for Reading : Cara Membuat Layanan Contact Us di Blogger

    Related Post

    0 Response to "Cara Membuat Layanan Contact Us di Blogger"

    Post a Comment