Cara Membuat widget Daftar Isi di Blog menurut label post
Membuat widget daftar isi sangat
mudah. Persiapannya hanyalah, setiap posting harus di beri label. Label
berfungsi sebagai nama kategori dalam daftar isi. Langsung chek this out!!!
1. Buka Blogger ,
klik Layout, pilih posisi daftar isi yang kamu inginkan.
2. Klik Add Gadget
3. Klik
HTML/JavaScript
4. Ketikan nama
daftar isi, dalam tittle box.
5. Copy paste
berikut
<div dir="ltr" style="text-align: left;"
trbidi="on">
<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: "", // 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>
</div>
Berikut ilustrasinya.
Klik Save
Klik Save Arragement
Dan Berikut hasilnya...
