Cara Membuat Scroll pada Widget Arsip Blog

Umumnya saat kita menambahkan widget arsip blog, maka secara default ketika kita mengkliknya akan membuat tampilan arsip blog memanjang ke bawah. Terkadang jika memiliki jumlah postingan yang banyak maka widget arsip blog juga akan lebih panjang. Ada cara untuk membuat widget arsip menjadi lebih ringkas, yakni dengan menjadikannya scroll, sehingga ketika mengklik link pada widget arsip blog, tidak akan memanjang, tetapi akan berubah menjadi scroll. Tentunya dapat membuat tampilan blog menjadi lebih rapi dan indah. Terkait itu, kali ini saya akan berbagi cara bagaimana membuat scroll pada widget blog archives (arsip blog) sehingga tampilan arsip blog menjadi lebih ringkas dan lebih menarik. Berikut penampilan widget archive blog yang telah dibuat scroll:
Cara membuat scroll pada arsip blog adalah sebagai berikut:

1. Masuk ke akun blogger.
2. Dari halaman dasbor, pilih Template.
3. Kemudian klik Edit HTML.
4. Kemudian cari kode " <div id='ArchiveList'> " (tanpa tanda petik). Gunakan CTRL+F untuk memudahkan pencarian.
5. Kemudian terapkan seperti ini dengan menambahkan kode berwarna biru di bawah ini:

<div style='overflow:auto; width:ancho; height:300px;'>
<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>



Taruh <div style='overflow:auto; width:ancho; height:300px;'> tepat di atas <div id='ArchiveList'>. Untuk mengatur tinggi widget dapat mengubah height:300px sesuai dengan keinginan anda. Jangan lupa juga menambahkan </div> sesudah <b:include name='quickedit'/>
6. Sebelum disimpan lebih baik anda Preview (Pratinjau) untuk melihat perubahan yang terjadi, jika sudah yakin Simpan template anda.

ads

Ditulis Oleh : Unknown Hari: 07.55 Kategori:

Share artikel ke: Facebook Twitter Google+ Linkedin Technorati Digg
Facebook
0 Blogger