Thursday, August 11, 2011

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>

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
4. Jangan lupa klik Simpan dan lihat hasilnya.

Semoga bermanfaat.


Related Post

6 comments:

  1. Klo agan pinter jquery mending posting ja tutorial jtentang jquery mulai dari awal gan..
    mumpung belum terlalu banyak saingan..

    ReplyDelete
  2. betul banget tu yg di katakan comment pertama..
    posting ttng jquery aja sob... kebetulan saia juga pengen belajar.. jadi bisa bljr disini de' ...

    ReplyDelete
  3. wah thanks yah gan atas informasinya :) di bookmark dulu yah gan :) heheh terima kasih gan sudah berkunjung ke blog ane :) jgn lupa berkunjung lg yah gan :)

    http://bizinformation.org/id/www.crenboy.blogspot.com

    ReplyDelete
  4. @bisnisstylemagazine : sama2.thanks jg dah berkunjung ke gubuk ane yg sederhana. siip

    ReplyDelete

Mohon tinggalkan jejak/komentar sobat disini. Dilarang SPAM. Okey...