Membuat Kotak Daftar Isi

Apakah anda punya keinginan untuk membuat kotak daftar isi seperti di blog saya ini? Daftar Isi tersebut saya letakkan pada bagian bawah blog ini. Sebenarnya trik ini sudah banyak blogger yang mempublikasikannya, namun tidak ada salahnya trik tersebut saya muat kembali dengan contoh Kotak Daftar Isi blog saya, agar pembaca lebih mudah memahami trik ini.

Blogger Tutorial

Membuat Kotak Daftar Isi

Mengganti Username Dengan Nama Diri di Friendster

Mengganti Username Dengan Nama Diri di Facebook

Cara Membuat Contact Form Atau Kontak Kami

Trik Mengubah Background Blog

Mengubah Tanggal Postingan Menjadi Icon Kalender

Animasi Gambar Dengan Photoshop

Trik Mengubah Password di Yahoo

Trik Mengubah Password di Gmail

Cara Mudah Download Video dari Youtube

Cara Membuat Blog

Tata Cara Menghapus 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 :

<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/AVvXsEhrGHuXbBlOi5rWkO9oIGHKg8xOA_hlJiE5Koc-xCvXBQhIueQ39r7rb8kT7a0afO3LTS31HhUbds06OQ_gjM4AlmoeeJegZK7GG-jy1gR7nk4pckQ4mlen40v3POn4moKUgE2RDKZmXdH9/") 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>
<div class="list">
<a href="http://makassar-09.blogspot.com/2009/08/mengganti-username-dengan-nama-diri-di.html">Mengganti Username Dengan Nama Diri di Facebook</a></div>
<div class="list">
<a href="http://makassar-09.blogspot.com/2009/07/cara-membuat-contact-form-atau-kontak.html">Cara Membuat Contact Form Atau Kontak Kami</a></div>
<div class="list">
<a href="http://makassar-09.blogspot.com/2009/07/mengubah-background-blog.html">Trik Mengubah Background Blog</a></div>
<div class="list">
<a href="http://makassar-09.blogspot.com/2009/07/animasi-gambar-dengan-photoshop.html">Animasi Gambar Dengan Photoshop</a></div>
<div class="list">
<a href="http://makassar-09.blogspot.com/2009/07/cara-mengubah-password-pada-yahoo.html">Trik Mengubah Password di Yahoo</a></div>
<div class="list">
<a href="http://makassar-09.blogspot.com/2009/07/cara-mengubah-password-pada-gmail.html">Trik Mengubah Password di Gmail</a></div>
<div class="list">
<a href="http://makassar-09.blogspot.com/2009/06/cara-mudah-download-video-dari.html">Cara Mudah Download Video dari Youtube</a></div>
<div class="list">
<a href="http://makassar-09.blogspot.com/2009/06/internet-sebuah-dunia-yang-tidak-asing.html">Cara Membuat Blog</a></div>
<div class="list">
<a href="http://makassar-09.blogspot.com/2009/06/tata-cara-menghapus-blog-di-blogger.html">Tata Cara Menghapus Blog</a></div>

<div class="list"></div></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.

SELAMAT MENCOBA