DESA CILEMBU

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.
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
<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;
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

Enter your email address to get update from DESA CILEMBU.
Print PDF
Next
« Prev Post
Previous
Next Post »

17 komentar

terima kasih tutorialnya saya save ya pak

Balas

hahaha kaget bacanya, kok pertamax malah di suruh transfer :-p

Balas

barusan nih saya pake sitemap buatan mbk Devy, pake sekalian apa gak ya? hehee

Balas

pke dua-duanya ajah kang, supaya kerennya jadi dua kali :ng

Balas

hiyah...lumayan bisa buat nambahin cicilan bank.. @@,

Balas

nenarik ya sitemapnya, kapan-kapan bisa dipasang

Balas

Daftar isi blog mah dah lama banget bikinnya kang, tapi gak tau deh udah html5 apa belon? kalo belom berarti saya harus coba yang ini saja, kalo cara cek dah valid html5 apa belom gimana sih kang?

Balas

emang mbak, kemaren saya juga sempet kaget dikut mah, dah minta cara bikinnya tapi belom dikasih juga ilmunya nie :D

Balas

saya masih nunguin sedari dulu beginian yang telah palit html 10 gito ga di bikinin mang...

Balas

udah tak posting kang caranya, coba search pake katakey resep bikin kue kacamata deh, disitu mendetail ko cara bikinnya :ng

Balas

jadi lagunya Koes Plus dong...kapan-kapan...kita berjumpa lagi...huwo..huwooo. @@,

Balas

makanya jangan baca judulnya doangan mulu ateuh kasepp.... =D
sonoh baca lagih gih

Balas

nanti tak bikinin, asal mau di cipok basah sebasah-basahnya dulu...okeh

Balas

saya ikut baca lagi mas.hehe.

Balas

Loadingnya jadi berat ngga, Kang?

Balas

coba klik demo nya, kalau berat lemparin ke belakang rumahnya...okeh

Balas

mang, saya pasang di blog saya kok nggak bisa ya. apa harus ganti template juga mang?

Balas

Copyright © 2008 - DESA CILEMBU | Privacy Policy | Disclaimer | About | Created by Kompi ajaib - Powered by Blogger