Cara membuat Daftar Isi Auto Scroll

Anda mungkin ingin menampilkan Daftar Isi Artikel yang sudah diposting, tertata secara berurut ke bawah pada sidebar blogger anda, tapi anda kurang sreg melihat daftar isi tersebut (terlalu panjang kebawah). Tak perlu bingung. Anda dapat mensiasatinya dengan menggunakan MARQUEE VERTICAL WITH PAUSE, yaitu sroll secara automatis keatas (vertical) yang saat mouse diletakkan diatasnya (mouse over), tulisan berhenti scroll dan sebaliknya jika mouse keluar (mouse out), tulisan akan bergerak kembali.

Selain itu dengan tehnik yang sama, Daftar Komentar juga bisa anda buat seperti itu.

Tehniknya mudah
Pertama-tama:
1. Login blog sobat
2. Rancangan >> Elemen halaman >> tambah Gadget (HTML/JavaScript)
3. lalu masukkan kode dibawah ini :

Copy Pasta Script dibawah ini

<script>
function gml(json) {
document.write('<marquee scrolldelay="180" direction="up" onmouseover="this.stop()" width="170px" onmouseout="this.start()">');
for (var i = 0; i <= json.feed.openSearch$totalResults.$t - 1; i++) {
document.write('<p style="padding : 2px">');
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k <= entry.link.length - 1; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
posttitle = posttitle.link(posturl);
var readmorelink = "(more)";
readmorelink = readmorelink.link(posturl);
var postdate = entry.published.$t;
var cdyear = postdate.substring(0,4);
var cdmonth = postdate.substring(5,7);
var cdday = postdate.substring(8,10);
var monthnames = new Array();
monthnames[1] = "Jan";
monthnames[2] = "Feb";
monthnames[3] = "Mar";
monthnames[4] = "Apr";
monthnames[5] = "May";
monthnames[6] = "Jun";
monthnames[7] = "Jul";
monthnames[8] = "Aug";
monthnames[9] = "Sep";
monthnames[10] = "Oct";
monthnames[11] = "Nov";
monthnames[12] = "Dec";
if ("content" in entry) {
var postcontent = entry.content.$t;
} else if ("summary" in entry) {
var postcontent = entry.summary.$t;
} else
var postcontent = "";
var re = /<\S[^>]*>/g;
postcontent = postcontent.replace(re, "");
document.write(posttitle);
if (showpostdate == true)
document.write('<br/>');
document.write(cdyear + ' ' + monthnames[parseInt(cdmonth,10)] + ' ' + cdday);
if (showpostsummary == true) {
document.write('<br><br/>');
if (postcontent.length <= numchars -1) {
document.write(postcontent);
} else {
postcontent = postcontent.substring(0, numchars);
var quoteEnd = postcontent.lastIndexOf(" ");
postcontent = postcontent.substring(0,quoteEnd);
document.write(postcontent + '...' + readmorelink);
}
}
document.write('</p>');
}
document.write('</marquee>');
}
</script>
<script>
var showpostdate = true;
var showpostsummary = true;
var numchars = 150;
</script>

<script src="http://anggavoith.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=gml"></script>

Keterangan:

Ganti tulisan yang berwarna merah dengan alamat blog anda
kemudian simpan (save)

Untuk Daftar Komentar

script dibawah ini

<script src="http://anggavoith.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=gml"></script>

ganti dengan

<script src="http://anggavoith.blogspot.com/feeds/comments/default?orderby=published&alt=json-in-script&callback=gml"></script>

tulisan yang berwarna merah ganti dengan alamat anda
kemudian Simpan (save)

Selamat mencoba!

Tweet