Cari Artikel Blog Ini

Total Tayangan Laman

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.

Jika artikel ini bermanfaat..? Bagikan lewat :


BACA JUGA ARTIKEL DIBAWAH INI



Comments
1 Comments

1 komentar :

ryan basta mengatakan...

wah.... ini ni gan yang aq cari....

thanks a gan....

kalw smpat, kunjung n follow balik blog aq juga ya gan....

http://bastaryan.blogspot.com/

Poskan Komentar

Ceritakan keberhasilan/kegagalan anda setelah mencoba Tutorial Blogger pada kotak komentar. Kritik dan Saran juga boleh asal sifatnya membangun...!!!