DAFTAR Isi (Table of Content/ToC, Sitemap) merupakan salah satu elemen konten blog yang bagus untuk indeks mesin pencari (seo friendly) dan ramah pengguna (user friendly).
Halaman daftar isi memudahkan pengunjung mencari informasi yang mereka butuhkan.
Berikut ini Cara Membuat Sitemap (Daftar Isi) Blogger Fast Loading, Simple, Unik! (Lihat DEMO)
1. Page > New Page
2. Isi judul dengan Sitemap atau Daftar Isi
3. Klik Mode "HTML"
4. Copas kode berikut ini:
<div id="tabbed-toc"><span
class="loading">Loading...</span></div><script
type="text/javascript">var tabbedTOC = {blogUrl:"http://mediamagz.blogspot.com",
containerId: "tabbed-toc", activeTab: 1};</script>
<style>#tabbed-toc{margin:0
auto;background-color:#fff;position:relative;color:#333}#tabbed-toc
.loading{display:block;padding:5px 10px;font:normal bold 10px/normal
Helmet,Freesans,Sans-Serif;color:#fff}#tabbed-toc li,#tabbed-toc
ol,#tabbed-toc ul{margin:0;padding:0;list-style:none}#tabbed-toc
.toc-tabs{width:20%;float:left}#tabbed-toc .toc-tabs li
a{display:block;overflow:hidden;text-overflow:ellipsis;color:#000;text-decoration:none;padding:9px;cursor:pointer}#tabbed-toc
.toc-tabs li a:hover{background-color:#D85252;color:#fff}#tabbed-toc
.toc-tabs li
a.active-tab{background-color:#343434;color:#fff;position:relative;z-index:5;margin:0
-1px 0 0}#tabbed-toc .divider-layer,#tabbed-toc
.toc-content{width:80%;float:right;background-color:#fff;border-left:5px
solid
#343434;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}#tabbed-toc
.divider-layer{float:none;display:block;position:absolute;top:0;right:0;bottom:0}#tabbed-toc
.panel{position:relative;z-index:5}#tabbed-toc .panel li
a{display:block;position:relative;font-size:15px;color:#000;line-height:20px;padding:12px;text-decoration:none;outline:0;overflow:visible}#tabbed-toc
.panel li
time{display:block;font-style:italic;font-weight:400;font-size:10px;color:#666;float:right}#tabbed-toc
.panel li .summary{display:block;padding:10px
12px;font-style:italic;border-bottom:2px solid
#888;overflow:hidden}#tabbed-toc .panel li .summary
img.thumbnail{float:left;display:block;margin:0 8px 0
0;padding:4px;width:72px;height:72px;border:1px solid
#dcdcdc;background-color:#fafafa}#tabbed-toc .panel
li:nth-child(even){background-color:#eee}#tabbed-toc .panel li
a:focus,#tabbed-toc .panel li a:hover,#tabbed-toc .panel li a:hover
time{text-decoration:underline;outline:0}@media
(max-width:700px){#tabbed-toc .toc-content,#tabbed-toc
.toc-tabs{overflow:hidden;width:auto;float:none;display:block}#tabbed-toc
.toc-tabs li{display:inline;float:left}#tabbed-toc .toc-tabs li
a,#tabbed-toc .toc-tabs li a.active-tab{border:1px solid
#eee}#tabbed-toc .toc-tabs li
a.active-tab{background-color:#343434;color:#fff}#tabbed-toc
.toc-content{border:none}#tabbed-toc .divider-layer,#tabbed-toc .panel
li time{display:none}}
</style>
<script
src="https://blogeutectics.googlecode.com/svn/trunk/Sitemap-eutecticsV4.js"></script>
ATAU
<div id="tabbed-toc"><span
class="loading">Loading...</span></div><script
type="text/javascript">var tabbedTOC = {blogUrl:"http://mediamagz.blogspot.com",
containerId: "tabbed-toc", activeTab: 1};</script>
<style>#tabbed-toc{margin:0
auto;background-color:#fff;position:relative;color:#333}#tabbed-toc
.loading{display:block;padding:5px 10px;font:normal bold 10px/normal
Helmet,Freesans,Sans-Serif;color:#fff}#tabbed-toc li,#tabbed-toc
ol,#tabbed-toc ul{margin:0;padding:0;list-style:none}#tabbed-toc
.toc-tabs{width:20%;float:left}#tabbed-toc .toc-tabs li
a{display:block;overflow:hidden;text-overflow:ellipsis;color:#000;text-decoration:none;padding:9px;cursor:pointer}#tabbed-toc
.toc-tabs li a:hover{background-color:#D85252;color:#fff}#tabbed-toc
.toc-tabs li
a.active-tab{background-color:#343434;color:#fff;position:relative;z-index:5;margin:0
-1px 0 0}#tabbed-toc .divider-layer,#tabbed-toc
.toc-content{width:80%;float:right;background-color:#fff;border-left:5px
solid
#343434;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}#tabbed-toc
.divider-layer{float:none;display:block;position:absolute;top:0;right:0;bottom:0}#tabbed-toc
.panel{position:relative;z-index:5}#tabbed-toc .panel li
a{display:block;position:relative;font-size:15px;color:#000;line-height:20px;padding:12px;text-decoration:none;outline:0;overflow:visible}#tabbed-toc
.panel li
time{display:block;font-style:italic;font-weight:400;font-size:10px;color:#666;float:right}#tabbed-toc
.panel li .summary{display:block;padding:10px
12px;font-style:italic;border-bottom:2px solid
#888;overflow:hidden}#tabbed-toc .panel li .summary
img.thumbnail{float:left;display:block;margin:0 8px 0
0;padding:4px;width:72px;height:72px;border:1px solid
#dcdcdc;background-color:#fafafa}#tabbed-toc .panel
li:nth-child(even){background-color:#eee}#tabbed-toc .panel li
a:focus,#tabbed-toc .panel li a:hover,#tabbed-toc .panel li a:hover
time{text-decoration:underline;outline:0}@media
(max-width:700px){#tabbed-toc .toc-content,#tabbed-toc
.toc-tabs{overflow:hidden;width:auto;float:none;display:block}#tabbed-toc
.toc-tabs li{display:inline;float:left}#tabbed-toc .toc-tabs li
a,#tabbed-toc .toc-tabs li a.active-tab{border:1px solid
#eee}#tabbed-toc .toc-tabs li
a.active-tab{background-color:#343434;color:#fff}#tabbed-toc
.toc-content{border:none}#tabbed-toc .divider-layer,#tabbed-toc .panel
li time{display:none}}
</style>
<script type="text/javascript">
var tabbedTOC_defaults={blogUrl:"http://mediamagz.blogspot.com",containerId:"tabbed-toc",activeTab:1,showDates:!1,showSummaries:!1,numChars:200,showThumbnails:!1,thumbSize:40,noThumb:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",monthNames:"Januari Februari Maret April Mei Juni Juli Agustus September Oktober November Desember".split(" "),newTabLink:!0,maxResults:99999,preload:0,sortAlphabetically:!0,showNew:!1, newText:" - <em style='color:red;'>Baru!</em>"},i;for(i in tabbedTOC_defaults)tabbedTOC_defaults[i]=void 0!==typeof tabbedTOC[i]&&"undefined"!==typeof tabbedTOC[i]?tabbedTOC[i]:tabbedTOC_defaults[i]; function clickTab(c){for(var e=document.getElementById(tabbedTOC_defaults.containerId),b=e.getElementsByTagName("ol"),e=e.getElementsByTagName("ul")[0].getElementsByTagName("a"),f=0;f<b.length;f++)b[f].style.display="none",b[parseInt(c,10)].style.display="block";for(b=0;b<e.length;b++)e[b].className="",e[parseInt(c,10)].className="active-tab"} function showTabs(c){var e=parseInt(c.feed.openSearch$totalResults.$t,10),b=tabbedTOC_defaults,f=c.feed.entry;c=c.feed.category;for(var a="",a=0;a<(!0===b.showNew?5:b.showNew)&&a!=f.length;a++)f[a].title.$t+=!1!==b.showNew?b.newText:"";f=b.sortAlphabetically?f.sort(function(a,b){return a.title.$t.localeCompare(b.title.$t)}):f;c=b.sortAlphabetically?c.sort(function(a,b){return a.term.localeCompare(b.term)}):c;for(var a='<span class="divider-layer"></span><ul class="toc-tabs">',g=0,m=c.length;g<m;g++)a+= '<li class="toc-tab-item-'+g+'"><a href="javascript:clickTab('+g+');">'+c[g].term+"</a></li>";a+='</ul><div class="toc-content">';g=0;for(m=c.length;g<m;g++){for(var a=a+('<ol class="panel" data-category="'+c[g].term+'"'),a=a+(g!=b.activeTab-1?' style="display:none;"':""),a=a+">",l=0;l<e&&l!=f.length;l++){var p,d=f[l],k=d.published.$t,h=b.monthNames,q=d.title.$t,r="summary"in d&&!0===b.showSummaries?d.summary.$t.replace(/<br ?\/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,b.numChars)+ "…":"",s="media$thumbnail"in d&&!0===b.showThumbnails?'<img class="thumbnail" style="width:'+b.thumbSize+"px;height:"+b.thumbSize+'px;" alt="" src="'+d.media$thumbnail.url.replace(/\/s72(\-c)?\//,"/s"+b.thumbSize+"-c/")+'"/>':'<img class="thumbnail" style="width:'+b.thumbSize+"px;height:"+b.thumbSize+'px;" alt="" src="'+b.noThumb.replace(/\/s72(\-c)?\//,"/s"+b.thumbSize+"-c/")+'"/>',n=d.category?d.category:[],k=b.showDates?'<time datetime="'+k+'" title="'+k+'">'+k.substring(8,10)+" "+h[parseInt(k.substring(5, 7),10)-1]+" "+k.substring(0,4)+"</time>":"",h=0;for(;h<d.link.length;h++)if("alternate"==d.link[h].rel){p=d.link[h].href;break}d=0;for(h=n.length;d<h;d++){var t=b.newTabLink?' target="_blank"':"";n[d].term==c[g].term&&(a+='<li title="'+n[d].term+'"',a+=b.showSummaries?' class="bold"':"",a+='><a href="'+p+'"'+t+">"+q+k+"</a>",a+=b.showSummaries?'<span class="summary">'+s+r+'<span style="display:block;clear:both;"></span></span>':"",a+="</li>")}}a+="</ol>"}a+="</div>";a+='<div style="clear:both;"></div>'; document.getElementById(b.containerId).innerHTML=a;clickTab(b.activeTab-1)}(function(){var c=document.getElementsByTagName("head")[0],e=document.createElement("script");e.type="text/javascript";e.src=tabbedTOC_defaults.blogUrl+"/feeds/posts/summary?alt=json-in-script&max-results="+tabbedTOC_defaults.maxResults+"&orderby=published&callback=showTabs";"onload"!==tabbedTOC_defaults.preload?setTimeout(function(){c.appendChild(e)},tabbedTOC_defaults.preload):window.onload=function(){c.appendChild(e)}})();
</script>
<script type="text/javascript">
var tabbedTOC_defaults={blogUrl:"http://mediamagz.blogspot.com",containerId:"tabbed-toc",activeTab:1,showDates:!1,showSummaries:!1,numChars:200,showThumbnails:!1,thumbSize:40,noThumb:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",monthNames:"Januari Februari Maret April Mei Juni Juli Agustus September Oktober November Desember".split(" "),newTabLink:!0,maxResults:99999,preload:0,sortAlphabetically:!0,showNew:!1, newText:" - <em style='color:red;'>Baru!</em>"},i;for(i in tabbedTOC_defaults)tabbedTOC_defaults[i]=void 0!==typeof tabbedTOC[i]&&"undefined"!==typeof tabbedTOC[i]?tabbedTOC[i]:tabbedTOC_defaults[i]; function clickTab(c){for(var e=document.getElementById(tabbedTOC_defaults.containerId),b=e.getElementsByTagName("ol"),e=e.getElementsByTagName("ul")[0].getElementsByTagName("a"),f=0;f<b.length;f++)b[f].style.display="none",b[parseInt(c,10)].style.display="block";for(b=0;b<e.length;b++)e[b].className="",e[parseInt(c,10)].className="active-tab"} function showTabs(c){var e=parseInt(c.feed.openSearch$totalResults.$t,10),b=tabbedTOC_defaults,f=c.feed.entry;c=c.feed.category;for(var a="",a=0;a<(!0===b.showNew?5:b.showNew)&&a!=f.length;a++)f[a].title.$t+=!1!==b.showNew?b.newText:"";f=b.sortAlphabetically?f.sort(function(a,b){return a.title.$t.localeCompare(b.title.$t)}):f;c=b.sortAlphabetically?c.sort(function(a,b){return a.term.localeCompare(b.term)}):c;for(var a='<span class="divider-layer"></span><ul class="toc-tabs">',g=0,m=c.length;g<m;g++)a+= '<li class="toc-tab-item-'+g+'"><a href="javascript:clickTab('+g+');">'+c[g].term+"</a></li>";a+='</ul><div class="toc-content">';g=0;for(m=c.length;g<m;g++){for(var a=a+('<ol class="panel" data-category="'+c[g].term+'"'),a=a+(g!=b.activeTab-1?' style="display:none;"':""),a=a+">",l=0;l<e&&l!=f.length;l++){var p,d=f[l],k=d.published.$t,h=b.monthNames,q=d.title.$t,r="summary"in d&&!0===b.showSummaries?d.summary.$t.replace(/<br ?\/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,b.numChars)+ "…":"",s="media$thumbnail"in d&&!0===b.showThumbnails?'<img class="thumbnail" style="width:'+b.thumbSize+"px;height:"+b.thumbSize+'px;" alt="" src="'+d.media$thumbnail.url.replace(/\/s72(\-c)?\//,"/s"+b.thumbSize+"-c/")+'"/>':'<img class="thumbnail" style="width:'+b.thumbSize+"px;height:"+b.thumbSize+'px;" alt="" src="'+b.noThumb.replace(/\/s72(\-c)?\//,"/s"+b.thumbSize+"-c/")+'"/>',n=d.category?d.category:[],k=b.showDates?'<time datetime="'+k+'" title="'+k+'">'+k.substring(8,10)+" "+h[parseInt(k.substring(5, 7),10)-1]+" "+k.substring(0,4)+"</time>":"",h=0;for(;h<d.link.length;h++)if("alternate"==d.link[h].rel){p=d.link[h].href;break}d=0;for(h=n.length;d<h;d++){var t=b.newTabLink?' target="_blank"':"";n[d].term==c[g].term&&(a+='<li title="'+n[d].term+'"',a+=b.showSummaries?' class="bold"':"",a+='><a href="'+p+'"'+t+">"+q+k+"</a>",a+=b.showSummaries?'<span class="summary">'+s+r+'<span style="display:block;clear:both;"></span></span>':"",a+="</li>")}}a+="</ol>"}a+="</div>";a+='<div style="clear:both;"></div>'; document.getElementById(b.containerId).innerHTML=a;clickTab(b.activeTab-1)}(function(){var c=document.getElementsByTagName("head")[0],e=document.createElement("script");e.type="text/javascript";e.src=tabbedTOC_defaults.blogUrl+"/feeds/posts/summary?alt=json-in-script&max-results="+tabbedTOC_defaults.maxResults+"&orderby=published&callback=showTabs";"onload"!==tabbedTOC_defaults.preload?setTimeout(function(){c.appendChild(e)},tabbedTOC_defaults.preload):window.onload=function(){c.appendChild(e)}})();
</script>
5. Ganti alamat blog yang berwarna merah.
6. Klik "Publish"!
Kini daftar isi keren sudah ada di blog Anda.
Source
0 Komentar untuk "Sitemap (Daftar Isi) Blogger Fast Loading, Simple, Unik!"