Cara Membuat Scroll pada Gadget Arsip Blog

Apakah di blog anda terdapat gadget Arsip Blog? Kemungkinan besar pasti ada, kecuali yang memang tidak ada atau sengaja dihapus. Gadget arsip blog adalah salah satu gadget populer yang ada di blog sehingga hampir di semua blog pasti memiliki gadget ini. Gadget arsip blog sendiri berfungsi untuk menampilkan daftar tautan/link postingan artikel dalam blog yang telah dipublikasikan, mulai dari awal blog tersebut dibuat hingga yang paling terbaru. Arsip blog dapat tampil dalam bentuk hierarki, daftar flat dan juga menu drop down. Nah, dari ketiga bentuk tampilan tersebut tampilan yang sering dipakai adalah tampilan hierarki yang juga merupakan tampilan secara default.

Setelah kita menambahkan gadget arsip blog, maka secara default tampilan arsip blog kita akan berupa tampilan hierarki, seperti halnya tampilan pada blog ini. Apabila seseorang mengklik tanda pada Bulan atau Tahun maka akan menampilkan daftar arsip postingan blog pada yang dipublikasikan pada waktu tersebut. Pada tampilan menu dropdown dan daftar flat akan membuka halaman baru yang mengarah ke arsip tersebut, tetapi pada tampilan hierarki akan ditampilkan langsung di bawahnya sehingga terlihat memanjang pada sidebar.

Semakin banyak jumlah postingan yang telah dipublikasikan maka akan membuat tampilan gadget arsip blog menjadi semakin panjang. Alhasil hal tersebut sering sekali membuat tampilan blog anda menjadi tidak rapi dan berubah-ubah panjangnya. Terlebih apabila sidebar ataupun footer tempat di mana anda meletakkan gadget arsip blog tersebut berisi banyak gadget lainnya, maka akan memakan banyak tempat di blog bahkan bisa saja melebihi panjang artikel blog itu sendiri.

Hal seperti itu sebenarnya bukanlah menjadi masalah, namun hanya mengurangi estetika dan kenyamanan dalam menjelajah blog anda. Ada cara untuk mengatasinya, yaitu dengan membuat gadget menjadi lebih ringkas dengan menambahkan scroll pada gadget tersebut. Penggunaan scroll tersebut akan membuat gadget menampilkan scroll ketika panjang gadget melebihi batas yang ditentukan. Adanya gadget dengan scroll tersebut tidak akan menambah panjang tampilan blog karena secara otomotis menampilkan scroll tersendiri bagi gadget tersebut. Hal ini akan membuat tampilan blog menjadi lebih rapi, menarik dan ringkas sehingga akan lebih memudahkan pengguna atau pengunjung blog anda.

Terkait tips ini, saya akan membagikan cara tentang membuat scroll pada gadget arsip blog. Tetapi sebelumnya silahkan lihat penampilan gadget arsip blog yang telah ditambahkan scroll berikut ini:

Arsip Blog dengan Fitur Scroll

Anda juga bisa melihatnya secara langsung pada gadget arsip blog di situs ini.

Selanjutnya setelah beberapa penjelasan di atas saya akan memberitahukan caranya. Cara membuat scroll pada gadget arsip blog adalah sebagai berikut:

1. Masuk/sign in terlebih dahulu ke akun bloggermu.
2. Dari halaman dasbor atau ikhtisar pilih Template.
3. Kemudian klik Edit HTML dan akan tampil kode HTML dari template blog anda.

4. Kemudian cari kode " <div id='ArchiveList'> " (tanpa tanda petik). Gunakan CTRL+F untuk memudahkan pencarianmu. Atau bisa langsung menggunakan "Lompat ke widget" dan pilih "BlogArchive".

Oya, terkadang ada juga yang tidak menemukan kode <div id='ArchiveList'> . Bila seperti ini maka bisa coba cari kata ArchiveList atau Archive saja.

