Buat Daftar Isi Simple Kompi Ajaib Nan Keren

Cara membuat Daftar Isi Blog Keren Otomatis Terbaru. Sobat Tekno bermacam gaya sitemap atau daftar isi blog keren telah dibuat oleh para master coding Html, Javascript dan css blog. Tinggal bagaimana kita menerapkannya pada blog masing-masing. Kali ini saya bagikan hasil karya Adhy Suryadi pemilik blog kompiajaib.com.

Site Map artikel blog ini benar-benar simple dan tidak memakan banyak tempat dari halaman statis tempat scriptnya berada. dan kelebihan sitemap simple keren ini sudah valid HTML 5. Sitemap ini berpenampilan dua kolom apabila di klik salah satu labelnya. namun apabila sobat baru saja masuk ke halaman daftar isi maka hanya tampil 1 kolom saja.

Sitemap ini tidak menampilkan semua link postingan artikel pada blog, tapi hanya menurut standar yang telah kita tetapkan sendiri dan untuk menampilkan artikel lainnya hanya dengan mengklik tombol next.

Baiklah kelamaan berceloteh, saya pajang preview dari sitemap simple nan keren ini beserta script yang harus sobat pasang pada halaman statis atau halaman post blog sobat. Mohon ikuti petunjuknya di bawah script 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://teknorc.blogspot.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><div style='clear:both'></div>

Petunjuk Pemasangan Sitemap ;

Copas script di atas pada bagian HTML halaman statis atau halaman Post

Silakan sobat ganti link url yang berwarna merah dengan url blog sobat, dan untuk angka 11 adalah jumlah postingan maksimal yang akan tampil ketika label disebelah kiri diklik, silakan rubah sesuai keinginan sobat berapa postingan yang akan tampil dan sisanya akan tampil jika tombol next di klik.

Selamat menikmati

Tweet