Pilihan Daftar Isi Menawan Untuk Blog Anda

Assalamualaikum jika kemaren saya membagikan cara membuat daftar isi dengan tema galery
Pada kesempatan ini saya akan share mengenai cara membuat daftar isi tetapi dengan tampilan sedikit berbeda dengan daftar isi daftar isi sebelumnya langkahnya tidak jauh beda dengan daftar isi yang lain lansung saja gan kita ke langkah pembuatannya....

Masuk blog anda
pilih menu laman/laman baru
kemudian pada box postingan pilih mode html

Jika sudah segera letakan kode dibawah ini pada box yang tersedia

<div dir="ltr" style="text-align: left;" trbidi="on">
<style type="text/css">
#dafis-acc{ font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#333; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQPCQqxVb95jNBcCkKzXbjUrF_15Kyoz5PFHU2guFrYjCDYXZPeNWPHGdckcCG9OEGAidtWh91DfCwDDjnJ_wknRWfIdRqFwSNr0Adb3uezQ77u0B8cWscKgZ6X-DpBMHGzeRJJvOWZD0/d/bg5.gif) repeat-y scroll left center #E7F7FB; padding:2px 0; border:1px solid #339DC6; } .dafis-label{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYtHeiJ2Xkn0bg6NdqaYE1mM7KTuE0Oqsgr1AzdPrN1MkrpuP9tCK4wd8zskCbalbEsGRhF_OU65E-iCf-2KcGZVSHEUw2Jy2-yWVLYwVOwR5CFismPEZbEDCBqqiGTD9kuoYc9FtTlfI/d/bg4.gif) repeat-x scroll 0 0 #E1F4FB; font-weight:bold; line-height:1.4em; overflow:hidden; white-space:nowrap; vertical-align: baseline; margin: 1px 3px; outline: none; cursor: pointer; text-decoration: none; padding: 2px 10px; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.3); border:1px solid #2F94BA; } .dafis-label:hover{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs8HKTZKc2vMwF_yRioIVIrNR9C-8L6KCbfGl8IvjQPzfZnk-v-rpuJsUhyphenhyphengA_widJ-HC_0J34B-cH4Pkj1gwAXZUarWesp7RaU_h6utIYYGwV4ggA4z04tKN41uCk0L-7OXSjFbxir_A/d/bg2.gif) repeat-x scroll 0 0 #E1F4FB; color:#003366; } .dafis-daf ol{ margin:0 0 0 30px !important; padding:0 !important; } .dafis-daf ol li{ background-color:#C9E9F4; line-height:1.5em; margin:1px 3px !important; white-space:nowrap; text-align:left; border:1px solid #339DC6; } .dafis-daf ol li a{ text-decoration: none !important; color:#333 !important; display:block; padding-left:10px; } .dafis-daf ol li a:hover{ background: #7BC4DF; border-left: 5px #333 solid; padding-left: 5px; text-shadow: 0 1px 1px rgba(0,0,0,.3); }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="https://farhanshare-blogspot-com.googlecode.com/files/sitemap%20%281%29.js" type="text/javascript"></script><script src="http://ngeblogbarengbareng.blogspot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc"></script>
</div>

Catatan : untuk kode berwarna merah silahkan diganti dengan URL Blog agan 

jika sudah silahkan dipublikasikan dan lihat hasilnya

saya kira penjelasannya sudah cukup jelas selamat mencoba semoga bermanfaat...