Search

10 Ogos 2013

Scroll Box untuk Widget

Meletakkan sesuatu widget adalah bagus untuk blog. Walau bagaimanapun, adakalanya widget tersebut boleh 'menggangu' pandangan jika mengambil ruang yang agak besar untuk blog.

Salah satu penyelesaianya adalah dengan menjadikan widget tersebut boleh scroll. Ini secara tidak langsung dapat mengurangkan ruang yang digunakan dan menjadikan blog anda nampak lebih kemas.

Scroll box ini juga sesuai dengan apa sahaja widget yang anda mahu.:) Antara widget yang sesuai menggunakan scroll box ini adalah Mister Linky. Ini kerana jika jumlah pengunjung yang meletakkan url adalah banyak, ruang yang digunakan juga akan bertambah.

Secara ringkasnya, apa sahaja widget yang guna kod HTML boleh guna cara ini untuk jadikannya scroll.:)

Tutorial untuk membuat scroll box adalah seperti berikut..

1. Dari dashboard > design > add a gadget > HTML/javascript
(Jika anda sudah letakkan widget hanya buka HTML/javascript widget yang anda telah letak di blog)

2. Kemudian masukkan/ubah kod widget seperti berikut.


<div style="width:426px;height:100px;overflow:auto; ">

Letakkan kod widget anda disini

</div>

Note :
width: ubah mengikut lebar yang anda kehendaki
height: ubah mengikut tinggi yang anda kehendaki


3. Apabila selesai, save dan lihat hasilnya..

Senang bukan..:)

Tiada ulasan:

Catat Ulasan

Buat BLOG Sendiri

  1. Permulaan : Daftar Akaun Blogspot
  2. Post Entri Dalam Blog
  3. Upload gambar dalam blog
  4. Upload video dalam blog
  5. Letak video dari Youtube dalam blog
  6. Letak kod HTML/javascript dalam blog
  7. Setting asas untuk blog
  8. Cara backup template blog
  9. Website untuk download template blog
  10. tukar template blog
  11. Buka link apabila klik gambar
  12. Background bagi setiap entry
  13. Letak iklan nuffnang statik
  14. Disable right click
  15. scroll-box-untuk-widget
  16. button-back-to-top
  17. Letak background dalam entri
  18. Letak-widget-popular-post-dalam-blog
  19. cara buat textbox dalam blog
  20. Dropdown menu dalam blog
  21. Image magnify
  22. Tutorial Link warna-warni (rainbow link)
  23. Buat gambar bergerak (scrolling image)
  24. Ketahui komen pada entri melalui email
  25. Letak icon pada URL blog
  26. Daftar dan letak shoutmix pada blog
  27. Read more dalam blog : Cara 1
  28. Read more dalam blog : Cara 2
  29. Letak Signature Dalam Blog
  30. Letak website lain dalam blog
  31. Daftar dan letak linkwithin
  32. Tukar ayat asal linkwithin
  33. Ketahui bilangan pengunjung online
  34. Ubah lebar ruangan komen
  35. Letak website lain dalam entri
  36. Tukar warna background blockquote
  37. Background bergambar pada blockquote
  38. Letak gambar sebelah tajuk entri
  39. Letak tajuk entri pada readmore
  40. Perkataan bergerak (scrolling/marquee text)
  41. Letak salji dalam blog
  42. Ruangan komen bawah entri
  43. Video player kepada mp3 player
  44. Cara dapatkan url gambar
  45. Sistem rating pada blog
  46. Recent Comment dalam blog
  47. Widget Popular Post
  48. Tutorial Widget Popular Post
  49. Tukar Cursor Dalam Blog
  50. Jadikan Cursor Berkilau
  51. Animated Recent Post Widget
  52. Recent Post with Thumbnail
  53. Misterlinky - Cara Mudah Pengunjung Blog Tinggalkan Link
  54. Saiz Gambar Maksimum Dalam Blog
  55. Ubah Lebar Gambar Dalam Entri
  56. Jumlah Post dan Komen dalam Blog
  57. Facebook Share Button
  58. Facebook Like Button
  59. Button Like Untuk Blog
  60. Scrollbox Untuk Widget
  61. Disable highlight dalam blog
  62. Ketahui kelajuan load element blog
  63. Cara letak sitemap dalam blog
  64. Bubble cursor untuk blog
  65. Tutorial gerakkan title blog
  66. Tutorial hasilkan title blog bergerak
  67. Tips menaip entri dalam blog part 1
  68. Tips menaip entri dalam blog part 2
  69. Tukar warna text highlight
  70. Following star pada cursor
  71. Tutorial perkataan ikut cursor
  72. Letak emotion icon dalam komen
  73. Cara unfollow blog
  74. Tukar gambar apabila dilalukan cursor
  75. Kesan khas pada gambar apabila dilalukan cursor
  76. Cara buat scroll box untuk blog archive
  77. Tutorial tab menu / navbar menu
  78. Energy saver untuk blog anda
  79. Animated recent post ver2