Membuat Sitemap Daftar isi Super Keren di Blog

        Sitemap atau daftar isi blog adalah kumpulan link dari postingan yang sudah pernah di posting di blog tersebut. Widget daftar isi kali ini sangat istimewa karena memiliki tampilan super keren simple dan elegan. Untuk demonya sendiri bisa dilihat di halaman daftar isi blog ini disini.  Tertarik untuk memasangnya?

   

Cara Membuat Sitemap atau Daftar isi Super Keren di Blog

  Ok untuk memasangnya mudah saja silahkan ikuti langkah berikut ini:
1. Siapkan 1 halaman baru, yang nantinya akan menjadi halaman sitemap atau daftar isi kamu.
2. Beri judul Sitemap atau daftar isi
3. Kemudian ganti mode postnya kedalam mode HTML, dengan cara mengklik buton bertuliskan html
4. Masukan kode berikut ini di kotak postingan yang sudah meng aktifkan mode HTML tadi.

<style type="text/css">
#tabbed-toc {
  margin:0 auto;
  background-color:#50b7dc;
-webkit-box-shadow: rgba(0,0,0,0.3) 0px 2px 2px -1px;
-moz-box-shadow: rgba(0,0,0,0.3) 0px 2px 2px -1px;
box-shadow: rgba(0,0,0,0.3) 0px 2px 2px -1px;
  overflow:hidden;
  position:relative;
  color:#fff;
border: 1px solid #2aa4cf;
}
#tabbed-toc .loading {
  display:block;
  padding:5px 10px;
  font:normal bold 12px Tahoma,Sans-Serif;
  color:white;
}
#tabbed-toc ul,
#tabbed-toc ol,
#tabbed-toc li {
  margin:0 0;
  padding:0 0;
  list-style:none;
}
#tabbed-toc .toc-tabs {
  width:35%;
  float:left;
}
#tabbed-toc .toc-tabs li a {
  display:block;
  font-family: 'Source Sans Pro', Arial, Helvetica, Geneva, sans-serif;
  font-size: 13px;
  height:28px;
  overflow:hidden;
  text-overflow:ellipsis;
  color:#fff;
  text-transform:uppercase;
  text-decoration:none;
  padding:2px 12px;
  cursor:pointer;
padding-top: 10px;
}
#tabbed-toc .toc-tabs li a:hover {
  background-color:#2aa4cf;
  color:#fff;
}
#tabbed-toc .toc-tabs li a.active-tab {
  background-color:#2aa4cf;
  color:white;
-webkit-box-shadow: rgba(0,0,0,0.3) 0px 2px 2px -1px;
-moz-box-shadow: rgba(0,0,0,0.3) 0px 2px 2px -1px;
box-shadow: rgba(0,0,0,0.3) 0px 2px 2px -1px;
  position:relative;
  z-index:5;
  margin:0 -1px 0 0;
  /* cursor:text; */
}
#tabbed-toc .toc-content,
#tabbed-toc .divider-layer {
  width:65%;
  float:right;
  background-color:white;
  border-left:5px solid #2aa4cf;
  -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;
