0 CARA MEMBUAT DAFTAR ISI BLOG

Adapun langkah-langkahnya adalah sebagai berikut :

1. Login ke Blogger
2. Buka Menu Layout atau Tata Letak -> Page Element atau Elemen Halaman
3. Klik Add a Gadget atau Tambah Gadget -> Lalu pilih HTML/Javascript
4. Copy paste kode berikut ini ke dalam kotak Konten :

CARA 1 DENGAN TULISAN FONT BERBEDA

<div style="background: rgb(25, 65, 110) none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-top: 0px; margin-left: 0px; font-size: 14px; font-weight: bold; width:305px; height: 25px; padding-top: 5px; text-align: center; color: rgb(255, 255, 255);"><marquee><span style=";font-family:Verdana;font-size:18px;color:red;"> "TABLE OF CONTENT"</span></marquee></div><style>.list {background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpBOsQk8mpiKpFblf-F2vXuA9BTa1JPXt2tdDUYJV_ahhxOuGkDwGVJ1k6CuByMxZ0lXk-o5yc2FBo0Jd0w6K3dkB1WD3pq2YtWJF60N0_kaNf48M1BQIphD1kjGZ5yXeI6Hp23QCTQrSK/") no-repeat left center;border-bottom:1px dotted #ddd;line-height:1.2em;padding:3px 0px 0px 20px;}</style>
<div style="overflow:auto; padding:3px; margin:0px 0px 0px 0px; width:300px; height:150px; background- border:1px solid #ffffff;">

<div class="list">
<a href="http://engyoso.blogspot.com/2011/01/css-dalam-istilah-html-di-blog.html">ISTILAH CSS DALAM BLOG</a></div>

CARA 2 DENGAN FONT STANDART

<div style="background: rgb(28, 66, 109) none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-top: 0px; margin-left: 0px; font-size: 14px; font-weight: bold; width:280px; height: 25px; padding-top: 5px; text-align: center; color: rgb(255, 255, 255);"><blink>Blogger Tutorial</blink></div><style>.list {background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpBOsQk8mpiKpFblf-F2vXuA9BTa1JPXt2tdDUYJV_ahhxOuGkDwGVJ1k6CuByMxZ0lXk-o5yc2FBo0Jd0w6K3dkB1WD3pq2YtWJF60N0_kaNf48M1BQIphD1kjGZ5yXeI6Hp23QCTQrSK/") no-repeat left center;border-bottom:1px dotted #ddd;line-height:1.2em;padding:3px 0px 0px 20px;}</style>
<div style="overflow:auto; padding:3px; margin:0px 0px 0px 0px; width:280px; height:200px; background- border:1px solid #ffffff;">

<div class="list">
<a href="http://makassar-09.blogspot.com/2009/08/mengganti-username-dengan-nama-diri-di_11.html">Mengganti Username Dengan Nama Diri di Friendster</a></div>

 

KETERANGAN :

Untuk mengubah lebar serta tinggi Kotak Daftar Isi perhatikan kode width:280px dan height:200px. Silahkan otak atik nilainya sesuai selera mau diperbesar atau diperkecil. Dan URL yang berwarna merah silahkan ganti sesuai dengan alamat URL postingan di blog anda, sedang tulisan berwarna biru merupakan keterangan yang muncul pada Kotak Daftar Isi silahkan ganti tulisan tersebut sesuai pokok bahasan dipostingan blog anda.