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

15 komentar:

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

test spoiler

Terlambat mengatakan...

Wah,ini neh tutor yang lagi aku cari,

Ijin nyoba dulu,



Salam kenal yaa,,

Makasih

Share4rt Berbagi mengatakan...

Izin Coba gan

Infonakke mengatakan...

di coba boleh juga nih..
jangan lupa kunjung balik
http://infonakke.blogspot.com/

Ian Apian mengatakan...

Mantap dah Infonya gan..

sukses dipake di blog ane..
thanks

Unknown mengatakan...

Link Banner nya udah saya pasang diblog saya..jangan lupa pasang juga banner saya ..thks,,

Sinar-xp mengatakan...

Mantab nih mas artikelnya...

Izin coba ya mas...

Unknown mengatakan...

tutor nya bermanfaat gan. ijin di praktekan

InfoDariBlogspot mengatakan...

wahhh makasih banget mas bro infonya

mampir balik yah

Nuri download mengatakan...

Makasih bro, langsung dicoba

Tommy May mengatakan...

mantap gan bisa di sudah saya pratekan dan berhasil

BQC mengatakan...

Terma kasih gan ini bisa saya praktekan

OOO mengatakan...

MAKASIH GAN,,,,,
TERNYATA SEPERTI ITU...
JOS GANDOS DECH

Kumpulan Foto Hot Artis mengatakan...

Makasih gan tutorialnya sangat membantu...

Obat Kanker Paru Paru mengatakan...

terimakasih infonya