Cara membuat daftar isi menggunakan efek marquee

Tampilan Daftar isi dengan menggunakan efek marquee, tidak kalah menarik dengan daftar isi yang menggunakan menu drop down ataupun scroll box. Kelebihan daftar isi ini selain menghemat tempat, juga mempunyai tampilan efek gradasi pada backgroundnya. Dan yang lebih menarik lagi, daftar isi ini menggunakan efek marquee. Sehingga daftar isi terus bergerak keatas, dan daftar isi akan berhenti bila cursor mouse diletakkan tepat diatasnya. Kecepatan gerak daftar isi ditentukan oleh nilai scrollamount, semakin kecil nilainya maka akan semakin lambat.

Berikut ini adalah contoh daftar isi yang menggunakan efek marquee :

DAFTAR ISI :

• Cara Membuat Link Dalam Satu Halaman
• Cara membuat background warna gradasi
• Cara membuat tombol scroll "To Top"
• Cara pasang tombol share
• Cara mencari kode HTML
• Cara membuat Blog menjadi Dofollow
• Cara membuat textarea dengan tombol "select all"
• Cara membuat effek scroll pada Titel Bar
• Cara membuat tanggal otomatis update
• Cara Membuat Pop-up Window
• Cara Membuat Navigasi Halaman
• Cara Membuat Subscribe email pada blog
• Cara membuat efek shadow pada kotak dan gambar
• Cara Membuat Tabel (Tahap 2)
• Cara membuat List pada daftar
• Cara pasang Iklan diatas postingan
• Cara membuat "Embed ULR, HTML, Link Forum" dibawah artikel
• Cara membuat artikel berhubungan
• Cara Menambah widget pengatur Ukuran dan Warna teks pada Blog
• Cara Menambahkan Efek Teks pada Cursor Mouse
• Cara buat kotak Pencarian
• Cara buat Menu navigasi Drop-Down Horisontal
• Cara Membuat Label Animasi "blogumulus"
• Cara membuat Tag Cloud
• Cara Pasang Radio Online
• Cara Membuat label di blog
• Cara membuat Slider
• Cara membuat slideshow
• Cara Membuat variasi Font pada Teks
• Cara Buat Kotak atau Teks Area
• Cara membuat Scroll Box
• Cara Membuat Tabel (Tahap 1)
• Cara membuat Link Terbuka di halaman Baru
• Cara Menambah Gadget diatas Header
• Cara Buat Sitemap / Peta Situs
• Cara buat tabel kode warna
• Cara Membuat Teks Berjalan ( Marquee )
• Cara Membuat Refresh Otomatis pada Blog
• Cara Membuat Rounded Corner
• Cara membuat Text-Shadow
• Cara Memasang Background Gambar pada postingan
• Cara membuat daftar isi otomatis
• Cara Menambah Widget Jam pada Blog
• Cara Membuat Read more
• Cara Menghilangkan Navbar Pada blog
• Cara Membuat Navbar Auto-Hide
• Cara Membuat Forum Login
• Cara Membuat Anti Copy Paste
• Cara Membuat pesan selamat datang
• Cara Membuat Animasi Status Loading
• Cara Membuat Text Area blok Otomatis

Bila anda berminat, silahkan ikuti langkah - langkah dibawah ini :
1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML.






4. Seperti biasa alangkah baiknya setiap edit Html, Download dulu Template Lengkap (back-up Template) agar template aman, bila terjadi kesalahan.
6. Cari kode di bawah ini atau yang mirip dengan kode ini :

</head>

7. Copy kode di bawah ini dan taruh sebelum kode </head> :

<style type="text/css"> ul.daftarmarquee {list-style-image:url('https://lh4.googleusercontent.com/-27Jyus8- v70/TZEaf8q3zvI/AAAAAAAAAkc/g1g6bYQH7BM/s12/List%2B2.jpg');} <a href="http://www.carabuatwebgratis.com"></a> a.daftarmarquee:link {color:#000000;} a.daftarmarquee:link {text-decoration:none;} a.daftarmarquee:visited {text-decoration:none;} a.daftarmarquee:hover {text-decoration:none;} a.daftarmarquee:active {text-decoration:underline;} div.daftarmarquee { width: 100%; height: 200px; border-style:solid; border-style:double; border-color:#E6E6E6; padding-right:10; padding-top:10; padding-bottom:10; background: -moz-linear-gradient(center top, #c4d69f 0%,#ffffff 10%, #ffffff 90%, #c4d69f 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #c4d69f),color- stop(0.25, #ffffff),color-stop(1, #c4d69f)); } </style>

Catatan :

Anda bisa mengganti nilai width (lebar), height (tinggi), border-color, ataupun backgroundnya.
Untuk mengganti warna gradasi, anda bisa baca Cara membuat background warna gradasi

8. Simpan Template.

Langkah selanjutnya anda tinggal menampilkan Daftar isi pada halaman depan blog anda. Perhatikan langkah berikut :
1. Klik Rancangan dan pilih Elemen Laman

2. Tambah Gadget


3. Pada jendela baru anda Anda pilih gadget HTML/JavaScript







4. Copy dan paste kode dibawah ini pada gadget tersebut :

<center><b><span style="font-size: large;">DAFTAR ISI :</span></b><br /><div class="daftarmarquee"><marquee direction="up" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="2" width="280px"><br /><ul class="daftarmarquee"><li><a class="daftarmarquee" href="ULR ARTIKEL" target="_blank">JUDUL ARTIKEL</a></li><li><a class="daftarmarquee" href="ULR ARTIKEL" target="_blank">JUDUL ARTIKEL</a></li><li><a class="daftarmarquee" href="ULR ARTIKEL" target="_blank">JUDUL ARTIKEL</a></li><li><a class="daftarmarquee" href="ULR ARTIKEL" target="_blank">JUDUL ARTIKEL</a></li><li><a class="daftarmarquee" href="ULR ARTIKEL" target="_blank">JUDUL ARTIKEL</a></li><li><a class="daftarmarquee" href="ULR ARTIKEL" target="_blank">JUDUL ARTIKEL</a></li><li><a class="daftarmarquee" href="ULR ARTIKEL" target="_blank">JUDUL ARTIKEL</a></li><li><a class="daftarmarquee" href="ULR ARTIKEL" target="_blank">JUDUL ARTIKEL</a></li><li><a class="daftarmarquee" href="ULR ARTIKEL" target="_blank">JUDUL ARTIKEL</a></li><li><a class="daftarmarquee" href="ULR ARTIKEL" target="_blank">JUDUL ARTIKEL</a></li><li><a class="daftarmarquee" href="ULR ARTIKEL" target="_blank">JUDUL ARTIKEL</a></li></ul></marquee><a href="http://www.carabuatwebgratis.com"></a></div></center><br />

Keterangan :

• Bila ingin menambahkan daftar isi sesuai kebutuhan anda, caranya tinggal menambah kode seperti ini :

<li><a class="daftarmarquee" href="ULR ARTIKEL" target="_blank">JUDUL ARTIKEL</a></li>

• Silahkan ganti ULR ARTIKEL dan JUDUL ARTIKEL pada kode diatas.

5. Simpan

Selamat mencoba dan Semoga bermanfaat.... Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini. Jangan lupa luangkan waktu untuk beri komentar ya......, Terima kasih.