-webkit-box-shadow: rgba(0,0,0,0.3) 0px 2px 2px -1px;
-moz-box-shadow: rgba(0,0,0,0.3) 0px 2px 2px -1px;
box-shadow: rgba(0,0,0,0.3) 0px 2px 2px -1px;
}
#tabbed-toc .panel {
  position:relative;
  z-index:5;
  font-family: 'Source Sans Pro', Arial, Helvetica, Geneva, sans-serif;
  font-size: 11px;
}
#tabbed-toc .panel li a {
  display:block;
  position:relative;
  font-weight:700;
  font-size:11px;
  color:#222;
  line-height:20px;
  height:20px;
  padding:0 12px;
  text-decoration:none;
  outline:none;
  overflow:hidden;
}
#tabbed-toc .panel li time {
  display:block;
  font-style:italic;
  font-weight:normal;
  font-size:10px;
  color:#222;
  float:right;
}
#tabbed-toc .panel li .summary {
  display:block;
  padding:10px 12px 10px;
  font-style:italic;
  border-bottom:4px solid #2aa4cf;
  overflow:hidden;
}
#tabbed-toc .panel li .summary img.thumbnail {
  float:left;
  display:block;
  margin:0 8px 0 0;
  padding:4px 4px;
  width:72px;
  height:72px;
  border:1px solid #dcdcdc;
  background-color:#50b7dc;
}
#tabbed-toc .panel li:nth-child(even) {
  background-color:#EAEAEA;
}
#tabbed-toc .panel li a:hover,
#tabbed-toc .panel li a:focus,
#tabbed-toc .panel li a:hover time,
#tabbed-toc .panel li.bold a {
  background-color:#2aa4cf;
  color:#fff;
  outline:none;
}
#tabbed-toc .panel li.bold a:hover,
#tabbed-toc .panel li.bold a:hover time {
  background-color:#2aa4cf;
}
@media (max-width:700px) {
  #tabbed-toc {
    border:2px solid #2aa4cf;
  }
  #tabbed-toc .toc-tabs,
  #tabbed-toc .toc-content {
    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 {
    background-color:#2aa4cf;
    -webkit-box-shadow:2px 0 7px rgba(0,0,0,.4);
    -moz-box-shadow:2px 0 7px rgba(0,0,0,.4);
    box-shadow:2px 0 7px rgba(0,0,0,.4);
  }
  #tabbed-toc .toc-tabs li a.active-tab {
    background-color:white;
    color:#333;
  }
  #tabbed-toc .toc-content {
    border:none;
  }
  #tabbed-toc .divider-layer,
  #tabbed-toc .panel li time {
    display:none;
  }
}
</style>

