Cara Membuat Daftar Isi/Sitemap Blog Sederhana dan Ringan

Wahanarupa.com - Daftar Isi atau biasa juga di sebut Sitemap merupakan salah satu halama atau komponen dalam blog yang cukup penting. Dengan adanya Sitemap, pengunjung blog anda akan lebih mudah mencari semua daftar artikel yang sudah ada di blog anda. Saya rasa anda sudah mengerti apa itu Sitemap dan apa kegunaan di dalam blog.

Dalam artikel ini, saya akan membagikan tips bagaimana cara membuat sitemap yang sederhana dan juga ringan untuk blog anda. Karena di sitemap ini, kita tidak menggunakan JavaScript yang di upload di hosting pihak ketiga. Artinya kita membuatnya langsung di halaman blogger.
Nah, untuk anda yang ingin mencobanya bisa mencoba membuat sitemap mengguakan script dibawah ini.

Code

<style type='text/css'>
#show-cat{float:left;margin-right:20px;width:220px;height:391px;overflow-x:hidden;overflow-y:auto;line-height:18px}
#show-cat ul{margin:0;border-top:1px solid #ccc;padding:0}
#show-cat ul li{list-style-type:none;margin:0;border-right:1px solid #ccc;border-bottom:1px solid #ccc;border-left:1px solid #ccc;padding:0}
#show-cat ul li a{display:block;padding:10px}
#show-cat ul li a,#navi-cat a{background:#fff;color:#4c4c4c;text-decoration:none}
#show-cat ul li a,#navi-cat a,#navi-cat span{font-size:12px}
#show-cat ul li a:hover,#navi-cat a:hover{background:#ccc;color:#fff}
#show-post{float:left;width:60%}
#show-post ul li{list-style-type:none}
#navi-cat{padding:20px 0}
#navi-cat a{margin-right:10px;border:1px solid #ccc}
#navi-cat a,#navi-cat span{padding:5px 10px}
#navi-cat span{float:right}
</style>
<div id='show-cat'></div>
<div id='show-post'>
<script type='text/javaScript'>
var cat_home='http://wahanarupa.com';cat_numb=15;cat_pre='Kembali';cat_nex='Lanjut';
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">'+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">'+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">'+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">';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>

Keterangan

• Angka 220px :  Angka digunakan untuk mengatur kolom, baik lebar, tinggi dan jaraknya. Silahkan anda ganti sesuai keinginan.
• angka 60%: Ganti presentase untuk mengatur lebar hasil klik dari setiap label. Semakin tinggi angkanya, maka akan semain panjang ukuran ke samping ketika di klik perlabel.
• URL: Ganti dengan alamat blog anda, ini bertujuan untuk memanggil semua isi artikel yang ada di blog anda.

Cara membuat sitemap blogger

• Pertama buka/login ke blogger
• Buat halaman baru dan pilih di mode HTML

• Copy paste script diatas dan kemudian publikasikan
• Selesai

Jika sudah selesai maka hasilnya kurang lebih seperti gambar diatas

Bagaimana? mudah bukan membuat daftar isi yang simple dan tentunya ringan saat loading, karena tidak menggunakan JS yang di upload di lain tempat. Sekian dari saya, semoga artikel ini bisa membantu anda yang lagi mencari cara membuat daftar isi untuk blog.

Penting: Jika hasilnya tidak muncul, silahkan dicoba lagi dari awal. Biasanya jika halaman di edit, maka hasilnya bisa gagal.

Advertisemen

 Blog