Memasang scroll pada arsip blog adalah salah satu cara untuk memudahkan visitor untuk melihat apa saja yang ada didalam blog kita, berikut langkahnya :
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
3. SAVE, maka langkah pertama usai.
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>
2. Pada menu Design, klik edit HTML;
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.
selamat mencoba :)
Harap diperhatikan posisi penempatan kode, jangan sampai salah posisi, perhatikan contoh di atas (warna biru).
Untuk menghindari kesalahan pada template anda, sebaiknya silakan dilakukan backup sebelum melakukan perubahan secara manual pada HTML.Selamat mencoba ^_^
Tidak ada komentar:
Posting Komentar