31 December 2011

Membuat Scroll Box pada Blog Archive


Sidebar dari blog ini berada di sebelah kanan blog post, Sobat blogger bisa lihat sendiri sebenarnya tanpa perlu saya jelaskan. Terdapat widget Arsip Blog disana yang saya setting dengan setting Dropdown Menu. Kalau kita menggunakan Kalu saya gunakan setting Flat List, maka arsip blog saya akan terlihat seperti gambar di bawah ini :

arsiv blog, archieve blog, blog archieve, scroll box blog archieve, scrolling blog arsip

Dan kalau saya atur secara Hierarchy, maka arsip blog saya akan tampil seperti ini:

arsiv blog, archieve blog, blog archieve, scroll box blog archieve, scrolling blog arsip

Kalau jumlah post atau artikel yang kita sudah publikasikan di atas 100 (Seratus) kemudian kita setting arsip blog kita dengan Hierarchy atau Flat List, tentunya widget arsip blog kita akan terlihat panjang. Solusi yang paling tepat untuk mengatasi tampilan widget arsip blog yang terlalu panjang adalah dengan cara Membuat Scroll Box pada Blog Archive. Bagimana cara membuatnya? Ikuti langkah-langkah berikut:

Cara Membuat Scroll Box pada Blog Archive :
  • Sign In di http://www.blogger.com/
  • Klik Menu Rancangan, lalu pilih Edit HTML.
  • Kasih tanda Centang pada Expand Widget Template
  • Cari kode berikut <div id='ArchiveList'>
  • Perhatikan kode sebelum kode tersebut!

arsiv blog, archieve blog, blog archieve, scroll box blog archieve, scrolling blog arsip

  • Hapus kode <div class='widget-content'>
  • Lalu ganti dengan <div class='widget-content' style='overflow:auto; height:200px'>
  • Klik Simpan Template

Tambahan :
200px adalah ukuran tinggi Scroll Box, Silahkan disesuaikan dengan tinggi Scroll Box yang sobat blogger inginkan



Baca tutorial menarik lainnya di bawah ini :

25 comments:

  1. ini kelihatannya lebih simple ane coba dolo gan, makasoh untuk share triknya

    ReplyDelete
  2. Wahid Sahidu...
    Cara itu memang sangat mudah...
    Silahkan di coba...
    Insyaallah berhasil.

    ReplyDelete
  3. nice tutorial :)
    simple ..!

    klo smpet mampir lah kgubuk reyot ane di http://chumchumsoft.blogspot.com/
    heheheh

    salam blogger! ;)

    ReplyDelete
  4. Chum Chum Soft...
    Wait me there!!!
    I am going to visit your blog.

    ReplyDelete
  5. terima kasih sob atas artikelnya, tetapi setelah saya coba tidak berhasil dan kode yang saya masukkan error, gimana tu?

    oya tukeran link yuk agar menambah keakraban kita hee..hee

    ReplyDelete
  6. wow gampang bgt cara nya (y)

    ok mas thanks banyak yaa atas postingan nya
    bermanfa'at bgt ni

    jangan Lupa mampir ya
    http://irwantz.blogspot.com/

    ReplyDelete
  7. kok g bisa ya bos ,padahal saya udah masukin cara2 tersebut

    ReplyDelete
  8. punya saya kok error ya mas...udah bisa jadi scroll tapi jika artikel nya di klik , jadi ga bisa di baca alias ilang, mohon pencerahan nya gan, http://dinasti-kadam.blogspot.com/

    terima kasih sebelum nya....

    ReplyDelete
  9. sangaaat membantu :)
    terimakasih banyak :D

    mampir ke blog aku ya

    ReplyDelete
  10. Trima kasih yah... mampir ke blog aku juga..:)

    ReplyDelete
  11. ada tips widget baru nich... Cobain ya sob.. Makasih...

    ReplyDelete
  12. Saya coba terapkan gan, trims ya. Ditunggu kunjungannya...

    ReplyDelete
  13. terima kasih banyak nih sangat membantu artikelnya, ijin copas ya ilmunya..hhihi

    ReplyDelete
  14. terima kasih

    Buat pengunjung yang kebetulan kehabisan pulsa dan lagi malas beli pulsa tapi ingin sms/balas sms yang penting atau hanya sekedar ingin tau , ayo coba sms gratis silahkan kunjungi blog saya

    link :
    Shinobi23

    lihat paling bawah sebelah kanan ada kolom sms gratis
    jangan lupa tinggalkan komentar
    semoga bermanfaat

    ReplyDelete
  15. saya terapkan dulu ke blog saya, btw nice share mampir dan komen juga di blog saya tq

    ReplyDelete
  16. berhasil gan , hehe , waktu itu kebingungan saya

    ReplyDelete
  17. <a href="http://pusatobatherbal.bravesites.com/entries/general/mengapa-kencing-perih-dan-keluar-nanah>penyakit gonore kemaluan keluar cairan nanah</a>

    ReplyDelete