Rabu, 10 November 2010

Cara Membuat Daftar isi Blog Automatis pada Sidebar

Pada postingan saya berikut ini ingin berbagi tips pada teman2 sekalian yang mungkin sangat membutuhkan yakni cara pasang daftar isi blog otomatis di Sidebar Blog kalian, artinya dapat mengakses seluruh postingan kalian yang sudah ada sebelumnya dan sudah dilengkapi fungsi Scroll, pada postingan saya kali ini sekaligus memberikan 2 (dua) efek sekaligus, selanjutnya kalian yang memilih mana yang lebih menarik. Pertama Efek Scroll, kedua Efek Marquee
Adapan cara pasang Widget daftar isi otomatis tersebut, sebagaimana biasanya menggunakan Script HTML.
Berikut Caranya:
Pertama Login di Blog kalian, selanjutnya masuk ke Rancangan.
Selanjutnya ke Elemen Halaman pilih Tambah Gadget/Add Gadget
Kemudian pilih HTML/Java Script, Langsung Copy/Paste Code yang ada dibawah ini kedalam kolom HTML tersebut, dan klik Simpan/SAve.
Selesai deh.

Berikut Code Scriptnya :

Efek Scroll

<div style="border: 1px solid #000; overflow: auto; height: 400px;">
<script style="text/javascript" src="https://sites.google.com/site/bloggermyblog/TableOfContents.js"></script>
<script style="text/javascript">
var numposts = 1000;
var showpostdate = false;
var showpostsummary = false;
var numchars = 100;
var standardstyling = true;
var shownumposts = true;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&max-results=999&callback=showrecentposts"></script>
</div>
<div align="right" style="padding:16px 5px 5px 5px;font-size:11px">
<a href="http://azrut91.blogspot.com/2010/08/cara-membuat-widget-daftar-isi-otomatis.html" target="_blank" style="color:#000">Powered By Blogger</a>
</div>

Efek Marquee

<marquee direction="down" onmouseover="this.stop()" width="100%" onmouseout="this.start()" scrollamount="2" height="200"><br/><br/><script style="text/javascript" src="http://adesanusi.googlepages.com/daftar-isi.txt"></script><script style="text/javascript">var numposts = 100;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script><script src="http://adhityangeblog9.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&max-results=999&callback=showrecentposts"></script><br/><br/></marquee>

Catatan : Tulisan tebal kuning diganti dengan kode blog kalian.

Selamat Mencoba dan hasilnya memuaskan.