Cara Membuat Blog Archive dengan Scroll Bar yang keren

Untuk membuat pengunjung dapat mengakses postingan lama pada blog biasanya blogger akan memasang sebuah widget Archive Blog atau Arsip Blog. Tapi tampilan Archive blog bawaan blogger biasanya kurang rapi.

Maka supaya tampilan Archive Blog menjadi lebih rapi dan enak dipandang, kali ini, saya mau berbagi cara menambah scroll bar pada widget Archive Blog.

Contoh tammpilan archive blog tidak rapi

Scroll bar yang dipasangkan pada widget Archive Blog akan sangat berguna terutama untuk blog yang sudah memiliki banyak artikel yaitu agar tidak memakan banyak tempat ke bagian bawah pada sidebar.

Contohnya penggunaan scroll bar bisa dilihat pada gambar di bawah ini:

Blog Archive dengan scroll bar

Cara Membuat Blog Archive dengan Scroll Bar silahkan disimak yaa...

1. Login blogger ---> Tata Letak/ Layout ---> Tambahkan Gadget/ Add Gadget pada sidebar yang diinginkan.

2. Pada pop-up yang tampil, pilih Arsip Blog/ Blog Archive.

3. Setelah muncul tampilan pop-up berjudul Konfigurasikan Arsip, lalu ikuti konfigurasi seperti yang terlihat pada gambar di bawah ini. Untuk nama judul widget arsip bisa disesuaikan dengan judul arsip yang diinginkan, lalu klik tombol Simpan.

Setelah kembali pada bagian dashboard blog, jangan lupa untuk mengeklik tombol: "Simpan Setelan" yang berada di kanan atas.

 

4. Setelah memiliki widget Arsip Blog, langkah selanjutnya adalah memasang scroll bar dengan cara: klik Tema ---> Edit HTML

5. Pada tampilan yang berisi kode-kode HTML yang banyak ini, klik Ctrl+F lalu, cari kode: <div id='ArchiveList'>

6. Salin kode: <div style='overflow:auto; width:ancho; height:300px;'>, lalu paste di atas kode <div id='ArchiveList'> tadi. Kemudian tambahkan kode: </div> di atas kode: <b:include name='quickedit'/> atau </b:includable>

Angka 300 yang berwarna biru adalah angka untuk ukuran tinggi widget arsip blog, angka tersebut bisa diubah sesuai kebutuhan.

Perhatikan gambar dibawah ini untuk melihat penempatan kode-kode tersebut,

Setelah penempatan kode 

Jika sudah, selanjutnya klik Simpan Tema dan, selesai!
Nah sekarang, tampilan Archive Blog menjadi terlihat lebih rapi dan menarik bukan?
Eits, tapi bila langkah di atas tidak dapat diterapkan atau mengalami kegagalan, yang bisa saja terjadi karena template yang digunakan, tenang saja tetap ada triknya supaya tutorial ini berhasil. Yaitu
- Kembali masuk menu EDIT HTML
- Klik REVERT WIDGET THEMES TO DEFAULT
- Centang pada bagian BLOG ARCHIVE

- Kemudian ulangi langkah no 5 di atas.

Silahkan diterapkan yaa, semoga bermanfaat!.