Cara Membuat Scroll Box Widget Recent Posts Blogger Plugins

Sama seperti halnya scroll box lainnya, seperti misalnya scroll box widget popular posts blogger plugins, "Scroll Box Widget Recent Posts Blogger Plugins" dapat dimanfaatkan untuk menciptakan efisiensi dan penataan halaman blog. Dengan digunakannya scroll box maka tinggi (height) widget recent posts (daftar posting terbaru) dapat diatur hingga widget ini tidak terlalu memenuhi kolom blog. Membuatnya bisa hanya menggunakan xHTML atau perpaduan antara kode CSS dan xHTML. Karena untuk membuat scroll box tak ubahnya melakukan modifikasi template (modifikasi blog), maka sebelum pembuatan scroll box backup template harus dilakukan terlebih dahulu agar apabila terjadi kesalahan template (desain dasar blog) bisa dipulihkan seperti sedia kala.

Cara Membuat Scroll Box Widget Recent Posts Blogger Plugins

1. Aktifkan/pasang widget recent posts blogger plugin sebelum membuat scroll box. Panduan membuat/mengaktifkan widget recent posts blogger dapat anda ikuti melalui link berikut.
   Panduan Memasang (mengaktifkan) idget Recent Posts Blogger Plugins
2. Login ke Blogger.
3. Halaman Dasbor (Dasboard).
4. Klik Rancangan (Design).
5. Klik Edit HTML.
6. Klik Expand Widget Template.
7. Lakukan backup template. Panduan backup template dapat anda ikuti melalui link di bawah ini:
   Panduan Cara Backup Template Blogger.
8. Cari kode title='Recent Posts' type='Gadget'>. Gunakan Ctrl + F untuk mempermudah pencarian. Panduan mencari kode HTML di template dapat anda buka melalui link berikut.
   Panduan Cara Cepat Cari Kode HTML Template
9. Dibawah kode di atas akan anda temukan kode seperti di bawah ini.

Kode yang harus diganti:

<b:if cond='data:gadgetSnippet != &quot;&quot;'>
     <data:gadgetSnippet/>
<b:else/>

10. Ganti kode di atas fdengan kode berikut.

Kode HTML pengganti:

<b:if cond='data:gadgetSnippet != &quot;&quot;'>
     <div style='height:250px;overflow:auto;'><data:gadgetSnippet/></div>
<b:else/>

11. Klik Simpan Template (Save Template).
12. Klik Expand Widget Template.
13. Buka blog untuk melihat hasilnya.

Jika ingin menggunakan kode CSS ganti kode dengan kode berikut:

Kode HTML pengganti:

<b:if cond='data:gadgetSnippet != &quot;&quot;'>
     <div class='GR_recentposts'><data:gadgetSnippet/></div>
<b:else/>

Tambahkan kode CSS di atas kode ]]></b:skin>

Kode CSS Scroll Box Widget Recent Posts Blogger:

.GR_recentposts{
       height:250px;
       overflow:auto;
}