Trick Membuat Scroll Box Widget Recent Comment Blogger Plugins

Scroll Box Widget Recent Comment

Menggunakan widget recent comment blogger plugins memberi maanfaat tersendiri bagi blogger karena bisa memonitor secara cepat komentar yang diterima tanpa harus login terlebih dahulu. Hanya satu yang agak merepotkan bagi widget ini. Teks ataupun linknya tak dapat di atur (ukuran font, warna, tebal dll) agar lebih padu (seragam) dengan bentuk font yang dipergunakan di keseluruhan blog hingga tampilannya terlihat berbeda dan terus terang saja terasa sedikit mengganggu. Ada sebuah solusi untuk membuat widget recent comment ini sedikit tersamarkan dan sekaligus membuatnya lebih rapi dan mudah ditata. Tempatkan saja dalam scroll box.

Untuk membuat scroll box bagi widget recent comment kita tak mungkin melakukannya tanpa melakukan penambahan kode html pada bagian body. Perubahan atau penambahan inipun harus melalui Expand Widget Template. Agar lebih cepat dan lebih aman membuatnya, silahkan ikuti panduan berikut.

Panduan membuat scroll box recent comment

.

1. Login ke Blogger.
2. Halaman Dasbor (Dasboard).
3. Klik Rancangan (Design).
4. Klik Edit HTML
5. Backup Template dengan cara:
   • Klik Download Template Lengkap (Download Full Template).
   • Beri nama dan simpan file template di folder PC. File ini akan berguna ketika anda mengalami kegagalan saat modifikasi yang mengakibatkan kerusakan desain blog. Untuk memulihkan ke kondisi sebelum modifikasi lakukan klik Browse kemudian Upload.
6. Klik Expand Widget Template.
7. Cari kode <b:widget id='Gadget1' locked='false' title='Recent Comments' atau title='Recent Comments'. Gunakan Ctrl + F untuk lebih mempercepat pencarian kode.
8. Di sekitar kode <b:widget id='Gadget1' locked='false' title='Recent Comments' .... akan dijumpai kode lain yang seperti di bawah ini:
   
   

   Kode HTMl Recent Comment default Blogger:

   <b:widget id='Gadget1' locked='false' title='Recent Comments' type='Gadget'>
   <b:includable id='main'>  
     <!-- only display title if it's non-empty -->
     <b:if cond='data:renderingUrl != ""'>
       <b:if cond='data:title != ""'>
         <h2 class='title'><data:title/></h2>
       </b:if>
       <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>
     <b:else/>
       <data:errorMessage/>
     </b:if>
     <b:include name='quickedit'/>
   </b:includable>
   </b:widget>

9. Ganti kode dengan kode berikut:

   Kode HTMl Recent Comment Baru:

   <b:widget id='Gadget1' locked='false' title='Recent Comments' type='Gadget'>
   <b:includable id='main'>  
     <!-- only display title if it's non-empty -->
     <b:if cond='data:renderingUrl != ""'>
       <b:if cond='data:title != ""'>
         <h2 class='title'><data:title/></h2>
       </b:if>
       <b:if cond='data:gadgetSnippet != ""'>
   <div style='max-height:200px;overflow:auto;'><data:gadgetSnippet/></div>
       <b:else/>
         <div class='widget-content'>
           <b:if cond='data:nonSocialFragment != ""'>
             <data:nonSocialFragment/>
           </b:if>
         </div>
       </b:if>
     <b:else/>
       <data:errorMessage/>
     </b:if>
     <b:include name='quickedit'/>
   </b:includable>
   </b:widget>

10. Klik Simpan Template (Save Template).
11. Buka blog untuk melihat tampilan baru widget recent comment anda!

Catatan/Keterangan:

• Untuk mengatur tinggi scroll box rubah nilai max-height:200px;.
• Semakin besar akan semakin tinggi dan sebaliknya semakin kecil akan semakin pendek.
• Dengan penambahan elemen DIV baru tersebut anda punya kesempatan untuk membuat beberapa modifikasi baru melalui kode CSS hanya dengan "menempelkan sebuah class atau id.