Cara Membuat Halaman About, Contact, Privacy , Disclaimer, TOS dan Sitemap

Salah satu syarat utama agar Blog Anda disetujui oleh Google Adsense untuk penayangan Iklan adalah dengan menampilkan halaman About, Kontak, Disclaimer, Privacy, TOS (Terms of Service) dan Sitemap.
Oleh karena itu, pada tips blog #2 ini kita akan belajar Cara Membuat Halaman-halaman tersebut di Blog sebagai berikut ini.

1. Cara Membuat Halaman About (Tentang) di Blog

Seperti yang anda lihat pada halaman About Blog JuliKoding, halaman about berisi perkenalan diri dan tujuan yang ingin dicapai, serta konten-konten apa saja yang akan dibahas oleh Blogger tersebut. Kalian dapat memberikan informasi singkat tentang Blog Anda.

2. Cara Membuat Halaman Contact (Kontak) Blog

Selain kolom Komentar, ada cara lain untuk pengunjung dapat berkomunikasi ke admin Blog yaitu Halaman Kontak. Halaman Kontak ini sangat penting dan bermanfaat bagi Admin Blog ataupun Pengunjung Blog tersebut. Karena segala kritik dan saran dapat anda curahkan melalui halaman ini.

Untuk Membuat Halaman Kontak yaitu Buka Dashboard Blog - Laman - Laman Baru - Pada Mode HTML, copy dan pastekan kode di bawah ini...

<p>Silahkan isi form di bawah ini untuk menghubungi admin Juli Koding. Jika tidak ada halangan dan kesibukan lainnya, admin akan langsung merespon pesan yang Anda kirimkan. </p>
<style scoped="scoped">
.post-outer {background: #fff}
.post-footer {display: none}
#contactForm .floating-label-form-group {
  font-size: 14px;
  position: relative;
  margin-bottom: 0;
  padding-bottom: 20px;
  border-bottom: 1px solid #ddd;}
#contactForm .floating-label-form-group.floating-label-form-group-with-focus {position: relative;}
#contactForm .floating-label-form-group:before {
  display: block;
  position: absolute;
  right: 50%;
  bottom: -1px;
  width: 0;
  height: 2px;
  background-color: #0400bf;
  content: "";
  transition: width 0.4s ease-in-out;
}
#contactForm .floating-label-form-group:after {
  display: block;
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 0;
  height: 2px;
  background-color: #0400bf;
  content: "";
  transition: width 0.4s ease-in-out;
}
#contactForm .floating-label-form-group.floating-label-form-group-with-focus:before,
#contactForm .floating-label-form-group.floating-label-form-group-with-focus:after {
  width: 50%;
}
#contactForm .floating-label-form-group input,
#contactForm .floating-label-form-group textarea {
  z-index: 1;
  position: relative;
  padding-right: 0;
  padding-left: 0;
  border: none;
  border-radius: 0;
  font-size: 18px;
  font-family: "Helvetica", "Arial", sans-serif;
  font-weight: lighter;
  background: none;
  box-shadow: none !important;
  resize: none;
}
#contactForm .floating-label-form-group label {
  display: block;
  z-index: 0;
  position: relative;
  top: 2em;
  margin: 0;
  font-size: 12px;
  font-family: "Helvetica", "Arial", sans-serif;
  font-weight: lighter;
  line-height: 1.764705882em;
  vertical-align: middle;
  vertical-align: baseline;
  opacity: 0;
  -webkit-transition: top 0.3s ease, opacity 0.3s ease;
  -moz-transition: top 0.3s ease, opacity 0.3s ease;
  -ms-transition: top 0.3s ease, opacity 0.3s ease;
  transition: top 0.3s ease, opacity 0.3s ease;
}
#contactForm .floating-label-form-group::not(:first-child) {
  padding-left: 14px;
  border-left: 1px solid #eeeeee;
}
#contactForm .floating-label-form-group-with-value label {
  top: 0;
  opacity: 1;
}
#contactForm .floating-label-form-group-with-focus label {
  color: #0400bf;
}
#contactForm {
  border-top: 1px solid #ddd;
}
#contactForm textarea.form-control {
  height: auto;
}
#contactForm .form-control {
  display: block;
  width: 100%;
  color: #555;
}
#contactForm input:focus,
#contactForm input:active,
#contactForm textarea:focus,
#contactForm textarea:active {
  outline: none;
}
#contactForm .btn,
#contactForm .contact-form-button-submit {
  font-family: "Helvetica", "Arial", sans-serif;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1px;
  border-radius: 0;
  padding: 0 25px;
  height: 51px;
  line-height: 51px;
  color: #333;
  background-color: #fff;
  border: 1px solid #ccc;
  cursor: pointer;
  margin: 20px 0 0;
  background-image: none;
}
#contactForm .contact-form-button {
  height: 51px;
  line-height: 51px;
}
#contactForm .btn-default:hover,
#contactForm .btn-default:focus,
#contactForm .contact-form-button-submit:hover,
#contactForm .contact-form-button-submit:focus {
  background-color: #0400bf;
  border: 1px solid #0400bf;
  color: white;
}
.contact-form-error-message-with-border,
.contact-form-success-message-with-border {
  background: #fff;
  border: 1px solid #ddd;
  bottom: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
  color: #666;
  font-size: 16px;
  font-weight: normal;
  line-height: 30px;
  margin-left: 0;
  opacity: 1;
  position: static;
  text-align: center;
  margin: 20px 0 0;
}
.contact-form-cross {
  height: 11px;
  margin: 0 5px;
  vertical-align: 0!important;
  width: 11px;
  -moz-box-shadow: none!important;
  -webkit-box-shadow: none!important;
  -goog-ms-box-shadow: none!important;
  box-shadow: none!important;
}
</style>
<br />
<form id="contactForm" name="contact-form">
<div class="floating-label-form-group">
<label>Name</label>
    <input class="form-control" id="ContactForm1_contact-form-name" name="name" placeholder="Name" type="text" value="" />
  </div>
