Berikutnya , copy dan pastekan kode dibawah ini di halaman html statis daftar isi tadi
<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://www.masyadi.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>
94 Komen Membuat Daftar Isi Blog Keren Otomatis dan responsive
pertamaxxx.....! ^_^
Daftar Isi nya keren banget gan..
langsung Coba aja deh diblog gw :)
SHARE cara membuat related post seperti di blog ini dong
silahkan ambil pertamaxnya di pombensin terdekat :D
silahkan di coba mas fikri
ini sama dengan evo magz
muantap mas Yadi, thank share nya ya
Saya masih bingung gan hehe
terima kasih y mas bagus banget :) simple tapi enak dipandang :D good job.
Sukses gan, thanks ya!
Selanjutnya, folback, hehe...
Keren lansung bisa dipraktekan. Mantap gan thx infonya
Penjelasannya bagus dan detail menyertakan berbagai sumber yang terpercaya
Info untuk menghasilkan uang (memonetize) dari blog, website dan bisnis online bisa belajar dengan mengklik link di bawah ini
http://www.asianbrain.com/letter.html/903484
ini yang saya cari gan ,,trim banyak atas infonya , ijin tempelkl diblog saya hehehhee ,,,
http://penelusuranartikel.blogspot.com/search/label/Tutorial
iya sama - sama
kenapa bingung gan ? kan tinggal copy kodenya doang :-?
hehehhe , makasih pak pandu ;)
woke brow :D
:ng malah promosi
Gan untuk memilih lebel yang di inginkan saja bisa ngak gan
sbb ane main blog hp
kan ada produk n tipe@
jadi@ kacau balau gan
mohon tanggapan@ gan :)
makasih ya, daftar isi blogku jadi keren!
sip mas keren abis...
maaf gan mau tanya kalau buat postingan tapi dalam satu page itu berisi banyak
saya mau buat label "TOOLS SSH" nah nanti kalu di klik kluarnya daftar isi tolls ssh terbaru
itu gmna?
my site
http://allsimccard.blogspot.com/
Thanks Gan udah aku terapin di blog aku :D
Makasih mas....
ijin make... :)
Thanks om... dicoba ternyata... wuuiiss... mantep om... ahai.... :D
oia om, saya ijin modif sedikit yah... hehehe
Makasih Mas Yadi, langsung dipasang. It woks :))
makasih infonya..
aku izin copy kodenya yaaaa,
Keren juga nih, :)
Di Blog saya Gabisa :(
tak ada perubahan masih memuat ajj
Bagus sekali hasilnya. Terima kasih gan
siap uji coba gan
thanks u gan atas ilmunya, sungguh bermanfaat :)
sudah di terapkan di halaman utama hehe kunjungan balik ya
keren tutorialnya. mkasih mas.
kalo yang begini biasa nya di tanam link di dalam nya jadi akan merusak seo website mas , tapi nice share ya
keren mas.. (y)
pas dapet langsung di cobaa hehe
Makasih mas...
keren gan Daftar Isinya
Thanks!
berkunjung ke blog saya gan
Beritahuaja
Beritahuaja
saya sudah mencoba mencopy tapi ada informasi
HTML anda tidak bisa diterima, Tag Putus:EM
siip, mantep.. dah ane coba dan kereen.. thank brother..
terimakasih tutorialnya,,, sudah saya prkatikan dan berhasil
hahah coba dulu yah mas siapa tahu cocok
Thanks gan work di website saya. keren juga tampilannya :D
mantap daftar isinya keren,.... tks
ini memang harus loading dulu ya?? pny ane loading nya lama bgt
gan itu daftar isinya ada Scrool nya gk?
Yes berhasil, terimakasih kawan..
Terima kasih bang, sangat membantu.. masih pemula soalnya..hee
mantap gan...(y)
thanks gan...sangat membantu
succes gan...
makasih gan. sudah terpasang di blog saiyah. ijin nulis ulang artikel nya ya mas. mampir juga ke blog saya gan. mohon pencerahan nya. blog saya masih baru gan. mo saya isi tentang wirausaha dan bisnis. hehehe. masih belajar semua gan.
ndak bisa gan, masih kurang ngerti tahapannya
Makasih ya mas
Thank Gan... Blog Ane Sekarang Jadi Profesional
Daftar Isi kayak gini yang aku cari Mas, Terimakasih share-nya Sangat membantu.
Sukses! terima kasih mas :)
makasih mas, langsung praktek ya ?
makasi gan keren banget gan,
Mas, mau tanya.
mengganti warna yang ada di side bar menjadi warna yang di inginkan caranya bagaimana mas?
cara melebarkannya gmna bang? yang diubah bagian mana?
Makasih mase good luck
Makasih gan udah puyeng gw nyarinya ehhh dapatnya di sini.....
udah work 100%, hanya saja gw letakin di side bar yg ukurannya 310px,
jadi label nya gak lengkap alias kepotong kalo tulisannya panjang....
http://emboss-studio.blogspot.com
kalo mau ngasih border di pinggirannya gimana gan, soalnya kurang gimana gitu kalo g ada bordernya ?
btw, keren tampilannya...
kok gak ada perubahan
mas minta eclipsenya
\
trimakasih masyadi , telah saya praktekan dan berjalan sempurna
wah, tampilannya begitu keren sekali ya mas, mau saya ganti ni rencananya daftar isi saya :D
trimakasih mas infonya sangat membantu
waaah..works di blog saya nie mas..thanks yaa..
wahh thanks gan, artikelnya sangat bermanfaat :)
Thanks bro..
Sangat membantu artikelnya..
Terima kasih, izin memakai di blog saya mas :-) @Pelajarizone
Makasih gan, sangat membantu. Dari tadi mondar-mandir nyari skripnya gk ada yg berhasil. Eh ketemu di sini langsung berhasil. Mantap dah (y) Makasih ya mas. :)
Nice Info Bro mampir ~> entergeh.blogspot.com
Terimakasih Mastahh
ijin pasang mas yadi. ini yang kucari soalnya gak menampilkan credit si pembuat
Terimakasih mas....ijin praktek
aku akan mencobanya
ty min... Lumayan..
kunjungi punya saya.. :D
myasong.blogspot.co.id
Terima kasih.
Keren Kang Hasilnya Makasih..jangan lupa mampir kang ke blog saya http://arthadiansafety.blogspot.co.id/
sangat membantu mas
udah gak work mas, udah di cekal HTTPS, soalnya ada koding http yang mencurigakan
thanks Mas Brow...aku coba berbagai cara ternyata hanya ramuan mas bro yang jos gandos...aku yang bego ato script kemaren kemaren yang gak se good punya mas bro..
om sya udah cba kok gk ada hasilnya y. tlong kasih sran pda saya om plz.....
busuk tauk
mas , bagi tahu donk cara membuat menu kaya' yang diatas itu
mas , tolong kasih tahu cara membuat menu seperti diatas
tak merespon gan,, terus memuat laman daftar isi..
tutor udah saya ikutin gan
Ini yang selama ini saya cari, penjelasanya sgt lengkap, thanks gan atas infonya
= > Silahkan berkomentar sesuai artikel diatas
= > Berkomentar dengan url ( mati / hidup ) tidak akan di publish