Cara Membuat Daftar Isi Otomatis Pada Blogspot

Tips cara membuat Daftar Isi Otomatis pada Blog (Blogspot). Untuk membuat Daftar Isi Otomatis pada Blog secara otomatis gunakan kode berikut. Ada beberapa macam kode yang bisa kita gunakan. Dalam membuat Daftar Isi Otomatis pada Blog ini harus disesuaikan dengan jenis Template yang anda gunakan atau pilih yang cocok.


Langkah Cara Membuat Daftar Isi Otomatis Di Blog:

~ Login dan masuk ke dasboard blog anda
~ Klik Menu > Laman (Pages)
~ Klik > Buat Laman (New pages)

~ Pada Form yang muncul, klik di HTML (bukan Compose)
~ Kopi paste (masukkan) kode di bawah ini di form HTML tadi dan pada kotak Judul isi dengan judul '' DAFTAR ISI ''

Yang perlu anda perhatikan, pilih salah satu jenis kode dibawah ini, karena tidak semua kode dibawah cocok dengan Template anda (tergantung jenis Template yang digunakan). Cara penerapannya sama, yang pasti anda harus mengganti alamat URL-nya dengan URL blog anda.



KODE 1

<script src="http://gumregut.blogspot.com/files/sitemap%281%29.js"></script><script src="http://gagaje.blogspot.com/feeds/posts/default?max-results=999&amp;alt=json-in-script&amp;callback=loadtoc"></script>


KODE 2

<div style="overflow:auto; border: 1px solid #000000; margin: auto; padding: 3px; width: 100%; height: 500px; background-color: none; text-align: left;"> <script src="http://gumregut.blogspot.com/files/sitemap%281%29.js"></script><script src="http://gumregut.blogspot.com/feeds/posts/default?max-results=999&amp;alt=json-in-script&amp;callback=loadtoc"></script></div>


KODE 3

