Cara Memasang Scroll pada Arsip Blog Sudah cukup lama tidak menulis panduan dasar dalam belajar blog, sepertinya artikel terakhir di bulan juni 2011, yaitu Cara Membuat Versi Mobile pada Blogspot.
Sebenarnya artikel yang saya tulis ini bukanlah barang baru, namun cukup penting bagi saya pribadi, yah supaya tidak lupa jika ingin menambahkan scroll pada arsip blog.
Langkah dalam memasang scroll ini dibagi 2 tahap, yaitu :
1. Memasang arsip blog;
2. Memasang scroll pada arsip blog.
Untuk langkah yang pertama, saya yakin teman-teman sudah sangat paham, tapi tidak ada salahnya jika saya menulisnya lagi untuk blogger pemula.
Langkah-langkahnya adalah sebagai berikut :
1. Login ke dashboard blog, klik Design
2. Pada menu Design (Page Elements), klik Add a Gadget, pilih Blog Archive
Gambar Add a Gadget Blog Archive
Untuk langkah kedua, dalam memasang scroll pada arsip blog, kita membutuhkan satu kecil kode HTML yang akan kita sisipkan pada bagian widget Arsip Blog.
Langkah-langkahnya adalah :
1. Copy kedua kode HTML scroll berikut ini :
- Kode pertama : <!-- scrollbar start --><div style='width:250px;height:400px;overflow:auto'>
- Kode kedua : <!-- scrollbar stop --></div>
3. Pada menu edit HTML, klik (check/centang) Expand Widget Templates;
4. Cari Widget Arsip Blog, temukan kode berikut :
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + "_ArchiveList"'>
<b:if cond='data:style == "HIERARCHY"'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == "FLAT"'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == "MENU"'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div>
<b:include name='quickedit'/>
5. Selanjutnya sisipkan kedua kode HTML di atas (langkah 1) pada kode HTML (langkah 4) :
<div class='widget-content'>
<div id='ArchiveList'>
<!-- scrollbar start --><div style='width:300px;height:580px;overflow:auto'>
<div expr:id='data:widget.instanceId + "_ArchiveList"'>
<b:if cond='data:style == "HIERARCHY"'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == "FLAT"'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == "MENU"'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div>
<!-- scrollbar stop --></div>
<b:include name='quickedit'/>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + "_ArchiveList"'>
<b:if cond='data:style == "HIERARCHY"'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == "FLAT"'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == "MENU"'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div>
<b:include name='quickedit'/>
5. Selanjutnya sisipkan kedua kode HTML di atas (langkah 1) pada kode HTML (langkah 4) :
<div class='widget-content'>
<div id='ArchiveList'>
<!-- scrollbar start --><div style='width:300px;height:580px;overflow:auto'>
<div expr:id='data:widget.instanceId + "_ArchiveList"'>
<b:if cond='data:style == "HIERARCHY"'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == "FLAT"'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == "MENU"'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div>
<!-- scrollbar stop --></div>
<b:include name='quickedit'/>
6. SAVE.
Harap diperhatikan posisi penempatan kode, jangan sampai salah posisi, perhatikan contoh di atas (warna merah).
Untuk keamanan template anda, sebaiknya silakan dilakukan backup sebelum melakukan perubahan secara manual pada HTML.
Jika ada kesalah dalam penulisan kata yang kurang berkenan di hati anda saya mintak maaf.. karena saya masih penuh dengan kekurangan.. apabila ada kekurangan tolong sampaikan melalui komentar anda.. Tertanda :
