Cara Membuat halaman Contact Us di Blogger Part-3

Blogger adalah platform CMS yang mudah dioperasikan , Anda tidak perlu menjadi seorang yang ahli untuk mengoperasikan dasbor atau pengaturan. Tetapi dengan kemudahan, ada beberapa keterbatasan, secara default Anda tidak dapat membuat halaman' Contact Us', Anda harus menggunakan plugin pihak ketiga atau harus mengubah widget kontak resmi blogger, sehingga dapat berfungsi pada halaman statis. Membuat halaman terpisah untuk tujuan kontak sangat profesional dan juga membuat blog Anda bersih dengan menyembunyikan widget dan plugin yang tidak perlu.

First Step (Penting)
Sebelum mengikuti tutorial di bawah ini kami sarankan Anda untuk menginstal widget formulir kontak di blog Anda, prosesnya sangat mudah dan dapat dilakukan dalam hitungan menit, dengan klik sederhana. Kami telah menerbitkan tutorial sebelumnya, jadi Anda tidak akan menghadapi kesulitan. Mohon mengikuti Cara Menambahkan Widget Contact Form di Blog Blogger.

Menyembunyikan Widget (Menambahkan CSS)
Sebelum Mengedit kami menyarankan Anda untuk membackup dari template, sehingga apapun yang salah Anda masih memiliki desain blog.

Hal pertama yang perlu Anda lakukan adalah login ke akun Blogger Anda dan masuk ke >> Templates >> Edit HTML dan cari ending ]]> </ b: skin>  tepat di atasnya paste kode berikut.

CSS
.sidebar .widget.ContactForm {
    display: none!important;
}

Membuat Halaman (Menambahkan HTML)
Sebelum Mengedit kami menyarankan Anda untuk membackup dari template, sehingga apapun yang salah Anda masih memiliki desain blog.

Hal pertama yang perlu Anda lakukan adalah login ke akun Blogger Anda dan masuk ke >> Templates >> Edit HTML dan cari ending ]]> </ b: skin>  tepat di atasnya paste kode berikut.

HTML

<style>
#contact{
    background-color:#fff;
    margin:30px 0 !important
}
#contact .contact-form-widget{
    max-width:100% !important
}
#contact .contact-form-name,#contact .contact-form-email,#contact .contact-form-email-message{
    background-color:#FFF;
    border:1px solid #eee;
    border-radius:3px;
    padding:10px;
    margin-bottom:10px !important;
    max-width:100% !important
}
#contact .contact-form-name{
    width:47.7%;
    height:50px
}
#contact .contact-form-email{
    width:49.7%;
    height:50px
}
#contact .contact-form-email-message{
    height:150px
}
#contact .contact-form-button-submit{
    max-width:100%;
    width:100%;
    z-index:0;
    margin:4px 0 0;
    padding:10px !important;
    text-align:center;
    cursor:pointer;
    background:#27ae60;
    border:0;
    height:auto;
    -webkit-border-radius:2px;
    -moz-border-radius:2px;
    -ms-border-radius:2px;
    -o-border-radius:2px;
    border-radius:2px;
    text-transform:uppercase;
    -webkit-transition:all .2s ease-out;
    -moz-transition:all .2s ease-out;
    -o-transition:all .2s ease-out;
    -ms-transition:all .2s ease-out;
    transition:all .2s ease-out;
    color:#FFF
}
#contact .contact-form-button-submit:hover{
    background:#2c3e50
}
#contact .contact-form-email:focus,#contact .contact-form-name:focus,#contact .contact-form-email-message:focus{
    box-shadow:none !important
}
</style>
<div class="contact-form">

<div class="contact section" id="contact" style="display: block;">

<div class="widget ContactForm" id="ContactForm1">

<div class="contact-form-widget">

<div class="form">

<form name="contact-form">

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

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

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

                                <input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send" />

                                <br />

<div style="text-align: center; width: 100%;">

<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">

</div>

<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">

</div>

</div>

</form>

</div>

</div>

</div>

</div>

</div>

,