Pemblokir Iklan Terdeteksi

Matikan adBlock anda untuk dapat mengakses situs ini.

translate to english
LOADING...
Website Masih Dalam Proses Pengembangan. Download Template Jika Anda Berminat.
Download

Cara membuat halaman kontak di blogspot

5 min read
Cara membuat halaman kontak di blog

Halaman kontak di blog sebagai pendukung untuk kelengkapan pada navigasi blog yang terletak sejajar dengan about, disclaimer dan lainnya. Dengan memasang halaman kontak ini kan mempermudah para pengunjung blog untuk berkomunikasi dengan pemilik blog.

Jadi jika pengunjung yang ingin berkomunikasi dengan pemilik blog atau website bisa langsung menuju ke halaman kontak blog atau website. Halaman kontak biasanya terdiri dari nama, email, pesan.

Halaman kontak menjadi salah satu syarat jika ingin mendaftarkan blog atau website Anda ke Google Adsense. Jadi halaman kontak perlu ada di blog atau website Anda. Disini saya akan bagikan cara membuat halaman kontak di blogspot.

Cara Membuat halaman kontak (Step 1)

1. Masuk dashboard blogger
2. Tema > Edit HTML
3. Copas kode css berikut ini diatas ]]></b:skin>

.sidebar #ContactForm1 {display:none}

4.  Selesai, Simpan!
5. Dashboard: Tata Letak > Tambahkan Gadget > Formulir Kontak > Simpan!

Widget kontakMenambah widget kontak

5. Dashboard: Halaman > Halaman baru

Menambah halaman kontak

4. Buat Judul halaman (1) > Ubah menjadi HTML View (2) > Opsi (3,4)
Buat halaman kontak

5. Salin code 

Salin kode dibawah ini, jangan lupa ganti Id blogger dan nama blog sudah ditandai dengan tanda merah dibawah ini.

<style scoped="scoped">
    .bisablog-input {
        float: none;
        position: relative;
        margin-bottom: 45px;
        margin-right: 10px
    }
    .bisablog-input input,
    .bisablog-input textarea {
        font-size: 15px;
        padding: 15px 0;
        display: block;
        width: 100%;
        border: none;
        border-bottom: 1px solid #ddd
    }
    .bisablog-input input:focus,
    .bisablog-input textarea:focus {
        outline: none
    }
    .bisablog-input label {
        color: #999;
        font-size: 15px;
        font-weight: 400;
        position: absolute;
        pointer-events: none;
        left: 0;
        top: 10px;
        transition: .2s ease all
    }
    .bisablog-input input:focus ~ label,
    .bisablog-input input:valid ~ label,
    .bisablog-input textarea:focus ~ label,
    .bisablog-input textarea:valid ~ label {
        top: -20px;
        font-size: 14px;
        color: #546de5
    }
    .bar {
        position: relative;
        display: block;
        width: 100%
    }
    .bar:before,
    .bar:after {
        content: '';
        height: 2px;
        width: 0;
        bottom: 1px;
        position: absolute;
        background: #546de5;
        transition: 1.2s cubic-bezier(1, 0.12, 0.25, 1) all
    }
    .bar:before {
        left: 50%
    }
    .bar:after {
        right: 50%
    }
    .bisablog-input input:focus ~ .bar:before,
    .bisablog-input input:focus ~ .bar:after,
    .bisablog-input textarea:focus ~ .bar:before,
    .bisablog-input textarea:focus ~ .bar:after {
        width: 50%
    }
    .highlight {
        position: absolute;
        height: 50%;
        width: 100px;
        top: 25%;
        left: 0;
        pointer-events: none;
        opacity: .5
    }
    .bisablog-input input:focus ~ .highlight,
    .bisablog-input textarea:focus ~ .highlight {
        animation: inputHighlighter .3s ease
    }
    .bisablog-input input:focus ~ label,
    .bisablog-input input:valid ~ label,
    .bisablog-input textarea:focus ~ label,
    .bisablog-input textarea:valid ~ label {
        top: -20px;
        font-size: 13px;
        color: #546de5
    }
    input#ContactForm1_contact-form-email-message {
        height: 150px
    }
    input#ContactForm1_contact-form-submit {
        width: 100%;
        color: #fff!important;
        background: #546de5;
        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)
    }
    #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>
    <form name="contact-form">
        <div class="bisablog-input">
            <input class="validate" id="ContactForm1_contact-form-name" name="name" required="" type="text" value="" />
            <span class="highlight"></span>
            <span class="bar"></span>
            <label>
                Name
            </label>
        </div>
        <div class="bisablog-input">
            <input class="validate" id="ContactForm1_contact-form-email" name="email" required="" type="email" value="" />
            <span class="highlight"></span>
            <span class="bar"></span>
            <label>
                Email
            </label>
        </div>
        <div class="bisablog-input">
            <textarea class="validate" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" required="" rows="5"></textarea>
            <span class="highlight"></span>
            <span class="bar"></span>
            <label>
                Message
            </label>
        </div>
        <link crossorigin="anonymous" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" rel="stylesheet"></link>
        <input id="ContactForm1_contact-form-submit" type="button" value="Send" />
        <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'] = '1138884915321989014';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogIDx1138884915321989014','//namablogkamu.blogspot.com/','1138884915321989014');
    _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': '6512837267690936704', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
    //]]>
    </script>

Untuk Id blogger sendiri bisa dilihat di dashboard blogger, pada Address bar browser biasanya tertera seperti ini.

https://www.blogger.com/blog/posts/1138884915321989014
6. Paste code > Publikasikan

code membuat form kontak


Menambah halaman kontak di navibar (Step 2)

1. Dashboard: Tata letak > Daftar Halaman (Atas)
2. Masukan nama halaman Anda dan link halaman kontak yang telah Anda buat tadi

Menambah menu kontak

3. Selesai!

Tampian halaman baru

Bisa dilihat diatas bahwa blog sudah memiliki halaman beranda dan kontak, jika ingin tampilan lebih blog menarik, bisa Anda gunakan tema yang lain yang lebih bagus sesuai dengan kebutuhan Anda.

Baca juga halaman-halaman penting: 

Help!
Baca juga :
Semangat berkarya mekipun hasil copy paste!

Blogger : Cerdasin62+

Mau donasi keh?

Paypal
Dana - 0887435373103
Jika dana kalian terlalu banyak bisa beri admin sedikit banyak dana sesuka hati. klik icon panah di atas

You may like these posts

Apakah artikel ini bermanfaat? Silahkan klik bintang di bawah.
Jangan lupa beri komentar.
Komentar.

Post a Comment

Tinggalkan komentar sesuai topik tulisan, centang Notify me untuk mendapatkan notifikasi via email ketika komentar kamu di balas.
Masukkan URL Gambar atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


image quote pre code
CaraTech.

Mampir Juga Ke Blogger caratech.my.id