Selasa, 26 Juni 2012

Salah satu bagian yang cukup penting dalam sebuah blog adalah daftar isi, karena dengan itu pembaca bisa melihat isi dari blog secara global. 


Langkah Pertama :
  • Login ke akun Blogger kamu
  • Dari halaman dashboard, pilih Template
  • Kemudian Edit HTML, centang "Expand Template Widget"
  • Cari kode ]]></b:skin>
  • Copykan script berikut dan letakkan diatas kode ]]></b:skin> tersebut
 Kode :
#toc { border: 0px solid #8A4B08; background: transparent; padding:2px; width:495px; margin-top:10px;}

.toc-header-col1, .toc-header-col2,

.toc-header-col3 { background: #8A4B08; color: transparent; padding-left: 5px; width:250px;}

.toc-header-col2 { width:75px;}

.toc-header-col3 { width:125px;}

.toc-header-col1 a:link, .toc-header-col1 a:visited,

.toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link,

.toc-header-col3 a:visited { font-size:100%; text-decoration:none;}

.toc-header-col1 a:hover,

.toc-header-col2 a:hover,

.toc-header-col3 a:hover { font-size:100%; text-decoration:underline; color:#3D3F44;}

.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 { padding-left: 5px; font-size:100%; background: transparent;}
Keterangan : Warna hijau menunjukan kode warna yang bisa kamu ganti sesuai dengan warna blog kamu.

Langkah Kedua :
  • Klik Page Element
  • Klik Add Gadget
 AddGadget
  • Klik plus button (+) for HTML/JavaScript 
 HTML
  •  Copy kode dibawah ini
Kode :
<div id="toclink"><a href="javascript:showToc();">LIHAT DAFTAR ISI</a><br /><br /></div>
<script style="text/javascript" src="http://sites.google.com/site/kibagusnet/x-design/blogtoc.js"></script>
<script src="http://davidchielietonga06.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script>
<br />
<div style="-moz-background-clip: -moz-initial; -moz-background-inline-policy: -moz-initial; -moz-background-origin: -moz-initial; -moz-border-radius-bottomleft: 0px; -moz-border-radius-bottomright: 0px; -moz-border-radius-topleft: 0px; -moz-border-radius-topright: 0px; background: transparent url(#) no-repeat scroll 0 0 ; border: 1px solid rgb(204, 204, 204); height: 150px; margin: 10px 0px; overflow: auto; padding: 10px; text-align: center; width: auto;">

<div id="toc"></div>

</div>

Keterangan :
  • Pasang widget tersebut diatas posting, karena daftar isi ini membutuhkan tempat yang cukup lebar, kalau kamu ingin di pasang pada tempat lain dengan lebar minim tidak menjadi masalah karena pada script ini telah aku tambah script fungsi scroll ( warna kuning ) agar bisa fleksible dengan konsekuensi scroll akan muncul karena lebar template tidak cukup.
  • Ganti  kode >LIHAT DAFTAR ISI< dengan kata kata kamu sendiri.
  • Ganti  kode http://davidchielietonga06.blogspot.com/feeds/posts/default dengan URL kamu sendiri.

Leave a Reply

Jika ingin copy paste artikel ini, jangan lupa sertakan sumbernya ya, hargai usaha admin ^^, Kalau mau komentar jangan yang bersifat menghina maupun mengejek. Tidak sopan tau hahaa. Terima kasih sudah berkunjung ke blog ku. Jangan lupa di follow dan pasang banner ku ya \^^,/

Subscribe to Posts | Subscribe to Comments

Arsip Blog

Ayat Alkitab

Friend's Banner

Copyright © 2013 David As'Chri ChieLietonga 06 | Robotic Notes | Powered by Blogger

Designed by : Johanes Djogan | Redesignde by : David As'Chri ChieLietonga 06: Cara Membuat Daftar Isi Otomatis Versi 1