Cari Artikel Blog Ini

Total Tayangan Laman

MEMBUAT DAFTAR ISI LENGKAP DENGAN FILE JS

Membuat daftar isi blog secara manual pada bagian sidebar blog sangat melelahkan, apalagi jika postingan artikel jumlahnya sudah ratusan. Untuk mengatasi masalah tersebut, anda dapat membuatnya dengan sangat mudah yaitu dengan menggunakan file Java Script ( js ). Trik membuat daftar isi kali ini selain menampilkan judul seluruh postingan artikel juga judul postingan tersebut terpisah berdasarkan label dari postingan tersebut.
Satu lagi...postingan yang baru dipublikasikan, secara otomatis ditambah kata New!! berwarna merah yang letaknya disebelah kanan judul postingan.
Pokoknya trik yang satu ini akan memuaskan anda jika ditampilkan pada blog anda dan tentunya akan lebih memudahkan pengunjung mendapatkan artikel yang dicarinya tanpa harus bersusah payah.
Langkah-langkahnya :
  1. Masuk ke Blogger.
  2. Pilih Rancangan bagian Elemen Halaman.
  3. Klik tambah gadget.
  4. Pilih HTML/JavaScript.
  5. Copy script dibawah ini dan paste pada kolom yang tersedia.

    <script style="text/javascript" src="https://sites.google.com/site/epgstudiosite/javascript/daf.isi.js"></script>
    <script src="http://epg-studio.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>


    Ganti http://epg-studio.blogspot.com dengan URL blog anda
  6. Klik tombol Simpan.
  7. jika daftar isi terlalu panjang, tambahkan fungsi scroll, sehingga kodenya seperti ini :


    <div style="overflow:auto;width:300px;
    height:200px;padding:10px;
    border:1px solid #eee">
    <script style="text/javascript" src="https://sites.google.com/site/epgstudiosite/javascript/daf.isi.js"></script>
    <script src="http://epg-studio.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>

    </div>

  8. Anda atur ukuran width dan height sesuai keperluan.


Sumber : abu-farhan.com

Jika artikel ini bermanfaat..? Bagikan lewat :


BACA JUGA ARTIKEL DIBAWAH INI



Comments
8 Comments

8 komentar :

YPPWH mengatakan...

Ship bos, dah sukses mih daftar isinya

king mengatakan...

masih gagal mas...hanya muncul tulisan DAFTAR ISI dan kotak kosong saja. apanya yg kurang?

Ades mengatakan...

@king Kemungkinan anda tidak mengganti url/alamat blog dengan alamat blog anda.
Postingan ini udah dicoba beberapa kali dan berhasil.

KOS KOMPUTER BLOG'S mengatakan...

Pertamax neh gan... ud ane coba berhasil di blog ane.. nicee js bro

Ades mengatakan...

Tips ini udah dicoba berkali-kali dan hasilnya ok. Kegagalan yang anda alami mungkin ada kesalahan dalam kode atau belum selesai loadingnya,karena file js loadingnya agak lambat.
Silakan anda coba lagi...

Asoka Isron mengatakan...

Kalau mau mengecilkan Font nya bagaimana Mas?? Ini Blog saya Biografi tokoh terpopuler dunia saat ini

Nandez Ozonu mengatakan...

sep.
makasih mas trick na.

lam kenal.
http://dnhozonu.blogspot.com/

Rudy Hartono mengatakan...

thanks atas infonya, salam kenal

Poskan Komentar

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