Tips Membuat Daftar Isi Dengan Efek Scroll
Tips saya kali ini melanjutkan artikel sebelumnya tentang Tips Membuat Widget Blogroll Dengan Efek Scroll. Kali ini kita akan membuat Daftar Isi dengen efek scroll menggunakan bantuan kode javascript. Keunggulan dari widget ini selain dapat menghemat pemakaian ruangan pada blog juga dapat mempercantik tampilan blog kita serta mempersingkat penulisan kode html/javascript karena setiap daftar isi akan di tampilkan secara otomatis ketika kita baru selesai menulis artikel plus dengan urutan nomor artikel dari yang terbaru sampai yang terlama.
Silahkan lihat screenshot-nya dibawah ini.
Bagaimana? menarik bukan. Apabila anda tertarik berikut cara membuatnya.
1. Seperti biasa login ke akun blog anda.
2. Klik Rancangan> Elemen Laman > Tambah Gadget > HTML/JavaScript
3. Copy-paastekan kode HTML/JavaScript berikut ini :
<div style="border: 1px solid #ffffff; overflow: auto; height: 240px; width: 200px; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 10px;">
<script style="text/javascript" src="https://sites.google.com/site/mariozoner/javascript/daftar-isi-scroll.js"></script>
<script style="text/javascript">
var numposts = 500;
var showpostdate = false;
var showpostsummary = false;
var numchars = 100;
var standardstyling = true;
</script>
<script src="http://alamaturlblogAnda.blogspot.com/feeds/posts/default?
orderby=published&alt=json-in-script&max-results=999
&callback=showrecentposts"></script>
</div>
<script style="text/javascript" src="https://sites.google.com/site/mariozoner/javascript/daftar-isi-scroll.js"></script>
<script style="text/javascript">
var numposts = 500;
var showpostdate = false;
var showpostsummary = false;
var numchars = 100;
var standardstyling = true;
</script>
<script src="http://alamaturlblogAnda.blogspot.com/feeds/posts/default?
orderby=published&alt=json-in-script&max-results=999
&callback=showrecentposts"></script>
</div>
Setting :
- Kode yang berwarna hijau silahkan anda setting sesuai keinginan anda.
- Untuk kode yang berwarna biru ganti dengan url alamat blog anda. contoh : http://mariozoner.blogspot.com
Semoga bermanfaat. jangan lupa di koment ya
Show
0 Comments
prev
next
