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)
- 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.
