Membuat Scroll Pada Arsip Blog Hierarki

Postingan kali ini akan menjelaskan tentang cara Membuat Scroll pada Arsip Blog yang bertipe Hierarki. Tipe ini bisa di bilang tipe yang efektif karena bisa memperlihatkan seluruh postingan kita baik itu bulanan, mingguan, ataupun harian. Dengan begitu, para pengunjung bisa lebih mudah menjelajahi isi blog kita.

Namun kekurangannya adalah ketika postingan kita sudah banyak lalu ketika salah satu Arsip Blog di klik maka tampilannya akan memanjang kebawah memperlihatkan seluruh postingan kita dalam periode tertentu. Maka hal ini akan memakan tempat di blog. Apalagi kalau kita posting sudah sejak lama, maka tidak kebayang panjangnya..

Maka dari itu membuat Scroll adalah salah satu cara agar bisa menghemat tempat.

Untuk cara membuatnya :
1. Buat dulu Arsip Blog bertipe Hierarki
2. Login dulu ke akun blog agan
3. Pilih Rancangan, Pilih Elemen Laman
4. Pilih Tambah Gadget lalu pilih Arsip Blog, klik yang tipe Hierarki seperti gambar di bawah ini :


5. Setelah selesai Masuk ke Edit HTML
6. Centang expand widget (jangan lupa download template lengkap dulu untuk berjaga-jaga apabila ada kesalahan).
7. Tambahkan kode  <div style='overflow:auto; width:ancho; height:200px;'> pada tag Arsip Blog.
8. Untuk mencarinya tekan Ctrl + F pada keyboard lalu masukkan 'Arsip Blog'. untuk selengkapnya maka seperti contoh di bawah ini setelah di tambahkan kode diatas

<b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div style='overflow:auto; width:ancho; height:200px;'>
<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></div>
<b:include name='quickedit'/>

Catatan : Jangan lupa tambahkan kode </div> yang berwarna biru untuk mengaktifkan scroll nya seperti contoh di atas, untuk tingginya ( height:200px ) bisa di ganti dan disesuaikan dengan keinginan agan.  Setelah itu klik simpan template lalu lihat hasilnya.

Selamat mencoba semoga berhasil.

Sumber : dari berbagai sumber

2 comments

thank atas sharingnya, ini sangat membantu kami untuk memperindah blog

Reply

Iya sama-sama. terima kasih sudah mau mampir kesini

Reply

Posting Komentar