Pasang Daftar Isi Blogspot Valid HTML5

Daftar Isi (Sitemap) merupakan salah satu alat navigasi untuk memudahkan pangguna dalam mencari artikel yang dibutuhkannya, sehingga terpasangnya daftar isi pada sebuah website menjadi sangat penting dan wajib ada pada setiap website. Tutorial yang membahas tentang cara pasang Daftar Isi sangat banyak dengan berbagai bentuk dan model, sayangnya daftar isi yang valid HTML5 masih sangat jarang, kebetulan daftar isi yang saya pakai dan telah sedikit dimodivikasi, aslinya adalah hasil kreatifnya www.kompiajaib.com telah valid HTML5.
Ngga ada salahnya jika kemudian saya turut berbagi daftar isi valid HTML5 ini untuk juga terpasang di blog sohib blogger.
<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:18px}
#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://desacilembu.blogspot.com';cat_numb=10;cat_pre='Prev';cat_nex='Next';
var cat_name;var cat_start;var cat_class;

Pasang Daftar Isi Blogspot Valid HTML5
Caranya:
  • Masuk ke dasboard
  • Buka Laman dan buat Laman baru
  • Beri judul, daftar Isi atau Sitemap
  • Pastekan kode dibawah pada post HTML bukan Compose
  • Publikasikan
  • Ricek valdasi HTML5
Sambung (lanjutan kode)

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>

Perhatian.
  • Ganti yang berwarna merah dan sesuaikan right, width, dan height
  • Ganti URL dengan URLnya sendiri,
  • dan cat_numb=10 adalah jumlah munculan artikel, sesuaikan dengan kebutuhan dan tampilan websitenya
  • Ganti warna biru dengan kode warna google sesuai dengan selera
Pasang Daftar Isi Blogspot Valid HTML5
Reaksi:

Related Posts:

You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini.
Buka Komentar
© 2009 DESA CILEMBU - Template by Basri Matindas .- Proudly powered by Blogger