Home

Cara Membuat Halaman Kontak Email

Aaron Buitenxorg
Aaron Buitenxorg 1 comment
Bagian kontak email diblogger adalah sebuah bagian yang sangat penting untuk dibuat, supaya pengunjung selalu bisa berkomunikasi dengan kita secara pribadi.

Fungsi Halaman Kontak Email

  1. Sebagai wadah menerima masukan, laporan, dan kritikan.
  2. Syarat diterimanya situs kita oleh google adsence.
  3. Sebagai cara berkomunikasi secara personal, rahasia, dan aman.
  4. Sebagai tempat menjalin hubungan kerja sama bisnis dan sponsorship.

Cara Membuat Halaman Kontak Email

Ada 3 langkah untuk membuat halaman kontak email, diantaranya :

Langkah 1: Temukan ID Blog

  1. Buka dashboard blogger.
  2. Perhatikan bagian Address Bar browser anda untuk menemukan ID url seperti ini
    https://draft.blogger.com/blog/posts/1234567890123456789

  3. Bagian yang saya tandai warna biru adalah bagian ID blog nya, jumlahnya ada 19 angka.
  4. Salin ID Blog anda karena nanti akan dibutuhkan

Langkah 2: Membuat Halaman Baru

  1. Buka dashboard Blogger.
  2. Tekan Halaman
  3. Tekan + Halaman Baru
  4. Isi kolom Judul dengan nama Kontak
  5. Tekan logo Pensil, pilih < > Tampilkan HTML
  6. Lalu salin code dibawah ini dan pastekan
