Simple Sitemaps Untuk Blogger

Ternyata banyak juga yang tertarik untuk memakai sitemaps yang sedang aku gunakan. Karena tampilan sitemaps ini benar-benar simple jadi aku sebut saja dengan Simple Sitemaps. Sitemaps ini benar-benar simple alasannya ialah keberadaannya tidak memerlukan daerah yang besar pada postingan.

Dengan Sitemaps ini kita tidak menampilkan semua link postingan blog kita pada satu halaman. Link hanya ditampilkan saat ada perintah klik pada label-nya.

Link yang ditampilkan sebanyak jumlah yang kita tentukan pada setiap klik-nya, dan untuk selebihnya kita tinggal klik tombol "Next" bila jumlah postingan pada satu label melebihi jumlah yang kita tentukan. Untuk Demo silahkan lihat pada Sitemaps atau Daftar Isi Kompi Ajaib.

Sitemaps ini buatan Duy Pham dan aku mendapatkannya atas petunjuk kang Beben. Di sini aku hanya menambahkan title tag untuk link-nya biar lebih SEO friendly dan penambahan "Scope" biar valid HTML5. Bagi yang tertarik untuk mencobanya silahkan gunakan script di bawah ini.

 <style type='text/css' scoped='scoped'>
 #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:#d80556;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://www.kompiajaib.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="Simple Sitemaps Untuk Blogger">'+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="Simple Sitemaps Untuk Blogger">'+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="Simple Sitemaps Untuk Blogger">'+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="Simple Sitemaps Untuk Blogger">';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>
<div style='clear:both'></div>

Silahkan ganti URL-nya dengan URL blog Anda dan angka 11 yang berwarna merah ialah jumlah link postingan per-label yang ditampilkan saat klik pada label dan next.

Silahkan copy dan paste code di atas dan simpan pada statis page blog Anda. Selamat mencoba...

Sumber bacaan: https://komporajaibku.blogspot.com//search?q=make-sitemap-for-blogger-by-category
Sumber script: https://komporajaibku.blogspot.com//search?q=make-sitemap-for-blogger-by-category

Sumber https://www.kompiajaib.com/

Share this post