Tampilan Daftar isi dengan 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.

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

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 :

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. 

Share

Like

G+

Tweet

Tweet

Ditulis Oleh : Unknown ~ Czikart Software

Anda sedang membaca sebuah artikel yang berjudul Tampilan Daftar isi dengan menggunakan efek marquee , Silahkan download software, games, Antivirus ataupun tutorial sepuasnya secara gratis di czikart software dan tetap kunjungi czikart software. Dan bagi yang ingin Copy Paste, Silahkan sertakan link sumbernya karena kami tidak bertanggung jawab jika blog/web anda dihapus oleh google kareana tidak menyertakan link sumbernya sesuai aturan dari google, Semoga artikel tersebut bermanfaat untuk anda, Mohon maaf apabila konten yang anda baca rusak atau salah dalam penulisan. Jika ada pertanyaan, kritik, dan saran yang ingin di sampaikan silahkan komentar.

:: Terima Kasih ! ::

Artikel Terkait Menarik Lainnya :

Posted in: My Document