<div style="text-align: left;">Jika Anda berniat untuk menawarkan kerjasama atau menjalin bisnis, silakan hubungi kami melalui kontak email di bawah</div><br />
<style>
/* css form kontak blogger design by wendy */
.saiful-kntk-frm{position:relative;display:inline-block;width:100%;max-width:100%;padding:30px 10px 10px 10px;background-color:#f2f3f7;border-radius:10px;box-shadow: 0 2px 8px 0 rgb(0 0 0 / 30%)}
.saiful-dt-inp{position:relative;margin-bottom:30px;margin-right:5px}
.saiful-dt-inp input[type=text]::placeholder,.saiful-dt-inp textarea::placeholder{color:#999!important;font-size:14px}
.saiful-dt-inp input:focus::placeholder,.saiful-dt-inp textarea:focus::placeholder {color: transparent!important}
.saiful-dt-inp label{border-radius:10px;color:#999;font-size:12px;font-weight:400;position:absolute;pointer-events:none;left:30px;top:-15px;transition:.2s ease all;padding:0 10px;background-color:#f2f3f7;box-shadow:-3px -2px 4px rgb(255 255 255 / 90%), 5px 5px 8px rgb(0 0 0 / 7%);display:none}
.saiful-dt-inp input[type=text]:focus + label,.saiful-dt-inp input[type=text].show + label,.saiful-dt-inp textarea:focus + label,.saiful-dt-inp textarea.show + label{display:block;}
.saiful-dt-inp input[type=text],.saiful-dt-inp textarea,.saiful-dt-inp.outset input[type=button]{background-color:#f2f3f7;box-shadow: inset 0.2rem 0.2rem 0.5rem rgb(0 0 0 / 7%), inset -0.2rem -0.2rem 0.5rem rgb(255 255 255 / 90%);padding:15px 15px 15px 40px;border-radius:5px;border:none;outline:none;width:100%}
.saiful-dt-inp.outset input[type=button]{background-color:#f2f3f7;box-shadow: -3px -2px 4px rgb(255 255 255 / 90%), 5px 5px 8px rgb(0 0 0 / 7%);width: 100px;text-align: center;padding-left:25px;margin: -50px auto;color:#999;font-weight:bold;font-size:20px}
.saiful-dt-inp.outset input[type=button]:active {box-shadow: inset 0.2rem 0.2rem 0.5rem rgb(0 0 0 / 7%), inset -0.2rem -0.2rem 0.5rem rgb(255 255 255 / 90%)}
.saiful-dt-inp input[type=text]:active,.saiful-dt-inp input[type=text]:focus,.saiful-dt-inp textarea:active,.saiful-dt-inp textarea:focus{outline:none}
.saiful-knt-notif{color:#ff0000} 
.saiful-dt-inp.icon-user:before{content:"";position:absolute;left:10px;top:0;bottom:0;width:20px;background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 24 24' fill='%23aaaaad'><path d='M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z'></path></svg>") center / contain no-repeat}
.saiful-dt-inp.icon-email:before{content:"";position:absolute;left:10px;top:0;bottom:0;width:20px;background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 24 24' fill='%23aaaaad'><path d='M20,8L12,13L4,8V6L12,11L20,6M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4Z'></path></svg>") center / contain no-repeat}
.saiful-dt-inp.icon-msg:before{content:"";position:absolute;left:10px;top:-36px;bottom:0;width:20px;background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 24 24' fill='%23aaaaad'><path d='M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H10V20.09L12.09,18H6V16H14.09L16.09,14H6V12H18.09L20,10.09V8L14,2H6M13,3.5L18.5,9H13V3.5M20.15,13C20,13 19.86,13.05 19.75,13.16L18.73,14.18L20.82,16.26L21.84,15.25C22.05,15.03 22.05,14.67 21.84,14.46L20.54,13.16C20.43,13.05 20.29,13 20.15,13M18.14,14.77L12,20.92V23H14.08L20.23,16.85L18.14,14.77Z'></path></svg>") center / contain no-repeat}
  
  
  /* css darkmode sesuaikan class ( .drK ) dengan template yang kalian gunakan agar dapat berfungsi */
.drK .saiful-kntk-frm,.drK .saiful-dt-inp label,.drK .saiful-dt-inp input[type=text],.drK .saiful-dt-inp textarea,.drK .saiful-dt-inp.outset input[type=button]{background-color:#2d2d30;color:#aaaaad}
.drK .saiful-dt-inp input[type=text],.drK .saiful-dt-inp textarea,.drK .saiful-dt-inp.outset input[type=button]:active{box-shadow: inset 0.2rem 0.2rem 0.5rem rgb(36 36 36), inset -0.2rem -0.2rem 0.5rem rgb(32 32 32)}
.drK .saiful-dt-inp.outset input[type=button],.drK .saiful-dt-inp label{box-shadow:-3px -2px 4px rgb(36 36 36), 5px 5px 8px rgb(32 32 32)}
</style>
  
    
<div class="saiful-kntk-frm" id="ContactForm1">
<form name="ContactForm">
<div class="saiful-dt-inp icon-user">
<input id="ContactForm1_contact-form-name" name="name" type="text" />
<label>Nama</label>
</div>
<div class="saiful-dt-inp icon-email">
<input id="ContactForm1_contact-form-email" name="email" type="text" />
<label>Email</label>
</div>
<div class="saiful-dt-inp icon-msg">
<textarea id="ContactForm1_contact-form-email-message" name="message" rows="3"></textarea>
<label>Pesan</label>
</div>
<div class="saiful-dt-inp outset">
<input id="ContactForm1_contact-form-submit" type="button" value="Kirim" />
</div>
<div class="saiful-knt-notif">
<div id="ContactForm1_contact-form-error-message"></div>
<div id="ContactForm1_contact-form-success-message"></div>
</div>
</form>
</div>

<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js"></script>
<script>
/*
ubah 000000000000000000 dengan blog id milik mu ada 4 yang harus di ubah
ubah www.domainmu.com dengan domain milikmu
source code : https://median-ui.jagodesain.com
*/

if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) {
    window['blogger_templates_experiment_id'] = 'templatesV1';
    window['blogger_blog_id'] = '000000000000000000';
    BLOG_attachCsiOnload('');
}
_WidgetManager._Init('//www.blogger.com/rearrange?blogID\000000000000000000', '//detikzon.blogspot.com/', '000000000000000000');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {
    'contactFormMessageSendingMsg': 'Mengirim...',
    'contactFormMessageSentMsg': 'Pesan Anda telah dikirim..',
    'contactFormMessageNotSentMsg': 'Pesan tidak dapat dikirim. Silakan coba lagi nanti.',
    'contactFormInvalidEmailMsg': 'Diperlukan alamat email yang valid.',
    'contactFormEmptyMessageMsg': 'Bidang pesan tidak boleh kosong.',
    'title': 'Contact Form',
    'blogId': '000000000000000000',
    'contactFormNameMsg': 'Name',
    'contactFormEmailMsg': 'Email',
    'contactFormMessageMsg': 'Message',
    'contactFormSendMsg': 'Send',
    'submitUrl': 'https://www.blogger.com/contact-form.do'
}, 'displayModeFull'));
  
var inputs = document.querySelectorAll('.saiful-dt-inp input[type=text], .saiful-dt-inp input[type=email], .saiful-dt-inp textarea');
for (var i = 0; i < inputs.length; i++) {
    var input = inputs[i];
    input.addEventListener('input', function() {
        var bg = this.value ? 'show' : 'none';
        this.setAttribute('class', bg);
    });
}
</script><br />

Langkah 3: Mengganti Semua Kode

  • Ganti 000000000000000000 dengan ID Blog kalian
  • Ganti detikzon.blogspot.com dengan alamat url blog kalian
  • Untuk semua tulisan lain yang ditandai dengan warna hijau, boleh diganti sesuai keinginan

Langkah 4: Mempublikasikan

Setelah semua kode yang ditandai pake warna udah diganti, tinggal publikasikan

Tambahan

Ada kode CSS yang harus di edit di dalam template setelah menerapkan keempat langkah di atas, yaitu:
  1. Buka Blogger
  2. Tekan Tema 
  3. Pilih Edit HTML 
  4. Cari kode ini
    
.blogContent .widget input[type=text], .blogContent .widget input[type=email], .blogContent .widget textarea
  5. Maka kalian akan menemukan kode seperti ini
    
.blogContent .widget input[type=text], .blogContent .widget input[type=email], .blogContent .widget textarea{display:block;width:100%;border:1px solid rgba(230,230,230,1);border-radius:2px;outline:0;padding:15px 15px;margin-bottom:15px}
  6. Tambahkan kode 15px 35px di ujung kode padding:15px 15px, maka hasilnya jadi seperti ini
    
.blogContent .widget input[type=text], .blogContent .widget input[type=email], .blogContent .widget textarea{display:block;width:100%;border:1px solid rgba(230,230,230,1);border-radius:2px;outline:0;padding:15px 15px 15px 35px;margin-bottom:15px}
  7. Simpan Tema
Dan itulah cara membuat halaman kontak email yang terbaru semoga artikel ini bermanfaat.

Baca juga

1 comment

Post a Comment