Cara membuat contact di blogger yang menarik dan dinamis

 

Tujuan :

1. Memudahkan para pengguna untuk memberikan pesan kepada admin untuk berkomunikasi
2. Memberikan kesan menarik kepada pengunjung/pengguna dalam blogger
3. Sebagai syarat monetisasi blogger kepada google

Sekilas tentang contact 

Mengapa contact perlu dibuat di blogger ?

Seperti diuraikan di tujuan, bahwa komunikasi antara pengunjung dan admin harus berjalan dua arah agar memudahkan pengunjung, manakala ada keinginan yang belum tersampaikan kepada admin. Namun dalam rangka menjalin komunikasi, pengunjung bisa juga menggunan komentar, hal ini sangat membantu admin untuk meningkatkan pelayanan keapda pengunjung apa yang ingin disampikannya.

Seperti gambar diatas, kami mengajak para pembaca atau pengunjung untuk berbagi cara membuat kontak yang menarik dan dinamis. Untuk itu mari kita mulai cara membuatnya.

Cara membuatnya :

1. Buka blogger dan login email gmail

2. Klik Halaman Baru

3. Ketik judulnya : Contact

4. Pilih tampilan HTML

5. Isikan script HTML seperti dibawah ini ( anda bisa copy paste )

<style>

/* Responsive halaman kontak */

#comments,.post_meta,#blogpager {

    display:none

}

form {

    color:#666

}

#kontak {

    width:100%;

}

#ContactForm1_contact-form-name,#ContactForm1_contact-form-email {

    background-color:#fff;

    border-radius:2px;

    color:#333;

    -moz-box-sizing:border-box;

    display:block;

    float:none;

    font-size:16px;

    border:1px solid #ccc;

    padding:6px 10px;

    height:38px;

    width:60%;

    line-height:1.3;

    margin-bottom:20px;

}

#ContactForm1_contact-form-email-message {

    background-color:#fff;

    border-radius:2px;

    color:#333;

    -moz-box-sizing:border-box;

    box-sizing:border-box;

    display:block;

    float:none;

    font-size:16px;

    border:1px solid #ccc;

    padding:6px 10px;

    height:175px;

    width:100%;

    line-height:1.3;

    margin:20px auto;

}

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

    background:#ff6200 !important;

    text-transform:uppercase !important;

    border:0px !important;

    cursor:pointer;

    color:#fff !important;

    padding:12px 22px !important;

    border-radius:3px !important;

    font-weight:700;

    letter-spacing:1px!important;

}

#ContactForm1_contactformsubmit:hover {

    background:#ea6a1b;

    color:#fff

}

#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message {

    width:100%;

    margin-top:35px

}

.contact-form-error-message-with-border {

    background:#ea6a1b;

    border:none;

    box-shadow:none;

    color:#fff;

    padding:5px 0

}

.contactform-successmessage {

    background:#4fc3f7;

    border:none;

    box-shadow:none;

    color:#fff

}

img.contact-form-cross {

    line-height:40px;

    margin-left:5px

}

.post-body input {

    width:initial

}

@media only screen and (max-width:640px) {

    #ContactForm1_contact-form-submit {

        width:100%

    }

    #ContactForm1_contact-form-name,#ContactForm1_contact-form-email {

        width: 50% auto;

    }

}

</style>

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

    <input id="ContactForm1_contact-form-name" name="name" placeholder="Name *" size="30" type="text" value="" /><input id="ContactForm1_contact-form-email" name="email" placeholder="Email *" size="30" type="text" value="" /><textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message *" rows="5"></textarea><input id="ContactForm1_contact-form-submit" type="button" value="Submit" /><br />

    <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" 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'] = '123456789';

        BLOG_attachCsiOnload('');

    }

    _WidgetManager._Init('//www.blogger.com/rearrange?blogIDx3d123456789', 'https://namabloganda.blogspot.com', 'ID-BLOG');

    _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': '123456789',

        'contactFormNameMsg': 'Name',

        'contactFormEmailMsg': 'Email',

        'contactFormMessageMsg': 'Message',

        'contactFormSendMsg': 'Send',

        'submitUrl': 'https://www.blogger.com/contact-form.do'

    }, 'displayModeFull')); //]]>

</script>

6. Script diatas anda copy dan pastekan kehalam isi kontak, lihat gambar dibawah ini

Catatan : Lihat script diatas

7. Anda ganti yang berwarna merah

    id                       : isinya id anda

    namabloganda : isinya ganti nama blog anda

    untuk mengisi id anda, bisa dilihat dibagian lihat gambar dibawah ini 

Yang diberi tanda ceklst itu idnya, nah silahkan anda ganti sesuai id masing-masing.

8. Klik update atau perbarui

9. Test hasilnya

SELESAI

Demikian cara membuat kontak yang menarik dan dinamis

Semoga bermanfaat.

Salam Hangat

Jaenudin Kreatif