<div class="floating-label-form-group">
<label>Email Address</label>
    <input class="form-control" id="ContactForm1_contact-form-email" name="email" placeholder="Email" type="text" value="" />
  </div>
<div class="floating-label-form-group">
<label>Message</label>
    <textarea class="form-control" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="5"></textarea>
  </div>

<input class="btn btn-default" id="ContactForm1_contact-form-submit" type="button" value="Kirim" />
  <br />
<div class="clear">
</div>
<div style="max-width: 100%; text-align: left; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
<script src="//code.jquery.com/jquery-1.11.0.js" type="text/javascript"></script>
<script>
$(function() {
  $("body").on("input propertychange", ".floating-label-form-group", function(e) {
    $(this).toggleClass("floating-label-form-group-with-value", !!$(e.target).val());
  }).on("focus", ".floating-label-form-group", function() {
    $(this).addClass("floating-label-form-group-with-focus");
  }).on("blur", ".floating-label-form-group", function() {
    $(this).removeClass("floating-label-form-group-with-focus");
  });
});
</script>
<script type="text/javascript">
//<![CDATA[
if (window.jstiming) window.jstiming.load.tick('widgetJsBefore');
//]]>
</script>
<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'] = '7650287574293818356';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x7650287574293818356','//julikoding.blogspot.co.id/','7650287574293818356');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Sending...', 'contactFormMessageSentMsg': 'Your message has been sent.', 'contactFormMessageNotSentMsg': 'Message could not be sent. Please try again later.', 'contactFormInvalidEmailMsg': 'A valid email address is required.', 'contactFormEmptyMessageMsg': 'Message field cannot be empty.', 'title': 'Contact Form', 'blogId': '3040763926886085284', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>

Catatan : Ubah julikoding.blogspot.co.id menjadi alamat Blog anda. Simpan dan Publikasikan. Selamat, Sekarang anda telah membuat halaman Kontak. Sumber kode : KompiAjaib.com

3. Cara Membuat Halaman Privacy Police

Kali ini, kita akan belajar untuk membuat halaman Disclaimer, Privacy dan Terms Of Service (TOS) dengan cara otomatis/instan. Maksudnya ? Kita hanya perlu mengisi beberapa informasi singkat di Web Online yaitu Privacy Police Online. 

a. Pertama, pergi ke situs Privacy Police Online 
b. Kemudian isi Judul Web/Blog, Alamat Web/Blog, Link halaman Kontak pada Web/Blog dan Email anda.

c. Jika anda memiliki iklan, silahkan conteng atau abaikan.
d. Klik Generate Policy untuk melihat tampilan/preview halaman Privacy yang anda buat.
e. Setelah selesai, klik Generate HTML dan Copy Semua Kode HTML tersebut.
f. Buka Buka Dashboard Blog - Laman - Laman Baru - Mode HTML - Pastekan Semua Kode HTML tersebut, Simpan dan Publikasikan. Sekarang Anda telah berhasil membuat Halaman Privacy Police.

4. Cara Membuat Halaman Terms Of Service (TOS)

Sama seperti sebelumnya, untuk membuat halaman Terms Of Service atau disingkat dengan TOS, kita hanya perlu pergi ke situs Privacy Police Online. Pada bagian atas, akan ada teks Terms Of Service Generator. 

- Pada halaman tersebut, isilah informasi pada bagian pertama_Your Site Information & Contact. Untuk bagian kedua dan ketiga, kalian bisa abaikan jika tidak penting. 

- Klik Generate Document untuk melihat hasil sementara dan Generate HTML untuk kalian copy paste kan kode HTMLnya ke Laman Blog Anda. Untuk cara pemasangannya sama seperti tutorial sebelumnya. 

5. Cara Membuat Halaman Disclaimer

Apakah membuat halaman Disclaimer seperti cara sebelumnya ? 😄 Betul sekali, silahkan pergi ke Disclaimer Generator. Selanjutnya, isilah informasi atau data seperti tutorial membuat halaman Privacy dan Terms Of Service. 

