Cara Membuat Halaman Kontak di Blogger

Cara Membuat Halaman Kontak di Blogger

DailyBlog.id - Buat halaman kontak di Blogger tidaklah sulit, bisa dibilang sangat mudah sekali. Saya pernah bertanya, apakah bisa buat halaman kontak di Blogger? jawabannya iya bisa. Pada artikel kali ini tentu saja saya akan membagikan tutorial pada kalian semua untuk membuat halaman kontak. Halaman kontak ini sangatlah perlu dan dibutuhkan untuk para Blogger. Karena dengan adanya halaman kontak ini, pengunjung bisa menghubungi melalui form yang ada. Ntah itu menghubungi kalau ada artikel yang kurang jelas, link bermasalah, dll. Maka dari itu ada baiknya harus buat halaman kontak di blog.

Untuk langkah-langkahnya, kalian bisa ikuti di bawah ini.

Membuat Halaman Kontak di Blogger

1. Langkah pertama, kalian bisa Sign In pada akun Blogger. Lalu menuju pada menu Halaman di sidebar sebelah kiri.

2. Setelah itu kalian bisa tambahkan Halaman Baru, kalian bisa beri nama halamannya "Kontak" (contoh saja).

3. Setelah itu untuk isi dari konten halamannya, kalian bisa copy script yang ada di bawah ini.

<div class="ContactForm" id="ContactForm1">
    <form name="contact-form">
        <div class="input-area">
            <label>Your Name <span style="color: red;">*</span></label>
            <input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" type="text" value="" />
        </div>
            
        <div class="input-area">
            <label>Email <span style="color: red;">*</span></label>
            <input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" type="text" value="" />
        </div>
        
        <div class="input-area">
            <label>Message <span style="color: red;">*</span></label>
            <textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" rows="10" style="resize: none;"></textarea>
        </div>
        
        <div class="input-area">
            <input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Kirim" />
        </div>
        
        <div class="notif-area">
            <p class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></p>
            <p class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></p>
        </div>
    </form>
</div>

<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js"></script>
<script>
    //<![CDATA[
    const blogId = '7087250268933534437';
    const blogUrl = '//www.dailyblog.id';
    if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) 
    {
        window['blogger_templates_experiment_id'] = 'templatesV1';
        window['blogger_blog_id'] = blogId;
        BLOG_attachCsiOnload(''); 
    }

    _WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d' + blogId, blogUrl, blogId);
    _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': blogId, 
        'contactFormNameMsg': 'Name', 
        'contactFormEmailMsg': 'Email', 
        'contactFormMessageMsg': 'Message', 
        'contactFormSendMsg': 'Send', 
        'submitUrl': 'https://www.blogger.com/contact-form.do'
    }, 'displayModeFull'));
    //]]>
</script>


Kalian bisa ubah isi dari variabel blogId dan blogUrl, sesuai dengan id dan url blog kalian. Jika kalian belum mengetahui id blog kalian. Kalian bisa lihat URL dari browser kalian, seperti contoh berikut ini:

https://www.blogger.com/blog/page/edit/id_blog/id_halaman

Nah untuk id blog, kalian bisa copy melalui link dari Blogger. Seperti yang sudah saya contohkan di atas.

Nanti tampilannya akan seperti ini, jika sudah disimpan.

 1 - Cara Membuat Halaman Kontak di Blogger


4. Setelah itu klik "Publikasikan" agar bisa dilihat nantinya.

5. Setelah itu kalian bisa klik icon "mata" di bagian halaman yang telah kalian buat.

6. Dan halaman kontak berhasil dibuat, untuk contoh hasil yang telah dibuat. Kalian bisa lihat pada thumbnail artikel ini.

Atau juga bisa lihat pada halaman kontak pada blog ini.

https://www.dailyblog.id/p/contact.html


Itu dia cara buat halaman kontak di Blogger, sangat mudah kan? tentu saja mudah sekali. Dengan adanya halaman kontak, nantinya pengunjung dapat menghubungi kalian melalui email yang sesuai dengan pengaturan email Blogger kalian. Dan untuk hasil test kirim emailnya seperti ini.

2 - Cara Membuat Halaman Kontak di Blogger


Mungkin cukup sekian artikel tutorial dari saya. Semoga artikel yang saya berikan ini dapat bermanfaat bagi kalian semuanya. Jika saya ada salah pengetikan, saya mohon maaf. Sekian dan terima kasih.

Selamat mencoba!...

Post a Comment (0)
Previous Post Next Post