Cara Menciptakan Halaman About, Contact, Privacy , Disclaimer, Tos Dan Sitemap

Salah satu syarat utama semoga Blog Anda disetujui oleh Google Adsense untuk penayangan Iklan yaitu dengan menampilkan halaman About, Kontak, Disclaimer, Privacy, TOS (Terms of Service) dan Sitemap.
Oleh alasannya itu, pada tips blog #2 ini kita akan berguru 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 sanggup memperlihatkan gosip singkat ihwal Blog Anda.

2. Cara Membuat Halaman Contact (Kontak) Blog

Selain kolom Komentar, ada cara lain untuk pengunjung sanggup 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 sanggup anda curahkan melalui halaman ini.

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

<p>Silahkan isi form di bawah ini untuk menghubungi admin . Jika tidak ada halangan dan kesibukan lainnya, admin akan eksklusif 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 menciptakan halaman Kontak. Sumber instruksi : KompiAjaib.com

3. Cara Membuat Halaman Privacy Police

Kali ini, kita akan berguru untuk menciptakan halaman Disclaimer, Privacy dan Terms Of Service (TOS) dengan cara otomatis/instan. Maksudnya ? Kita hanya perlu mengisi beberapa gosip 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 mempunyai 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 menciptakan Halaman Privacy Police.

4. Cara Membuat Halaman Terms Of Service (TOS)

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

- Pada halaman tersebut, isilah gosip pada bab pertama_Your Site Information & Contact. Untuk bab kedua dan ketiga, kalian sanggup abaikan kalau tidak penting. 

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

5. Cara Membuat Halaman Disclaimer

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

- Klik Generate Disclaimer dan copy paste kan instruksi HTMLnya ke Laman Blog Anda. Praktis bukan ? kini anda telah menciptakan halaman Disclaimer. 

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

6. Membuat Halaman Sitemap/Peta Situs Blog

Halaman Sitemap atau biasa disebut Peta situs mempunyai kegunaan 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 instruksi buatannya untuk menciptakan halaman Sitemap/Peta Situs di Blog anda lebih Keren dan Dinamis. Dan instruksi dibawah ini merupakan salah satunya. Kalian sanggup copy dan Paste instruksi 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 menurut 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 instruksi diatas dari IndraDP. Sekian tutorial singkat untuk Membuat Halaman about, kontak, privacy, disclaimer, terms of service dan Sitemap. Semoga dengan adanya tutorial ini sanggup membantu dan bermanfaat bagi sobat.
Jangan lupa, untuk Membaca artikel Blog JuliKoding lainnya.  

Bagikan Artikel ini