Ketikan Riyu

KetikanRiyu merupakan blog membahas berbagai hal seperti game, anime, tips trik, tutorial, aplikasi, software, coding, gadget, sosmed, dan sebagainya

Cara Membuat Halaman Contact Responsive di Blogspot

Published Januari 03, 2022
Cara Membuat Halaman Contact Responsive di Blogspot
Membuat Form Kontak di Halaman Contact Blogspot
Contact Form Page Blog - Kamu baru membuat blog di blogspot atau di blogger? Ada beberapa aturan yang harus kamu lakukan supaya blog kamu dapat terindex oleh mbah google.
Seperti membuat navigasi bar untuk mengarahkan pengunjung ke tema artikel yang tepat, dan ada juga navbar untuk mengarahkan pengunjung ke halaman statis blog kamu.

Apa itu halaman statis blog?

Halaman statis blog merupakan suatu artikel namun tujuannya tidak untuk diindex oleh google. Melainkan hanya untuk pelengkap informasi dari blog kamu. Lalu apa saja yang termasuk halaman statis?

Yang merupakan halaman statis antara lain adalah About, Sitemap, Partner, dan Contact.


Nah di artikel Ketikan Riyu kali ini saya akan memberitahukan bagaimana cara membuat halaman contact yang berbentuk formulir.

Fungsi dari halaman kontak apa sih? Fungsinya yang paling utama adalah agar pembaca blog kamu bisa menghubungi kamu apabila dia membutuhkan sesuatu. Semisal dalam hal kerjasama.

Halaman kontak yang akan kita buat akan berbentuk formulir saja, sehingga ketika pembaca mengirim pesan maka pesan tersebut akan masuk ke akun gmail kamu. Lebih profesional dan lebih rapih haha.

Oh ya dengan adanya halaman kontak ini juga membuat blog kamu kemungkinan terima adsensenya lebih besar ketimbang tidak membuat laman kontak.

Manfaat Membuat Halaman Kontak di Blog

1. Terlihat Profesional

Dengan memasang halaman kontak di blog tentunya membuat blog kamu lebih profesional, karena dengan adanya laman kontak membuat pembaca dapat berinteraksi dengan pemilik blog tersebut.

Blog yang terlihat profesional biasanya akan mudah mendapatkan ajakan kerjasama dari beberapa pihak yang ingin bekerjasama. Lumayan cuan cuma modal bikin halaman kontak haha.

2. Privasi Lebih Terjaga

Membuat halaman kontak berupa formulir membuat privasi kita menjadi lebih terjaga. Kenapa begitu? Karena kita tidak perlu menyertakan akun sosial media kita seperti WA maupun IG.

Lalu pesan yang dikirim oleh pengunjung dikirim kemana? Nanti chat atau pesan tersebut akan otomatis masuk ke akun gmail yang sudah kita tentukan sebelumnya.

3. Lebih Efisien

Bagi pengunjung yang ingin mengajak kerjasama dengan blog kita pasti menginginkan sesuatu yang mudah. Tak terkecuali cara menghubungi kita (pemilik blog). Dengan adanya formulir, pengunjung cuma perlu isi form dengan jelas lalu kirim.

Maka secara otomatis pesan tersebut akan langsung tersampaikan ke kita. Gampang kan.

Udah gak perlu lebih lama lagi basa basinya, langsung saja kita masuk ke tutorialnya. Simak di bawah ini ya.

Cara Membuat Form Kontak di Halaman Statis Blogger

1. Pastikan kamu sudah masuk ke dashboard blogger kamu.

2. Klik menu garis 3 di sebelah kiri, lalu klik Halaman.

3. Setelah itu kamu klik tombol tambah di pojok kanan bawah untuk membuat halaman baru.

4. Masukan judul halaman tersebut seperti "Contact".

5. Lalu ubah menjadi tampilan HTML.

6. Copy code di bawah ini lalu tempelkan di halaman contact yang sudah kamu ubah menjadi tampilan HTML barusan.

<div class="enterblogger-logo">
<i class="material-icons md-48">verified_user</i></div>
<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: #546de5;
    padding: 10px;
    background: #dde3ff;
    border-radius: 100px;}
.enterblogger-input{float:none;position:relative;margin-bottom:45px;margin-right: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:#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%}.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:#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="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> Name</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> 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'] = '3594620628883805733';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogIDx3d3594620628883805733','//ketikanriyu.com/','3594620628883805733');
_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': '3594620628883805733', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>

Ubah angka 3594620628883805733 sesuai dengan ID blog kamu, kemudian ganti juga ketikanriyu.com dengan link blog kamu.

7. Terakhir tinggal klik tombol publikasikan

Kalau kurang paham, bisa liat gambar di paling atas saja. Atau bisa chat saya melalui halaman kontak yang sudah saya sediakan.


Untuk tampilan pesan masuk ke akun gmail kita akan tampil seperti di bawah ini.

Contoh pesan masuk dari form contact


Oke cukup sekian artikel dari Ketikan Riyu mengenai cara membuat halaman formulir kontak responsive di blogspot. Semoga artikel ini membantu. Oh ya kodenya saya ngambil dari blog droidide.

Posting Komentar

[ADS] Bottom Ads

Menu Halaman Statis

Copyright © 2021