- Klik Generate Disclaimer dan copy paste kan kode HTMLnya ke Laman Blog Anda. Mudah bukan ? sekarang anda telah membuat halaman Disclaimer. 

- Seperti yang kalian ketahui, halaman Disclaimer Julikoding menggunakan bahasa Indonesia. Untuk mengubah bahasa tersebut, kalian dapat gunakan tool milik Google yang sering dikenal dengan Google Translate.

6. Membuat Halaman Sitemap/Peta Situs Blog

Halaman Sitemap atau biasa disebut Peta situs berguna untuk memudahkan Pengunjung menjelajahi seluruh isi artikel dari suatu Web/Blog. Jika di dunia Bajak Laut namanya Peta Harta karun, Dunia Blog itu namanya Peta Situs, hehe 😋 just kidding . 

Banyak sekali artikel dari beberapa Web/Blog yang memamerkan kode buatannya untuk membuat halaman Sitemap/Peta Situs di Blog anda lebih Keren dan Dinamis. Dan kode dibawah ini merupakan salah satunya. Kalian bisa copy dan Paste kode di bawah ini, pergi ke Laman Blog - Publikasikan. 

<style scoped="scoped" type="text/css">
#table-outer{padding:7px 10px;margin:0 auto}
#table-outer table{width:auto;margin:0 auto}
#table-outer form{font:inherit}
#table-outer label{display:block;text-align:right;margin:0 10px 0 0;padding:4px 0 0}
#table-outer select[disabled]{opacity:.4}
#post-searcher{display:block;margin:0;padding:0}
#table-outer input,#table-outer select{width:100%;border:none;margin:0;padding:5px;font-size:86%;text-transform:uppercase;outline:0;-webkit-box-shadow:inset 0 1px 3px #000,0 1px 0 #444;-moz-box-shadow:inset 0 1px 3px #000,0 1px 0 #444;box-shadow:inset 0 1px 3px #000,0 1px 0 #444;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}
#feed-container{display:block;clear:both;margin:0 30px;padding:0;list-style:none;overflow:hidden;position:relative;border-top:none}
#feed-container li{list-style:none;margin:0;padding:0;border-top:1px solid #eee;color:#555;width:auto;float:left;display:inline}
#feed-container li .inner{margin:15px 16px;height:auto;overflow:hidden;word-wrap:break-word;text-overflow:ellipsis}
#feed-container li a{text-decoration:none;color:#2C2C2C;font-weight:700}
#feed-container li a:hover{text-decoration:none;color:#E94141}
#feed-container li .news-text{margin:10px 0 0}
#feed-container li img{margin:0 10px 5px 0;padding:5px;float:left;display:block;}
#result-desc{margin:0 30px;padding:0;border-bottom:2px solid #eee}
#result-desc div,#result-desc span{display:block;margin:0;padding:5px 10px 7px;color:#D64D52}
#result-desc div{color:inherit}
#feed-nav{margin:10px 30px 0;text-align:center;font-weight:700}
#feed-nav a,#feed-nav span{border:1px solid #C9C9C9;padding:0;color:#757575;text-decoration:none;display:block;height:30px;line-height:32px}
#feed-nav a,#feed-nav span:hover{color:#1B1B1B}
#feed-nav a:active,#feed-nav a:hover{color:#555}
#feed-nav span{cursor:wait}
@media (max-width:600px){#table-outer table{margin:0 auto;width:100%}
#feed-container,#table-outer{margin:0 auto}
#feed-container li .inner{margin:5px auto;height:auto}
#feedContainer li{float:none;display:block;width:auto;height:auto}
#feed-container li .news-text, #feedContainer:after,#feed-container li img{display:none!important}}
</style>
<div id="table-outer">
<table><tbody>
<tr><td><label for="feed-order">Urutkan artikel berdasarkan:</label></td> <td><select id="feed-order"> <option selected="" value="published">Artikel terbaru</option> <option value="updated">Artikel yang terakhir di update</option> </select></td></tr>
<tr><td><label for="label-sorter">Filter artikel berdasarkan kategori:</label></td> <td><select disabled="" id="label-sorter"> <option selected="">Loading....</option> </select></td></tr>

<tr>                 <td><label for="feed-q">Cari artikel dengan kata kunci:</label></td> <td><form id="post-searcher">
<input id="feed-q" placeholder="Ketik dan tekan ENTER" type="text" />
</form>
</td></tr>
</tbody></table>
</div>
<br />
<header id="result-desc"></header>
<br />
<ul id="feed-container"></ul>
<div id="feed-nav">
</div>
<script src="https://cdn.rawgit.com/ahmdjazuli/javascript/d1d49dad/sitemap_julikoding.js" type="text/javascript"></script>

Sumber kode diatas dari IndraDP. Sekian tutorial singkat untuk Membuat Halaman about, kontak, privacy, disclaimer, terms of service dan Sitemap. Semoga dengan adanya tutorial ini dapat membantu dan bermanfaat bagi sobat.
Jangan lupa, untuk Membaca artikel Blog JuliKoding lainnya.