logo
CV. WILONA-KW3 REMPAH JAYA | Supplier Rempah-Rempah Nasional, partai besar dan kecil, Silahkan Klik | CV. WILONA-KW3 REMPAH JAYA |

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
Enter your email address to get update from DESA CILEMBU.
Print PDF
ARTIKEL TERKAIT : data-matched-content-ui-type="text_card" data-matched-content-rows-num="4" data-matched-content-columns-num="1"
Tulisanmu ingin dibayar? Kirim artikelmu ke: troyalfawaz@gmail.com
CV. WILONA-KW3 REMPAH JAYA | Supplier Rempah-Rempah Nasional, partai besar dan kecil, Silahkan Klik | CV. WILONA-KW3 REMPAH JAYA |
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