Membuat Scroll Box Widget Recent Post dengan Thumbnail Bawaan Blogger

Setelah di posting sebelumnya kita bahas cara buat widget recent posts yang serba fleksible dan dilengkapi dengan beberapa pengaturan tampilan termasuk dengan thumnail ataupun mau dibuat tanpa thumnail, mungkin masih ada yang menjadi ganjalan saat widget ini selesai dibuat dan terpajang dengan cantik di salah satu sudut blog. Jika posting yang dimunculkan di recent posts hanya 4 atau 5 posting tentu masalah tak akan terlihat, namun ketika kita ingin menampilkan posting di recent posts dfalam jumlah cukup besar barulah persoalan mulai terlihat dan terasakan. Ya .... karena posting akan terlihat berderet meninggi dengan ketinggian yang .... heh ... heh ... ngudubilah .... seperti tangga hotel bertingkat seribu .... He ... heh ... tinggiiiiiiiiiiii .... sekali!


Tidak boleh tidak masalah ini harus segera diatasi jika blog tak ingin terlihat runyam di mata. Scroll box menjadi solusi paling tepat hingga ketinggian widget terbatasi dan dapat diatur.

Untuk mengikuti panduan membuat scroll box widget recent posts bawaan blogger ini sampeyan harus membuat recent posts-nya terlebih dahulu. Untuk tutorialnya bisa dibuka melalui lin di bawah ini:

Tutorial: Widget Recent Posts (bawaan blogger) Dilengkapi Thumbnail

Cara membuat Scroll Box Widget Recent Posts dilengkapi Thumbnail

• Login ke Blogger dengan cara menuliskan Email Address, Password kemudian klik LOGIN>
• Setelah DASBOARD (Dasbor) terbuka, klik DESIGN (Rancangan).
• KLIK Edit HTML kemudian lanjutkan klik DOWNLOAD FULL TEMPLATE (Download Template Lengkap) untuk melakukan penganmanan terhadap template (back-up templates). Simpan file template di folder PC.
• KLIK Expand Widget Template.
• Cari kode <b:if cond='data:gadgetSnippet != &quot;&quot;'>.
• Di bawah kode ini terdapat kode HTML berikutnya dengan bentuk seperti di bawah:



<b:if cond='data:gadgetSnippet != ""'>
       <data:gadgetSnippet/>
    <b:else/>
      <div class='widget-content'>
        <b:if cond='data:nonSocialFragment != ""'>
          <data:nonSocialFragment/>
        </b:if>
      </div>
    </b:if>

• Rubah kode HTML di atas menjadi seperti berikut:



<div style="height:400px;margin:10px auto;padding:2px;border:2px solid #aaa;background:#999 url(http://i964.photobucket.com/albums/ae124/gubhugreyot/background/bgRasterBlackTransV8H8.png);overflow:auto;overflow-x:hidden;border-radius:8px;-moz-border-radius:8px;-webkit-border-radius:8px;">
<div style="margin:3px auto;margin-left:2px;margin-right:2px;padding:3px;background:black;border:1px solid #555;">

    <b:if cond='data:gadgetSnippet != ""'>
       <data:gadgetSnippet/>
    <b:else/>
      <div class='widget-content'>
        <b:if cond='data:nonSocialFragment != ""'>
          <data:nonSocialFragment/>
        </b:if>
      </div>
    </b:if>

</div>
</div>

• KLIK SAVE/Simpan Template.
• Buka blog dan lihat hasilnya.

Silahkan gantai backgroundnya jika dikehendaki atau untuk penyesuaian dengan warna teks dan background blog.