Cara Membuat Sitemap Otomatis Atau Daftar Isi di Blogger Dan 3 Design Sitemap Keren

Baca Juga

Lama sudah saya baru posting, akhirnya bisa posting lagi juga nih. Kali ini saya masih membahas seputar Tips blogger yang bisa dibilang Tips Belajar Blogger Pemula Seperti saya.

Baiklah kali ini saya ingi membagi Tips Cara membuat sitemap di blog atau daftar isi untuk Blogger berserta kode html atau scriptnya.

Dan sekaligus ada tiga design sitemap atau daftar isi yang simple dan keren.

Untuk membuat halaman sitemap atau daftar isi pertama anda login dan masuk ke draft.blogger.com.

Kemudian anda Pilih Halama-Halaman Baru lalu masuk dalam mode HTML.

Lihat gambar ini

Anda hanya perlu pilih salah satu kode html yang ada dibawah ini, sebagai contoh saya pilih kode html sitemap 1. Lihat gambar ini

Kemudian anda sesuaikan dengan alamat blog masing masing, jika sudah Publikasikan dan lihat hasilnya.

Nah ini dia design kode HTML sitemap blogger yang saya kutip dari para master....

1. Kode HTML Sitemap atau Daftar Isi

Berikut contoh sitemap dari kode html diatas

Sitemap 1

2. Kode HTML Sitemap atau Daftar Isi, Kode ini saya dapt dari blog duarupa.com

Berikut contoh sitemap dari kode html diatas

Sitemap 2

3. Kode HTML Sitemap atau Daftar Isi. Nah kalau ini saya dapat dari blogger idola saya, mba Arlina

<div id='show-cat'> </div> <div id='show-post'> <script type='text/javaScript'> var cat_home='https://www.indrayana14.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+=' – '+(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>

Berikut contoh sitemap dari kode html diatas