MENAMPILKAN DAFTAR ISI ALPHABETIK DENGAN MARQUEE

Daftar isi dari sebuah blog dapat ditampilkan dalam berbagai cara. Salah satunya, dengan menampilkan daftar isi secara alphabetik yaitu penampilan daftar isi berdasarkan huruf awal / pertama dari judul postingan. Selain itu tutorial ini juga menampilkan jumlah komentar dari setiap postingan.
Agar dapat menghemat tempat, daftar isi ini ditambah fasilitas marquee dengan efek gerak dari kanan kekiri secara berterusan.

Langkah-langkah menerapkan pada blog.

• Masuk ke Blogger.
• Pilih Rancangan bagian Elemen Halaman.
• Klik tambah gadget pada tempat yang ingin anda tambahkan trik ini. Bisa diatas post, diatas/dibawah header, atau pada sidebar. Silahkan nada pilih.
• Pilih HTML/JavaScript.
• Copy script dibawah ini dan paste pada kolom yang tersedia.
  
  
  
  <center> <div style="text-shadow:4px 4px 4px #adadad; font-size: 14px; color: white;"><b>Daftar Isi :</b></div> <div style="border: 2px solid white; background: blue; padding:2px; width:95%; font-size: 17px; color:white;"> <b><!-- Alphabetical/chronological Post Title Listing with comment count Start --> <script type="text/javascript"> function getYpipeTL(feed) { document.write('<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="7">'); var i; for (i = 1; i < feed.count ; i++) { var href = "'" + feed.value.items[i].link + "'"; var pTitle = feed.value.items[i].title + "</a> | "; var pComment = " \(" + feed.value.items[i].commentcount + " comments\)"; var pList = "</a>" + "<a href="+ href + '">' + pTitle; document.write(pList); document.write(pComment); document.write('</a></li>'); } document.write('</marquee>'); } </script> <script src="http://pipes.yahoo.com/pipes/pipe.run? YourBlogUrl=http://epg-studio.blogspot.com &Order=alphabet &_id=401e43055731c1a29f1e1d3eb5e8e13f &_callback=getYpipeTL &_render=json" type="text/javascript"></script><span style=" float:left;"><p><a href="http://epg-studio.blogspot.com">Tutorial Blogger</a></p></span> <!-- Alphabetical Post Title Listing End --></b></div><center/></center></center>
• Cara Pengeditan :
  
  • text-shadow:4px 4px 4px yellow; = ukuran dan warna bayang dari judul.
  • font-size: 14px; color: white; = ukuran dan warna huruf judul.
  • Daftar Isi = judul.
  • background: blue; =latar dari tampilan
  • width:95%; = lebar tampilan (sengaja ditampilkan dalam % agar cocok pada setiap tempat).
  • font-size: 17px; color:white; = ukuran dan warna huruf judul post yang tampil
  • scrollamount="7"> = kecepatan gerak, makin besar makin cepat gerakannya.
  • YourBlogUrl=http://epg-studio.blogspot.com = ganti dengan URL blog anda
  • <a href="http://epg-studio.blogspot.com">Tutorial Blogger< = ganti dengan URL dan Titel Blog anda
• Klik tombol Simpan setelah selesai pengeditan tampilan.
• Selamat mencoba, semoga bermanfaat.

PENTING UNTUK ANDA BACA