5. Bila sudah menemukan kode di atas, kemudian terapkan seperti ini dengan menambahkan kode berwarna biru di bawah ini:

<div style='overflow:auto; width:ancho; height:400px;'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
<b:if cond='data:style == &quot;HIERARCHY&quot;'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == &quot;FLAT&quot;'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == &quot;MENU&quot;'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div>
<b:include name='quickedit'/>
</div>

</div>
</b:includable>

Letakkan <div style='overflow:auto; width:ancho; height:400px;'> tepat di atas <div id='ArchiveList'>. Untuk mengatur tinggi gadget dapat mengubah height:400px sesuai dengan keinginan anda. Kemudian jangan lupa juga menambahkan </div> sesudah <b:include name='quickedit'/>.

6. Selanjutnya sebelum disimpan ada baiknya anda tinjau dahulu untuk melihat perubahan yang terjadi, jika sudah yakin, simpan template anda.

7. Selesai dan lihat tampilan gadget barumu.

Penggunaan pada Gadget Lain

Selain pada gadget arsip blog, cara membuat scroll di atas sebenarnya dapat juga diterapkan pada gadget lain seperti gadget populer pos, komentar, pos terbaru dan sebagainya. Caranya pun sama dengan menambahkan kode berwarna biru di atas pada posisi yang ditentukan, yaitu kode <div style='overflow:auto; width:ancho; height:400px;'> di atas widget id atau widget class dan ditutup dengan </div> setelah <b:include name='quickedit'/>. Pada gadget pos populer contohnya yaitu:

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts' version='1' visible='true'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div style='overflow:auto; width:ancho; height:400px;'>
<div class='widget-content popular-posts'>

.........................................................................................................................
<b:include name='quickedit'/>
</div>
</div>
</b:includable>
</b:widget>

Apakah sudah paham? Jika masih bingung dengan contoh di atas, berikut ada contoh lain pada gadget HTML:

<b:widget id='HTML6' locked='false' title='Recent Comments' type='HTML' visible='true'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div style='overflow:auto; width:ancho; height:400px;'>
<div class='widget-content'><data:content/>
</div>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
</b:section>
</div>

Mungkin untuk lebih detailnya akan dibahas pada pos artikel selanjutnya. Jadi bersabar saja ya!

Setelah gadget memiliki scroll sendiri, ada plus minusnya. Kelebihannya tentu sudah disebutkan di atas, yakni tampilan yang lebih rapi, ringkas. Tetapi minusnya ternyata juga ada. Kelemahannya muncul pada blog pengguna template responsive dengan jumlah postingan yang banyak, yaitu terkadang saat penggunaan pada tampilan kecil seperti versi mobile (ponsel) akan menampilkan dua scroll secara berdekatan. Scroll yang muncul adalah scroll milik gadget dan scroll pada blog, sehingga kadang mempersulit pengguna saat menggulirkan laman blog.

Namun kelemahan tersebut dapat mudah diatasi, caranya dengan mengatur tinggi atau lebar pada <div style='overflow:auto; width:ancho; height:400px;'> , lebih disarankan mengatur tingginya. Lalu tingginya harus berapa? Tinggi gadget yang baik dapat berkisar antara 250 px sampai 400 px, jadi untuk pengaturan tinggi scroll dapat mengambil angka diantara 250 px - 400 px. Meskipun begitu dapat juga bebas apakah ingin terlalu tinggi atau terlalu pendek, pokoknya silahkan sesuaikan dengan kondisi tampilan blog anda masing-masing.

Sekiranya seperti itulah cara membuat scroll pada gadget arsip blog dan pada gadget lain. Bagi yang ingin mencoba tips di atas, semoga berhasil. Namun apabila masih memiliki kendala, silahkan diamati dahulu apa kekurangannya atau boleh juga berbagi masalah dan cara mengatasinya.

Diperbarui pada 14 Januari 2017.