Halaman kontak adalah aspek penting dari sebuah blog. Tidak semua pesan yang pembaca kirimkan dapat dilakukan melalui kolom komentar, contohnya ajakan kerjasama atau kolaborasi. Untuk pesan-pesan sejenis tersebut tentu butuh diskusi yang sifatnya tertutup.
Oleh karena itu, kamu harus tahu cara membuat halaman kontak di Blogger agar bisa memberikan ruang bagi pembaca untuk mengirimkan pesan secara personal. Tenang saja, artikel ini akan memberikan panduan lengkap melakukannya kepada mu. Yuk lanjut ke bagian intinya!
Cara Membuat Halaman Kontak di Blogger
Apa yang membuat cara ini menarik adalah kita hanya akan menggunakan HTML dan CSS pada halaman statis saja. Jadi, kamu tidak perlu merubah apapun dari Tema blog mu yang dapat berpotensi memunculkan error ataupun memperlambat loading blog.
Ikuti langkah berikut ini ya,
- Buka tab Halaman di dasbor Blogger
- Buat halaman baru
- Pilih opsi penulisan HTML dan masukkan kode berikut ini,
<style scoped="scoped">
.enterblogger-logo{text-align:center;}
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v12/2fcrYFNaTjcS6g4U3t-Y5ewrjPiaoEww8AihgqWRJAo.woff) format('woff'), url(https://fonts.gstatic.com/s/materialicons/v12/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2'), url(https://fonts.gstatic.com/s/materialicons/v12/2fcrYFNaTjcS6g4U3t-Y5bbKic1PW3nceB3q24YFOMg.ttf) format('truetype');
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: inherit;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
vertical-align:middle;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: 'liga';
}
.md-48{font-size: 100px;
color: #FF1744;
padding: 10px;
background: #dde3ff;
border-radius: 100px;}
.enterblogger-input{float:none;position:relative;margin-bottom:45px;margin-
:10px}.enterblogger-input input,.enterblogger-input textarea{font-size:15px;padding:15px 0;display:block;width:100%;border:none;border-bottom:1px solid #ddd}.enterblogger-input input:focus,.enterblogger-input textarea:focus{outline:none}.enterblogger-input label{color:#999;font-size:15px;font-weight:400;position:absolute;pointer-events:none;left:0;top:10px;transition:.2s ease all}.enterblogger-input input:focus ~ label,.enterblogger-input input:valid ~ label,.enterblogger-input textarea:focus ~ label,.enterblogger-input textarea:valid ~ label{top:-20px;font-size:14px;color:#FF1744}.bar{position:relative;display:block;width:100%}.bar:before,.bar:after{content:'';height:2px;width:0;bottom:1px;position:absolute;background:#FF1744;transition:1.2s cubic-bezier(1, 0.12, 0.25, 1) all}.bar:before{left:50%}.bar:after{right:50%}.enterblogger-input input:focus ~ .bar:before,.enterblogger-input input:focus ~ .bar:after,.enterblogger-input textarea:focus ~ .bar:before,.enterblogger-input textarea:focus ~ .bar:after{width:50%}.highlight{position:absolute;height:50%;width:100px;top:25%;left:0;pointer-events:none;opacity:.5}.enterblogger-input input:focus ~ .highlight,.enterblogger-input textarea:focus ~ .highlight{animation:inputHighlighter .3s ease}.enterblogger-input input:focus ~ label,.enterblogger-input input:valid ~ label,.enterblogger-input textarea:focus ~ label,.enterblogger-input textarea:valid ~ label{top:-20px;font-size:13px;color:#FF1744}
input#ContactForm1_contact-form-email-message{height:150px}
input#ContactForm1_contact-form-submit{width:100%;color:#fff!important;background:#FF1744;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:#FF1744;color:#fff;font-size:13px;font-weight:700;border-radius:3px}#ContactForm1_contact-form-success-message{float:right;background:#FF1744;color:#fff;font-size:13px;font-weight:700;border-radius:3px}
</style>
<form name="contact-form">
<div class="enterblogger-input">
<input class="validate" id="ContactForm1_contact-form-name" name="name" required="" type="text" value="" />
<span class="highlight"></span>
<span class="bar"></span>
<label><i class="material-icons">
account_circle
</i> Nama</label></div>
<div class="enterblogger-input">
<input class="validate" id="ContactForm1_contact-form-email" name="email" required="" type="email" value="" />
<span class="highlight"></span>
<span class="bar"></span>
<label><i class="material-icons">
contact_mail
</i> Email</label></div>
<div class="enterblogger-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><i class="material-icons">
message
</i> Pesan</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="Kirim" />
<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'] = '1111122222333334444';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogIDx3d1111122222333334444','//namablogmu.com/','1111122222333334444');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': '<span style="padding:5px 10px">Mengirim...</span>', 'contactFormMessageSentMsg': '<span style="padding:5px 10px">Pesan mu telah terkirim.</span>', 'contactFormMessageNotSentMsg': '<span style="padding:5px 10px">Pesan mu gagal terkirim. Cobalah beberapa saat lagi.</span>', 'contactFormInvalidEmailMsg': '<span style="padding:5px 10px">Alamat email yang kamu masukkan tidak valid.</span>', 'contactFormEmptyMessageMsg': '<span style="padding:5px 10px">Message field cannot be empty.</span>', 'title': 'Contact Form', 'blogId': '1111122222333334444', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>
Ubah kode bloggeridxxxxxxxxxxxx dengan ID Blogger mu dan namablogmu.com dengan alamat blog mu.
ID Blogger dapat kamu peroleh dari URL saat kamu berada di dasbor Blogger, contohnya sepertihttps://www.blogger.com/u/blog/posts/1111122222333334444. Angka yang Gubuk Pintar tandai merupakan ID Blogger mu. - Publikasikan halaman
Menggunakan cara ini akan membawa pesan yang dikirim melalui formulir tersebut masuk ke inbox email dari akun Blogger yang kamu gunakan (kamu bisa mengubahnya dengan mengatur admin blog). Oleh karena itu, setelah kamu mempublikaskan halaman, uji coba terlebih dahulu formulirnya.
Baca Juga: Cara Membuat Tombol Show Hide Komentar di Blogger
Apabila kamu tidak menemukan pesan hasil uji coba di inbox email mu, maka ada 2 kemungkinan yang bisa saja terjadi yaitu:
- Blogger ID atau alamat blog mu salah. Cek kembali dan pastikan kamu sudah melakukannya sesuai dengan cara membuat halaman kontak Blogger diatas.
- Cek kotak spam email mu, pesan dari Blogger terkadang akan dianggap sebagai spam.
Contoh dari cara membuat halaman kontak di Blogger pada halaman statis ini bisa dilihat pada halaman kontak yang Gubuk Pintar miliki.
Penutup
Seperti itulah cara membuat halaman kontak di Blogger pada halaman statis. Halaman kontak merupakan hal yang penting untuk sebuah blog karena pesan yang disampaikan bersifat personal dan lebih fleksibel.
***
Apabila
memiliki pertanyaan seputar artikel Cara Membuat Halaman Kontak di Blogger, silahkan tulis dikolom komentar ya.
Bila artikel ini bermanfaat, bantu Gubuk Pintar menyebarkan manfaatnya dengan membagikan artikel ini ke sosial media mu melalui tombol share di bawah ini. Terimakasih orang baik!
Bila artikel ini bermanfaat, bantu Gubuk Pintar menyebarkan manfaatnya dengan membagikan artikel ini ke sosial media mu melalui tombol share di bawah ini. Terimakasih orang baik!
0 komentar:
Posting Komentar