Cara Membuat Menu Navigasi Sitemap, About, Contact, Privacy Policy, Disclaimer pada Blog 100% Mudah.

ilustrasi tulisan menu navigasi

Menu Navigasi merupakan salah satu bagian yang penting dan harus ada pada sebuah web profesional.  Karena, bagian ini akan menjadi pentunjuk bagi si pembaca untuk mengenal lebih dalam lagi isi web tersebut.

Oke, berhubungan dengan hal tersebut, kali ini saya akan memberitahukan kepada Anda semua Cara Membuat Menu Navigasi Sitemap, About, Contact, Privacy Policy, Disclaimer pada BLog 100% Mudah.

  • Sitemap

Sitemap bahasa indonesianya adalah daftar isi. Tujuan dibuatnya daftar isi ialah, untuk mengelompokkan artikel-artikel dalam Blog Anda sesuai dengan label, tanggal/bulan/tahun, dan jenisnya.

Sedangkan manfaatnya, untuk memudahkan si pembaca dalam mencari artikel yang mereka cari. Biasanya, daftar isi ini berbentuk list dan ada juga yang tabel.

Untuk cara membuat Sitemap dalam Blog, itu ada 2 cara. Tidak ada keharusan untuk Anda menggunakan kedua cara ini. Namun, terapkanlah salah satu cara yang sekiranya nyaman di pandangan Anda.

Sitemap Model 1

div id="bp_toc" style="max-height: 1800px; overflow-x: auto; overflow: scroll;"></div><script src="https://cdn.rawgit.com/Librayanada/vip/master/daftar-isi.js" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script><br />

<style scoped="" type="text/css">#comments,#Label1,#FollowByEmail1 {display:none;} #HTML3 {visibility:hidden;} /* CSS Full Sitemap */ #bp_toc{background:#f4f5f6;color:#666;margin:0 auto;padding:4px;} span.toc-note{padding:20px;margin:0 auto;display:block;text-align:center;color:#7f8c8d;font-size:1.6rem;text-transform:uppercase;font-weight:700;line-height:normal} .toc-header-col1 {padding:10px;background-color:#f5f5f5;width:250px;} .toc-header-col2 {padding:10px;background-color:#f5f5f5;width:75px;} .toc-header-col3 {padding:10px;background-color:#f5f5f5;width:125px;} #bp_toc td.toc-header-col1,#bp_toc td.toc-header-col2,#bp_toc td.toc-header-col3{border:0;border-bottom:1px solid rgba(0,0,0,0.1);} #bp_toc tr:nth-child(1) a {color:#666;} #bp_toc td.toc-header-col1{background-color:#fff;} #bp_toc td.toc-header-col2{background-color:#fff;} #bp_toc td.toc-header-col3{background-color:#fff;} #bp_toc td.toc-entry-col1,#bp_toc td.toc-entry-col2,#bp_toc td.toc-entry-col3{border:0} #bp_toc td.toc-entry-col1{background-color:#fff;font-weight:700} #bp_toc tr:nth-child(odd) td.toc-entry-col1{background-color:#f8f8f8} #bp_toc td.toc-entry-col2{background-color:#fff;} #bp_toc tr:nth-child(odd) td.toc-entry-col2{background-color:#f8f8f8} #bp_toc td.toc-entry-col3{background-color:#fff;} #bp_toc tr:nth-child(odd) td.toc-entry-col3{background-color:#f8f8f8} #bp_toc td a{color:#666;} .toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {font-size:12px; text-decoration:none;color:#aaa;letter-spacing: 0.5px;} .toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {text-decoration:none;} .toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {background:#fdfdfd;padding:5px;padding-left:5px;font-size:89%} .toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a{color:#666;font-size:13px;} .toc-entry-col1 a:hover, .toc-entry-col2 a:hover, .toc-entry-col3 a:hover{color:#cdb280;} #bp_toc table {width:100%;margin:0 auto;counter-reset:rowNumber;} .toc-entry-col1 {counter-increment:rowNumber;} #bp_toc table tr td.toc-entry-col1:first-child::before {content: counter(rowNumber);min-width:1em;margin-right:0.5em;} </style>

Sitemap Model 2

