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

byCILACAP CYBER TEAM •
0

 

 

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  Cilacap Cyber, 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 atau situs 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','//cilacapcyber.my.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 cilacapcyber.my.id menjadi alamat Blog  atau situs 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 klik generate Privacy policy
c. isi kolom yang kosong sesuai situs atau blog anda
d. untuk selanjutnya anda hanya memilih dibagian adsense kalian yes dan yang lainnya biarkan saja.. kemudian atur lokasi anda
e. kemudian isi alamat email yang sesuai di situs atau blog anda
f. Setelah selesai, klik Generate HTML dan Copy Semua Kode HTML tersebut.
g. 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 Disclamer CilacapCyber 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 type="text/css">
#toc{
width:99%;
margin:5px auto;
border:1px solid #2D96DF;
-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
}
.labl{
color:#FF5F00;
font-weight:bold;
margin:0 -5px;
padding:1px 0 2px 11px;
background:-moz-linear-gradient(right,#C2EAFE 0%,#055A85 40%);
background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#055A85),color-stop(1,#C2EAFE));
border:1px solid #2D96DF;
border-radius:4px;-moz-border-radius:4px;
-webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;
-moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;
}
.labl a{
color:#fff;
}
.labl:first-letter{t
ext-transform:uppercase;
}
.new{
color:#FF5F00;
font-weight:bold;
font-style:italic;
}
.postname{
font-weight:normal;
background:-moz-linear-gradient(right,#C2EAFE 0%,#fff 40%);
background:-webkit-gradient(linear,left 80,right 10,color-stop(0.60,#fff),color-stop(1,#C2EAFE));
}
.postname li{
border-bottom: #ddd 1px dotted;
margin-right:5px
}
</style>

<br />
<div id="toc">
<script src="https://makingdifferent.github.io/blogger-widgets/sitemappage.js" type="text/javascript"></script>
<script src="https://www.cilacapcyber.my.id//feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>

Sumber kode diatas dari github. rubah url domain www.cilacapcyber.my.id menjadi url situs atau blog anda. 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 kalian
Jangan lupa, untuk Membaca artikel Cilacap Cyber lainnya.

 

Tags:
CILACAP CYBER TEAM

Hallo Saya Froxsy, Asal jateng saya suka membaca dan menulis

Post a Comment

Previous Post Next Post