<style scoped="scoped" type="text/css">
/* Skin for Blogger Tabbed Layout TOC */
#tabbed-toc{margin:0 auto;background-color:#224C19;-webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);-moz-box-shadow:0 1px 3px rgba(0,0,0,.4);box-shadow:0 1px 3px rgba(0,0,0,.4);overflow:hidden;position:relative;color:#333}
#tabbed-toc .loading{display:block;padding:5px 10px;font:normal bold 10px/normal Helmet,Freesans,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:20%;float:left}
#tabbed-toc .toc-tabs li a{display:block;font:normal bold 10px/28px Helmet,Freesans,Sans-Serif;height:28px;overflow:hidden;text-overflow:ellipsis;color:#ccc;text-transform:uppercase;text-decoration:none;padding:0 12px;cursor:pointer}
#tabbed-toc .toc-tabs li a:hover{background-color:#153615;color:white}
#tabbed-toc .toc-tabs li a.active-tab{background-color:#275827;color:white;-webkit-box-shadow:-2px 2px 2px rgba(0,0,0,.5);-moz-box-shadow:-2px 2px 2px rgba(0,0,0,.5);box-shadow:-2px 2px 2px rgba(0,0,0,.5);position:relative;z-index:5;margin:0 -1px 0 0;/* cursor:text;*/}
#tabbed-toc .toc-content,#tabbed-toc .divider-layer{width:80%;float:right;background-color:white;border-left:5px solid #275827;-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:0 0 7px rgba(0,0,0,.7);-moz-box-shadow:0 0 7px rgba(0,0,0,.7);box-shadow:0 0 7px rgba(0,0,0,.7)}
#tabbed-toc .panel{position:relative;z-index:5;font:normal normal 10px/normal Helmet,Freesans,Sans-Serif}
#tabbed-toc .panel li a{display:block;position:relative;font-weight:bold;font-size:11px;color:#892412;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:#666;float:right}
#tabbed-toc .panel li .summary{display:block;padding:10px 12px 10px;font-style:italic;border-bottom:4px solid #275827;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:#fafafa}
#tabbed-toc .panel li:nth-child(even){background-color:#FFE8E3}
#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:#333;color:white;outline:none}
#tabbed-toc .panel li.bold a:hover,#tabbed-toc .panel li.bold a:hover time{background-color:#222}
@media (max-width:700px){#tabbed-toc{border:2px solid #333}#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:#224C19;-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>

<br />
<div id="tabbed-toc">
<span class="loading">Memuat...</span></div>
<script>
var tabbedTOC = {
    blogUrl: "http://gumregut.blogspot.com/", // Blog URL
    containerId: "tabbed-toc", // Container ID
    activeTab: 1, // The default active tab index (default: the first tab)
    showDates: false, // `true` to show the post date
    showSummaries: false, // `true` to show the posts summaries
    numChars: 200, // Number of summary chars
    showThumbnails: false, // `true` to show the posts thumbnails (Not recommended)
    thumbSize: 40, // Thumbnail size
    noThumb: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC", // A "no thumbnail" URL
    monthNames: [ // Array of month names
        "Januari",
        "Februari",
        "Maret",
        "April",
        "Mei",
        "Juni",
        "Juli",
        "Agustus",
        "September",
        "Oktober",
        "November",
        "Desember"
    ],
    newTabLink: true, // Open link in new window?
    maxResults: 99999, // Maximum post results
    preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload")
    sortAlphabetically: true, // `false` to sort posts by published date
    showNew: 7, // `false` to hide the "New!" mark in most recent posts, or define how many recent posts are to be marked
    newText: " - <em style='color:red;'>New!</em>" // HTML for the "New!" text
};
</script>
<script src="http://dte-project.googlecode.com/svn/trunk/tabbed-toc.js"></script>


KODE 4

     <div style="overflow:auto; border: 1px solid #000000; margin: auto; padding: 3px; width: 100%; height:270px; background-color: none; text-align: left;">
<script style="text/javascript" src=" http://mastergomaster.googlecode.com/files/daftar%20isi%20blog.js "></script>
<script src="http://gumregut.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script></div>


KODE 5

<script type="text/javascript">
//<![CDATA[
var postTitle=new Array();var postUrl=new Array();var postMp3=new Array();var postDate=new Array();var postYear=new Array();var postMonth=new Array();var postYearMonth=new Array();var postYearMonth2=new Array();var postTanggal=new Array();var postLabels=new Array();var postBaru=new Array();var sortBy="titleasc";var tocLoaded=false;var numChars=250;var postFilter="";var numberfeed=0;var month2=["January","February","March","April","May","June","July","August","September","October","November","December"];function loadtoc(a){function b(){if("entry" in a.feed){var d=a.feed.entry.length;numberfeed=d;ii=0;for(var h=0;h<d;h++){var m=a.feed.entry[h];var e=m.title.$t;var l=m.published.$t.substring(0,10);var p=m.published.$t.substring(5,7);var g=m.published.$t.substring(8,10);var n=month2[parseInt(p,10)-1]+" "+m.published.$t.substring(0,4);var c="/"+m.published.$t.substring(0,4)+"_"+p+"_01_archive.html";var j;for(var f=0;f<m.link.length;f++){if(m.link[f].rel=="alternate"){j=m.link[f].href;break}}var o="";for(var f=0;f<m.link.length;f++){if(m.link[f].rel=="enclosure"){o=m.link[f].href;break}}postTitle.push(e);postDate.push(l);postUrl.push(j);postYearMonth.push(n);postYearMonth2.push(c);postTanggal.push(g)}}}b();displayToc2()}function displayToc2(){var a=0;var b=0;while(b<postTitle.length){temp1=postYearMonth[b];document.write("<p/>");document.write('<a href="'+postYearMonth2[b]+'"><b>Sitemap Of '+temp1+"</b></a><ul>");firsti=a;do{document.write("
<li>");document.write('<a href="'+postUrl[a]+'">'+postTitle[a]+" on gumregut</a>");document.write("</li>
");a=a+1}while(postYearMonth[a]==temp1);b=a;document.write("</ul>
");if(b>postTitle.length){break}}};//]]>
</script>
<script src="http://gumregut.blogspot.com/feeds/posts/default?max-results=500&amp;alt=json-in-script&amp;callback=loadtoc">
</script>

Silahkan anda ganti url dengan alamat url blog anda.

~ Kemudian Klik > Publikasikan (Publish)

Selanjutnya anda tinggal memasukkan alamat link daftar isi tersebut jika anda ingin membuat menu horisontal, silakan klik di bagian Daftar isi (lihat di sebelah kanan halaman) untuk mencari tips membuat menu horisontal dan tips lainnya.

Cara membuat Daftar Isi sudah selesai. Silahkan anda mencobanya dan semoga bisa membantu. Sekian tips Cara Membuat Daftar Isi Secara Otomatis.