Daftar
isi sangatlah penting di semua wacana seperti di buku articel maupun di
blogger ataupun website, daftar isi guna mempermudah pengunjung untuk
menemukan daftar yang mereka inginkan dan memudahkan untuk pencarian isi
blog yang ada di blog kita. Posting kali ini saya akan berbagi tips
membuat daftar isi blog pada postingan, dengan fasilitas terdapat kata
new!! bila anda update articel terbaru....
Unruk contohnya anda bisa lihat di sini: DEMO
ScreenShoot:
langsung aja ikuti langkah-langkah ini untuk pembuatannya :
1. login ke blogger
2.Pilih Posting trus entri baru.
3.Pilih Edit HTML dan copas script dibawah ini di dalamnya.
<div ;="" margin="3px" style="-moz-border-radius: 5px; border: 1px solid #32A50C; height: 500px; overflow: auto;">
<script src="http://amminessalafy.googlecode.com/files/daftarisi.js">
</script>
<script src="http://amminessalafy.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc">
</script></div>
4. Ganti tulisan yang berwarna Biru dengan alamat blog Anda.
5. Ubah tanggal penerbitan pada tanggal pertama kali anda mulai menulis artikel dengan mengeklik Opsi entri.
6. Kemudian Terbitkan dan lihat hasilnya.
7. Selesai, dan lihat hasilnya.
langsung aja ya!.
Pertama buka Blogger > Rancangan > Edit HTML > jangan lupa klik Expand Template Widget
Kalo Udah Copy Kode dibawah ini!
#toTop { text-align:center; position:fixed; bottom:0px; right:10px; cursor:pointer; display:none; color:#000; font-family:verdana; font-size:11px;}
Taruh Code diatas, diatas tag ]]></b:skin>
Oke! Lanjut ke kode </head> n taruh script di bawah ini, dibawah kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'/><script type='text/javascript'>$(function() { $(window).scroll(function() { if($(this).scrollTop() > 100) { $('#toTop').fadeIn(); } else { $('#toTop').fadeOut(); } });
$('#toTop > img').click(function() { $('body,html').animate({scrollTop:0},800) .animate({scrollTop:25},200) .animate({scrollTop:0},150) .animate({scrollTop:10},100) .animate({scrollTop:0},50); }); });</script>
kalo udah Copy kode dibawah ini!
<div id='toTop'><!-- Back to top animation written by farizemo | edited by ilham mboh --><img src='http://picturestack.com/408/690/3RMToTopyonbijEz.png' style='margin-right:-9px'/></div>
Code yang berwarna merah kamu ganti dengan url gambar kamu sendiri
Lalu klik
SIMPAN TEMPLATE
Lihat Hasilnya!
Sekian mas bro semoga berhasil n bermanfaat!
By : Rahman De Cyber Genesis
