Cara Mudah Menambahkan Halaman Kontak di Blogspot

Cara Mudah Menambahkan Halaman Kontak di Blogspot

 Cara Mudah Menambahkan Halaman Kontak di Blog - Hai sobat Blogger, pada kesempatan kali ini Jagoan Web akan memberikan tutorial tentang cara membuat halaman kontak keren di blog. Halaman kontak merupakan halaman yang wajib ada di sebuah blog. Halaman ini nanti akan berisi tentang cara pengunjung agar dapat menghubungi pemilik blog (admin). Biasanya halaman kontak berbentuk sebuah form yang terdiri dari nama, email dan isi pesan.

Nah dari pada penasaran, langsung saja mari kita buat halaman kontak di blog dengan mudah. 


Pengertian Halaman Kontak

Halaman Kontak merupakan halaman yang wajib ada di blog selain halaman Tentang KamiSitemapDisclaimer dan Kebijakan Privasi. Halaman ini biasanya berisikan sebuah form yang digunakan untuk mengirimkan pesan ke pemilik blog atau admin blog.

Dalam kamus bahasa indonesia "Kontak" adalah sebuah halaman yang mana bertujuan untuk menghubungkan pengunjung blog dengan pemilik blog agar dapat berbagi pesan. Pada intinya Kontak ini digunakan apabila pengunjung blog ingin memberitahukan kepada pemilik blog apabila ada bagian blog yang rusak ataupun bisa juga pengunjung blog ingin memasang iklan diblog jadi harus ke halaman kontak dulu.

Keuntungan Menambah Halaman Kontak di Blog 

Sebelum membuat halaman Kontak ada baiknya kalian mengetahui terlebih dahulu keuntungan dari halaman Kontak. Berdasarkan apa yang saya ketahui keuntungan dari halaman Kontak adalah :

  1. Mempermudah pengunjung memberitahu pemilik blog apabila ada halaman blog yang error agar diperbaiki.
  2. Mempermudah pengunjung untuk memberikan kritik dan saran.
  3. Mempermudah pemasang iklan yang ingin memasang iklannya di blog. 

Cara Mudah Membuat Halaman Kontak di Blog


Setalah mengetahui pentingnya halaman Kontak, mari kita mulai membuatnya. Caranya sangat mudah sekali.
1. Silahkan buka blogger.com
2. Masuk akun kalian masing-masing.
3. Pergi ke menu Halaman.
4. Pilih Halaman Baru.
Cara Mudah Menambahkan Halaman Kontak di Blogspot

5. Setelah terbuka, silahkan isi judul dengan tulisan Kontak



6. Ubah tampilan dari tampilan menulis ke tampilan HTML.

Cara Mudah Menambahkan Halaman Kontak di Blogspot


7. Copy teks dibawah ini ke tempat yang sudah disediakan.

<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'] = '8557372343144511552';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogIDx3d8557372343144511552','//jagoanweb.net/','8557372343144511552');
_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': '8557372343144511552', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>

Ganti kata warna biru dengan alaman blog kalian. Sedangkan warna orange ganti dengan kode blog kalian.

Cara Mudah Menambahkan Halaman Kontak di Blogspot
Kode Blog

8. Langkah terakhir klik Publikasikan.

Untuk tampilan dari Halaman Kontak dapat kalian lihat disini.

Langkah-langkah diatas mudah bukan? Demikianlah informasi yang dapat saya sampaikan tentang Cara Mudah Menambahkan Halaman Kontak di Blogspot. Semoga artikel ini dapat bermanfaat untuk kalian semua. 


Komentar
Silahkan, saya ga nggigit !