Membuat Scroll pada Widget Blogger | Gudang Informasi Blogging

Membuat Scroll pada Widget Blogger

Sebenarnya saya bingung mau memberi judul apa pada artikel ini, artikel ini juga hasil rangkuman dari beberapa posting yang saya baca di Blog Kang Enes. Secara singkatnya saja, saya ingin membuat widget di blog yang terpasang sidebar mempunyai scroll. Khususnya ini berlaku buat widget standar yang ada di blogspot seperti bloglist, Linklist dan mungkin nantinya berguna untuk berbagai macam hal. Sebetulnya membuat scroll dapat juga dilakukan dengan cara lain (dapat dibaca di sini) Namun tidak ada salahnya saya coba uraikan cara lain yang mungkin berguna:
(lihat gambar disamping, yang diberi tanda panah)

Masing-masing dari bagian itu mempunyai nama Title di template kita, untuk membuat perintah scroll caranya adalah sebagai berikut :
  1. Dari halaman dasbor, klik Tata Letak - Edit HTML.
  2. Beri tanda centrang pada Expand Template Widget.
  3. Kemudian cari kode "Title" yang ingin di buat scroll, misalnya disini saya ambil contoh widget dengan nama "My Blogroll" (gunakan Control F atau F3).
  4. Perhatikan kode yang ada di bawahnya, seperti ini:

    ..................................
    ...................................
    <b:widget id='BlogList1' locked='false' title='My Blogroll' type='BlogList'>
    <b:includable id='main'>
    <!-- only display title if it's non-empty -->
    <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
    </b:if>

    <div class='widget-content'>
    .......................................
    .....................................
    Perhatikan yang ber warna merah....
  5. Anda Tinggal menambahkan saja code dibawah ini :
    style='overflow:auto; height:100px
  6. Sehingga keseluruhannya akan tampak seperti ini :
    ..................................
    ...................................
    <b:widget id='BlogList1' locked='false' title='My Blogroll' type='BlogList'>
    <b:includable id='main'>
    <!-- only display title if it's non-empty -->
    <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
    </b:if>

    <div class='widget-content'style='overflow:auto; height:100px'>
    .......................................
    .....................................
  7. Selesai, Simpan Template dan LIHAT hasilnya
  8. Untuk Height dapat di ganti sesuai ukuran tinggi yang diinginkan. 100px, 150px, 250px, dan sebagainya
SELAMAT MENCOBA!

2 komentar:

Ehem! Bos-bos Mau Lihat Komentar! Silahkan:
Alfi Syahrin mengatakan...

kok gak bisa ??padahal saya sudah tepat
tolong informasinya ,

mh najiib mengatakan...

wah... bermanfaat buanget ilmunya.....