<div id='show-cat'>
</div>
<div id='show-post'>
<script type='text/javaScript'>
var cat_home='http://www.mastopal.com';cat_numb=11;cat_pre='Prev';cat_nex='Next';
var cat_name;var cat_start;var cat_class;
function show_post2(a){var tt=a.feed.openSearch$totalResults.$t;dw='';dw+='<ul>';for(var i=0;i<cat_numb&&i<a.feed.entry.length;i++){var entry=a.feed.entry[i];cat_title=entry.title.$t;for(var j=0;j<entry.link.length;j++){if(entry.link[j].rel=='alternate'){var cat_url=entry.link[j].href}}dw+='<li>';dw+=(cat_start+i)+'. <a href="'+cat_url+'" rel="nofollow" title="'+cat_title+'">'+cat_title+'</a>';dw+='</li>'}dw+='</ul>';dw+='<div id="navi-cat">';if(cat_start>1){dw+='<a href="" onclick="show_post(\''+cat_name+'\',\''+(cat_start-cat_numb)+'\',\''+cat_class+'\');return false" title="'+cat_pre+'">'+cat_pre+'</a>'}if((cat_start+cat_numb-1)<tt){dw+='<a href="" onclick="show_post(\''+cat_name+'\',\''+(cat_start+cat_numb)+'\',\''+cat_class+'\');return false" title="'+cat_nex+'">'+cat_nex+'</a>'}dw+='<span>'+cat_start;if(cat_start!=tt){dw+=' &ndash; '+(cat_start+i-1)}dw+=' / '+tt+'</span>';dw+='</div>';document.getElementById('show-post').innerHTML=dw+'<style type="text/css">.cat-'+cat_class+' a{background:#bbb!important;color:#fff!important}<\/style>'}function show_post(a,b,c){var d=document.getElementsByTagName('head')[0];e=document.createElement('script');e.type='text/javascript';e.setAttribute('src',cat_home+'/feeds/posts/default/-/'+a+'?alt=json-in-script&start-index='+b+'&max-results='+cat_numb+'&callback=show_post2');d.appendChild(e);cat_name=a;cat_start=parseInt(b),cat_class=c}function show_cat(a){var cat=a.feed.category;dw='';dw+='<ul>';for(var i=0;i<cat.length-1;i++){for(var j=i+1;j<cat.length;j++){if(cat[i].term>cat[j].term){cat_hv=cat[i].term;cat[i].term=cat[j].term;cat[j].term=cat_hv}}}for(var i=0;i<cat.length;i++){dw+='<li class="cat-'+i+'">';dw+='<a href="" onclick="show_post(\''+cat[i].term+'\',\'1\',\''+i+'\');return false" title="';dw+=cat[i].term;dw+='">';dw+=cat[i].term;dw+='</a>';dw+='</li>'}dw+='</ul>';document.getElementById('show-cat').innerHTML=dw}document.write('<script type="text/javascript" src="'+cat_home+'/feeds/posts/default?alt=json-in-script&max-results=0&callback=show_cat"><\/script>');
</script>
</div>
<style scoped="" type="text/css">
#show-cat{float:left;margin:20px 2% 20px 0;width:25%;height:389px;overflow-x:hidden;overflow-y:auto;line-height:normal;border:1px solid rgba(0,0,0,0.1)}
#show-cat ul{margin:0;border-top:0 solid rgba(0,0,0,0.1);padding:0}
#show-post ul li{list-style-type:none;margin:0 0 0 -25px;padding:10px 0;border-bottom:1px solid rgba(0,0,0,0.1)}
#show-post ul li:hover{margin-right:10px;border-color:#fcd3d3}
#show-cat ul li a{display:block;padding:10px;border-bottom:1px solid rgba(0,0,0,0.1);transition:initial}
#navi-cat a:hover{color:#fff!important}
#show-cat ul li:last-child a{border-bottom:none}
#show-cat ul li a,#navi-cat a{background:#fff;color:#555;font-weight:bold;text-decoration:none}
#show-cat ul li a,#navi-cat a,#navi-cat span{font-size:13px}
#show-cat ul li a:hover,#navi-cat a:hover{background:#666;color:#fff}
#show-post{float:left;width:69%;line-height:1.6em}
#show-post a{color:#333;font-size:14px}
#show-post a:hover{color:#f14b4b}
#navi-cat{padding:20px 0}
#navi-cat a{padding:5px 10px;background:rgba(0,0,0,0.7);margin:0 5px 0 0;color:#fff;border-radius:3px;}
#navi-cat a:nth-child(2){background:#f14b4b;margin:0 10px 0 0;color:#fff}
#navi-cat span{float:right;padding:5px 0;font-size:12px;color:rgba(0,0,0,0.5);font-weight:700}
#show-cat::-webkit-scrollbar{width:8px;height:8px}
#show-cat::-webkit-scrollbar-track{background-color:rgba(0,0,0,.1);}
#show-cat::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,.6)}
#show-cat::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.4);transition:all 400ms ease-in-out}
@media screen and (max-width:768px){#show-cat{width:35%}#show-post{width:59%}}
@media screen and (max-width:480px){#show-cat{width:100%;margin:20px 0}#show-post{width:100%}}
</style>

Copy dan pastekan salah satu script model sitemap diatas pada laman kosong ==> HTML. Ganti www.mastopal.com dengan url Blog Anda

  • About (Tentang)

Tujuan dibuat About pada sebuah Blog adalah, untuk menunjukkan ke-spesifikan Blog, tujuan, bergerak dibidang apa, membahas tentang apa, pokoknya semua yang bersangkutan dengan Blog Anda dapat dituliskan di opsi About ini.

Dalam membuat About, tidak ada website ataupun tools yang mempermudah Anda dalam pembuatannya. Jadi, Anda harus menulis secara manual.

  • Contact (Kontak)

Sebuah web yang profesional, pasti terdapat Contact didalam webnya, salah satunya Blog. Tujuannya, untuk meninggalkan jejak si pemilik Blog terhadap si pembaca Blognya. 

Apa maksutnya jejak ?

Maksutnya, si pemilik Blog itu bertanggung jawab penuh terhadap apa yang Ia tulis didalam Blognya. Jadi, Ia biasanya meninggalkan Contact berupa e-mail, nomor hp, formulir, dll pada Blognya. Dimana kontak tersebut akan si pembaca gunakan jika, sewaktu-waktu mereka mengalami kebingungan terhadap isi artikel pada Blog tersebut. Atau bisa juga untuk menanyakan sesuatu yang lain pada si pemilik Blog.

Untuk membuat navigasi Contact, Anda bisa mengunjungi 2 situs web berikut ini.
  1. Buka situs www. foxyform.com . Centang opsi yang menurut Anda penting saja. Kemudian, klik generate. Lalu, pastekan script tersebut pada laman kosong di Blog Anda.
  2. Buka situs www.123contactform.com . Anda diwajibkan untuk sign up/mendaftar terlebih dahulu. Anda bisa memodifikasi formulir kontak yang ada sesuai dengan bebas.

  • Privacy Policy

Itu sama juga dengan TOS (Term Of Services) dan FAQ. Jadi, Anda juga gak perlu bingung jika menemui tulisan tersebut. Isi dari Privacy Policy ini ialah tentang masalah perundang-undang/hukum pada sebuah Blog, pelanggaran, sanksi, penggunaan cookies dan cache, dll. 

Untuk cara membuat Privacy Policy, Anda simak langkahnya dibawah ini.
  1. Buka situs www.privacypolicyonline.com
  2. Lalu, Anda isi format yang ada dan yang sesuai dengan Blog milik Anda.
  3. Jika sudah, Anda klik generate text dan copy semua tulisan tersebut.
  4. Setelah itu, Anda pastekan tulisan itu di laman kosong pada Blog Anda.

  • Disclaimer

Cara membuat disclaimer adalah,
  1. Buka situs www.privacypolicyonline.com
  2. Lalu, Anda isi format yang ada dan yang sesuai dengan Blog milik Anda.
  3. Jika sudah, Anda klik generate text dan copy semua tulisan tersebut.
  4. Setelah itu, Anda pastekan tulisan itu di laman kosong pada Blog Anda.

Akhir Kata .....

Sekali lagi, navigasi-navigasi diatas amatlah penting bagi sebuah web yang profesional. Dimana hal tersebut memudahkan pembaca untuk menemukan informasi yang mereka inginkan.

Oh ya, jika Anda ingin mendaftarkan Blog Anda ke Google Adsense, Anda juga harus memperhatikan dengan seksama pembuatan navigasi ini.

Karena, navigasi ini juga salah satu faktor diterimanya Blog Anda oleh pihak Google Adsense. Sekian artikel Saya yang berjudul Cara Membuat Menu Navigasi Sitemap, About, Contact, Privacy Policy, Disclaimer pada Blog dan 100% Mudah.

0 Comments


EmoticonEmoticon