0 Cara Membuat Scrool Pada Widget Archive 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 Page Elements

 

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 + &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'/>

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 + &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>
<!-- 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. 


RB Related Post:

™Selamat Datang Sobat!Kunjungan Anda Sangat Berarti Bagi Saya. Dan Jangan Lupa Juga Kunjungin Balik Ya Blog Saya.™
 
--= [ Copyright © 2012 Rahman Chandra Modified By Rahman Blog Powered By Blogger ] =--