<div id="tabbed-toc">
<span class="loading">Loading...</span></div>
<a href="http://ciskulnet.blogspot.com/" style="display: block; font-family: 'Source Sans Pro', Arial, Helvetica, Geneva, sans-serif; font-size: 11px; font-weight: 700; margin: 9px; text-align: right; text-decoration: none;" title="Daftar Isi">Widget by Ciskulnet</a>
<script type="text/javascript">
var tabbedTOC = {
    blogUrl: "http://ciskulnet.blogspot.com",
    containerId: "tabbed-toc",
    activeTab: 1,
    showDates: false,
    showSummaries: false,
    numChars: 200,
    showThumbnails: false,
    monthNames: [
        "Januari",
        "Februari",
        "Maret",
        "April",
        "Mei",
        "Juni",
        "Juli",
        "Agustus",
        "September",
        "Oktober",
        "November",
        "Desember"
    ],
    newTabLink: true,
    maxResults: 99999,
    preload: 0 // Load the feed after 0 seconds (option => time in milliseconds || "onload")
};
</script>
<script type="text/javascript">
function clickTab(e){var t=document.getElementById(tabbedTOC_defaults.containerId),n=t.getElementsByTagName("ol"),r=t.getElementsByTagName("ul")[0],i=r.getElementsByTagName("a");for(var s=0;s<n.length;s++){n[s].style.display="none";n[parseInt(e,10)].style.display="block"}for(var o=0;o<i.length;o++){i[o].className="";i[parseInt(e,10)].className="active-tab"}}function showTabs(e){var t=parseInt(e.feed.openSearch$totalResults.$t,10),n=tabbedTOC_defaults,r=e.feed.entry,i=e.feed.category,s="",o=[];for(var u=0;u<(n.showNew===true?5:n.showNew);u++){if(u==r.length)break;r[u].title.$t=r[u].title.$t+(n.showNew!==false?n.newText:"")}r=n.sortAlphabetically?r.sort(function(e,t){return e.title.$t.localeCompare(t.title.$t)}):r;i=n.sortAlphabetically?i.sort(function(e,t){return e.term.localeCompare(t.term)}):i;s='<span class="divider-layer"></span><ul class="toc-tabs">';for(var a=0,f=i.length;a<f;a++){s+='<li class="toc-tab-item-'+a+'"><a href="javascript:clickTab('+a+');">'+i[a].term+"</a></li>"}s+="</ul>";s+='<div class="toc-content">';for(var l=0,c=i.length;l<c;l++){s+='<ol class="panel" data-category="'+i[l].term+'"';s+=l!=n.activeTab-1?' style="display:none;"':"";s+=">";for(var h=0;h<t;h++){if(h==r.length)break;var p,d=r[h],v=d.published.$t,m=n.monthNames,g=d.title.$t,y="summary"in d&&n.showSummaries===true?d.summary.$t.replace(/<br ?\/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,n.numChars)+"…":"",b="media$thumbnail"in d&&n.showThumbnails===true?'<img class="thumbnail" style="width:'+n.thumbSize+"px;height:"+n.thumbSize+'px;" alt="" src="'+d.media$thumbnail.url.replace(/\/s72(\-c)?\//,"/s"+n.thumbSize+"-c/")+'"/>':'<img class="thumbnail" style="width:'+n.thumbSize+"px;height:"+n.thumbSize+'px;" alt="" src="'+n.noThumb.replace(/\/s72(\-c)?\//,"/s"+n.thumbSize+"-c/")+'"/>',w=d.category?d.category:[],E=n.showDates?'<time datetime="'+v+'" title="'+v+'">'+v.substring(8,10)+" "+m[parseInt(v.substring(5,7),10)-1]+" "+v.substring(0,4)+"</time>":"";for(var S=0;S<d.link.length;S++){if(d.link[S].rel=="alternate"){p=d.link[S].href;break}}for(var x=0,T=w.length;x<T;x++){var N=n.newTabLink?' target="_blank"':"";if(w[x].term==i[l].term){s+='<li title="'+w[x].term+'"';s+=n.showSummaries?' class="bold"':"";s+='><a href="'+p+'"'+N+">"+g+E+"</a>";s+=n.showSummaries?'<span class="summary">'+b+y+'<span style="display:block;clear:both;"></span></span>':"";s+="</li>"}}}s+="</ol>"}s+="</div>";s+='<div style="clear:both;"></div>';document.getElementById(n.containerId).innerHTML=s;clickTab(n.activeTab-1)}var tabbedTOC_defaults={blogUrl:"http://ujangyoyo.blogspot.com",containerId:"tabbed-toc",activeTab:1,showDates:false,showSummaries:false,numChars:200,showThumbnails:false,thumbSize:40,noThumb:"http://3.bp.blogspot.com/-vpCFysMEZys/UOEhSGjkfnI/AAAAAAAAFwY/h1wuA5kfEhg/s72-c/grey.png",monthNames:["Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember"],newTabLink:true,maxResults:99999,preload:0,sortAlphabetically:true,showNew:false,newText:" - <em style='color:red;'>Baru!</em>"};for(var i in tabbedTOC_defaults){tabbedTOC_defaults[i]=typeof tabbedTOC[i]!==undefined&&typeof tabbedTOC[i]!=="undefined"?tabbedTOC[i]:tabbedTOC_defaults[i]}(function(){var e=document.getElementsByTagName("head")[0],t=document.createElement("script");t.type="text/javascript";t.src=tabbedTOC_defaults.blogUrl+"/feeds/posts/summary?alt=json-in-script&max-results="+tabbedTOC_defaults.maxResults+"&orderby=published&callback=showTabs";if(tabbedTOC_defaults.preload!=="onload"){setTimeout(function(){e.appendChild(t)},tabbedTOC_defaults.preload)}else{window.onload=function(){e.appendChild(t)}}})();
</script> 

5. Ubah kode berwarna merah dengan link blog kamu
6. Klik publikasikan dan lihat hasilnya

        Widget ini akan menampilkan semua postingan kamu yang sudah di publikasikan dan mengelompokannya sesuai labelnya secara otomatis.

    Diusahakan tidak mengubah script diatas karena akan mempengaruhi hasil widget tersebut. Untuk widget blogger lainnya bisa kamu lihat disini.
Ok sekian postingan hari ini tunggu terus updatean dari ciskulnet ya :D, terimakasih sudah membaca postingan kami