logo
Ganti kemasan produk Anda dengan Kemasan berbahan dasar bambu ramah lingkungan...dimensi bisa request. Lihat GRATIS di DAFTAR HARGA KEMASAN BAMBU

Pasang Daftar Isi Blogspot Valid HTML5

www.desacilembu.com
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
ARTIKEL TERKAIT : data-matched-content-rows-num="4,2" data-matched-content-columns-num="1,4" data-matched-content-ui-type="image_stacked" data-ad-format="autorelaxed">
Tulisanmu ingin dibayar? Kirim artikelmu ke: troyalfawaz@gmail.com
NOTES: Jika Kolom Komentar Nggak Terbuka, Harap Muat Ulang Halaman ini
Next
« Prev Post
Previous
Next Post »
Copyright © 2008 - DESA CILEMBU | Privacy Policy | Disclaimer | About | DMCA.com Protection Status | Created by Kompi ajaib - Powered by Blogger