Blog Cinangka

Cara Membuat 3 Kolom di Bawah Header pada Blogge

Posted by Taufiq Rohman Wednesday, October 19, 2011
Share this Article on :

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>
  9. Kemudian berikan kode untuk scroll box-nya, sehingga hasilnya akan menjadi seperti ini.
  10. <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>
  11. Klik tombol SIMPAN.
  12. Pindahkan elemen ke tempat yang Sobat inginkan.
  13. Klik tombol SIMPAN.

Related Post:

Post a Comment