Cara Membuat Daftar Isi Per Label dengan Sroll Box Secara Manual

Untuk membuat daftar isi per label dengan scroll box di sidebar blog secara manual seperti yang saya terapkan pada blog ini, silakan simak langkah-langkahnya di bawah ini. Sebelum mengikuti cara ini, silakan Sobat memasang widget daftar isi karya Abu Farhan seperti yang terpasang di blog ini.
  1. Buka daftar isi blog Sobat.
  2. Blok posting-posting dari label mana yang akan di ambil. Misalnya saya mengambil label Tips dan Trik. Setelah diblok, lalu klik kanan dan pilih Lihat Kode Sumber Teks yang Dipilih. (Saya menggunakan Firefox 5.0)
  3. Copy semua teks yang muncul di jendela Sumber DOM yang Dipilih.
  4. Masuk ke akun Blogger Sobat.
  5. Klik Rancangan > Elemen Laman > Tambah Gadget.
  6. Pilih HTML/JavaScript.
  7. Beri judul, paste kode tadi di Konten. Silakan diedit dan hapus kata-kata yang tidak diperlukan (seperti kata "New" dan lain-lain) sehingga susunannya akan menjadi seperti di bawah ini.
    8. <li><a href="http://hariyanto-pay.blogspot.com/2011/05/5-langkah-sederhana-membersihkan-ram.html">5 Langkah Sederhana Membersihkan RAM Komputer Lambat</a></li>
    <li><a href="http://hariyanto-pay.blogspot.com/2011/05/7-rahasia-mempercepat-kinerja-windows.html">7 Rahasia Mempercepat Kinerja Windows XP</a></li>
    <li><a href="http://hariyanto-pay.blogspot.com/2011/05/komputer-kamu-loading-lambat-mau-tau.html">Komputer Kamu Loading Lambat, Mau Tau Penyebabnya?</a></li>
    <li><a href="http://hariyanto-pay.blogspot.com/2011/05/melindungi-komputer-secara-manual-dari.html">Melindungi Komputer Secara Manual dari Serangan Virus (Windows)</a></li>
    <li><a href="http://hariyanto-pay.blogspot.com/2011/05/penyebab-komputer-lambat-loading.html">Penyebab Komputer Lambat Loading</a></li>
    <li><a href="http://hariyanto-pay.blogspot.com/2011/05/resetter-epson-printer-c90-dan-r230.html">Resetter Epson Printer C90</a></li>
    <li><a href="http://hariyanto-pay.blogspot.com/2011/05/tips-mendeteksi-keberadaan-virus.html">Tips Mendeteksi Keberadaan Virus</a></li>
    <li><a href="http://hariyanto-pay.blogspot.com/2011/05/tips-mengatasi-bootingloading-komputer.html">Tips Mengatasi Booting/Loading Komputer yang Lambat</a></li></ol>
  8. Kemudian berikan kode untuk scroll box-nya, sehingga hasilnya akan menjadi seperti ini.
    9. <div style="overflow:auto; width:auto; height:100px; padding:5px; border:1px solid #e6e4e3;">
    <ol><li><a href="http://hariyanto-pay.blogspot.com/2011/05/4-tips-trik-menghapus-virus-baru-yang.html">4 Tips Trik Menghapus Virus Baru Yang Tidak Terdeteksi Antivirus</a></li>
    <li><a href="http://hariyanto-pay.blogspot.com/2011/05/5-langkah-sederhana-membersihkan-ram.html">5 Langkah Sederhana Membersihkan RAM Komputer Lambat</a></li>
    <li><a href="http://hariyanto-pay.blogspot.com/2011/05/7-rahasia-mempercepat-kinerja-windows.html">7 Rahasia Mempercepat Kinerja Windows XP</a></li>
    <li><a href="http://hariyanto-pay.blogspot.com/2011/05/komputer-kamu-loading-lambat-mau-tau.html">Komputer Kamu Loading Lambat, Mau Tau Penyebabnya?</a></li>
    <li><a href="http://hariyanto-pay.blogspot.com/2011/05/melindungi-komputer-secara-manual-dari.html">Melindungi Komputer Secara Manual dari Serangan Virus (Windows)</a></li>
    <li><a href="http://hariyanto-pay.blogspot.com/2011/05/penyebab-komputer-lambat-loading.html">Penyebab Komputer Lambat Loading</a></li>
    <li><a href="http://hariyanto-pay.blogspot.com/2011/05/resetter-epson-printer-c90-dan-r230.html">Resetter Epson Printer C90</a></li>
    <li><a href="http://hariyanto-pay.blogspot.com/2011/05/tips-mendeteksi-keberadaan-virus.html">Tips Mendeteksi Keberadaan Virus</a></li>
    <li><a href="http://hariyanto-pay.blogspot.com/2011/05/tips-mengatasi-bootingloading-komputer.html">Tips Mengatasi Booting/Loading Komputer yang Lambat</a></li></ol>
    </div>
  9. Klik tombol SIMPAN.
  10. Pindahkan elemen ke tempat yang Sobat inginkan.
  11. Klik tombol SIMPAN.
Hasilnya menjadi seperti di bawah ini.

at
Labels: ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)