Kumpulan Menu Daftar Isi Keren & Tutorialnya

Model I

Kode Scriptnya :

<div align="center"> <b><u>DAFTAR ISI</u></b></div> <div dir="ltr" style="text-align: left;" trbidi="on"> <div style="border: 1px dashed #none; height: 700px; overflow: scroll; width: 300px;"> <script src="http://yourjavascript.com/76501835112/sitemap.js"> </script> <script src="http://dido-borneo.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"> </script></div> </div>

Cara Pemasangan :

Pada Menu Tata Letak
Klik Tambahkan Gadget
Pilih HTML/Javascript
Copy Paste Kode Scripnya, Tetapi Jangan Lupa untuk mengganti Alamat Blog yang berwarna Merah Diatas Dengan Alamat URL Sobat
Save dan Lihat Hasilnya

Model II

Kode scriptnya :

<style type="text/css">
#dafis-acc{ font-family:"Arial", Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#fff;padding:2px 0;}
.dafis-label{background:#161616; font-weight:bold; line-height:1.4em; overflow:hidden; white-space:nowrap; vertical-align: baseline; margin: 0px 3px; outline: none; cursor: pointer; text-decoration: none; padding: 2px 10px; color: greenyellow; text-shadow: 0 1px 1px rgba(0,0,0,.3); border-top:2px solid #404040;}
.dafis-label:hover{ color:greenyellow;opacity:0.4; }
.dafis-daf ol{ margin:0 0 0 30px !important; padding:0 !important;}
.dafis-daf ol li{line-height:1.5em; margin:1px 3px !important; white-space:nowrap; text-align:left;}
.dafis-daf ol li a{ text-decoration: none !important; color:#fff !important; display:block; padding-left:10px; }
.dafis-daf ol li a:hover{ background:#333; border-left: 5px #FF0000 solid; padding-left: 5px; text-shadow: 0 1px 1px rgba(0,0,0,.3);}
</style>

<script src="https://sites.google.com/site/didopalangkaraya/project/jquery.min.js" type="text/javascript"></script>
<script src="https://sites.google.com/site/didopalangkaraya/efek/Sitemap%20Dido.js" type="text/javascript"> </script>
<script src="http://dido-borneo.blogspot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc"> </script>

Cara Pemasangan :

Pada Menu Tata Letak
Klik Tambahkan Gadget
Pilih HTML/Javascript
Copy Paste Kode Scripnya, Tetapi Jangan Lupa untuk mengganti Alamat Blog yang berwarna Merah Diatas Dengan Alamat URL Sobat
Save dan Lihat Hasilnya
Model III

Kode Scriptnya :

<link rel="stylesheet" href="https://sites.google.com/site/didopalangkaraya/efek/tabbed-toc-skin.css"/>
<div id="tabbed-toc"><span class="loading">Wait.....</span></div>
<script>
var tabbedTOC = {
blogUrl: "http://Dido-Borneo.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: "https://sites.google.com/site/didopalangkaraya/project/Dido_Blank.png", // 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=" https://sites.google.com/site/didopalangkaraya/efek/tabbed-toc.js"></script>

Cara Pemasangan :

Pada Menu Tata Letak
Klik Tambahkan Gadget
Pilih HTML/Javascript
Copy Paste Kode Scripnya, Tetapi Jangan Lupa untuk mengganti Alamat Blog yang berwarna Merah Diatas Dengan Alamat URL Sobat
Save dan Lihat Hasilnya

Model IV

Kode Scriptnya :

Sama seperti Model III Diatas
Perhatikan Kode Berwarna Kuningnya
Ganti Kode tersebut dengan kode dibawah ini :

https://sites.google.com/site/didopalangkaraya/efek/tabbed-toc-skin%20II.css

Model V

Kode Scriptnya :

<div 1px="1px" solid="solid" style="height: 820px; overflow: auto; padding-bottom: 10px;
padding-left: 10px; padding-right: 10px; padding-top: 10px; width: auto;"><link href="https://sites.google.com/site/didopalangkaraya/project/Sitemap.css" media="screen" rel="stylesheet" type="text/css" /><script src="https://sites.google.com/site/didopalangkaraya/project/Daftar%20Isi%20Model%20IV.js"></script>
<script src="http://dido-borneo.blogspot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc"></script>
<script type="text/javascript">
var accToc=true;
</script> <script src="https://sites.google.com/site/didopalangkaraya/project/daftarisi%20Model%20IV.js" type="text/javascript"></script></div>

Cara Pemasangan :

Pada Menu Tata Letak
Klik Tambahkan Gadget
Pilih HTML/Javascript
Copy Paste Kode Scripnya, Tetapi Jangan Lupa untuk mengganti Alamat Blog yang berwarna Merah Diatas Dengan Alamat URL Sobat
Save dan Lihat Hasilnya

Black Accordion

Langkah Pertama

Sebelum Mengcopas script daftar isinya Pastikan terlebih dahulu Template sobat sudah terpasang jquery
Apabila belum terpasang, ikuti tutorial berikut ini :

Pada Dashboard, Pilih Template
Klik Edit HTML
Cari kode </head>
Copy Paste kode Script di bawah ini dan letakkan tepat di atas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

Langkah Kedua:

Masih Pada menu edit HTML, cari kode ]]></b:skin>
Copy Paste kode script daftar isi dibawah ini tepat diatas kode ]]></b:skin> tersebut

/*-----Daftar isi Black Accordion by Dido Borneo----*/
#dafis-acc {
font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
}
.dafis-label {
background: rgb(125,126,125);
background: -moz-linear-gradient(top, rgba(125,126,125,1) 0%, rgba(14,14,14,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,126,125,1)), color-stop(100%,rgba(14,14,14,1)));
background: -webkit-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
background: -o-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
background: -ms-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
background: linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 );
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
color: #A1A1A1;
text-transform:uppercase;
font-weight: bold;
line-height: 2em;
margin: 1px 3px;
cursor: pointer;
outline: medium none;
overflow: hidden;
padding: 2px 10px;
text-decoration: none;
text-align: center;
}
.dafis-label:hover {
color: #F2F2F2;
}
.dafis-daf ol {
margin: 0 0 0 30px !important;
padding: 0 !important;
}
.dafis-daf ol li {
background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
background: linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 );
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
line-height: 1.3em;
margin: 1px 3px !important;
text-align: left;
white-space: nowrap;
}
.dafis-daf ol li a {
color: #333333 !important;
display: block;
padding-top:5px;
padding-left: 10px;
text-decoration: none !important;
}
.dafis-daf ol li a:hover {
color:f2f2f2;
padding-left: 5px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}

Simpan Template

Langkah Ketiga (Terakhir)

Masuk Pada Menu Tata Letak
Klik Tambahkan Gadget
Pilih HTML/Java Script
Copy Paste kode script dibawah ini

<script src="https://sites.google.com/site/didopalangkaraya/project/DaftarIsi-BlackAccordion.js" type="text/javascript">
</script>
<script src="http://dido-borneo.blogspot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc">
</script>

Ganti Url Blog berwarna merah Diatas dengan Url Blog sobat sendiri

= Semoga Bermamfaat =

Kumpulan Menu Daftar Isi Keren & Tutorialnya

b.drop-shadow { text-shadow: 2px 2px 3px red }Related Post:

Related Post: