Tentang Ilmu Komputer, Android, Panduan Blogging dan Tips di Internet.

Cara Menambahkan Scroll pada Widget Blogspot

Ada kalanya widget pada Blogspot sobat tidak memiliki ukuran yang sobat inginkan. Khususnya jika widget tersebut memiliki ukuran yang terlalu tinggi. Kemudian tinggi dari widget tersebut selalu berubah-ubah karena isi konten di dalamnya pun berubah-ubah. Tidak jarang hal ini dapat mengganggu tampilan blog. Kira-kira bagaimana cara untuk mengatasi hal tersebut?

Salah satu trik yang bisa sobat gunakan adalah dengan memberikan scroll pada widget tersebut. Ukuran tinggi widget bisa sobat tentukan dan ketika isi konten berubah ukuran, tinggi widget akan tetap pada ukuran yang telah ditentukan. Dan ketika isi konten bertambah tinggi, tinggi widget tetap pada posisi semula namun akan muncul efek scroll agar isi konten tetap bisa diakses. Bagaimana Cara Menambahkan Scroll pada Widget Blogspot ini? OK, silakan simak terus artikel ini.


Cara Menambahkan Scroll pada Widget

Jika dilihat dari cara memasangnya, widget Blogspot terbagi menjadi Widget Bawaan Blogspot dan widget dengan mode HTML/Javascript. Widget bawaan ini adalah widget yang memang sudah disediakan oleh Blogspot itu sendiri. Sedangkan yang lainnya adalah widget yang dipasang oleh pengguna dengan cara menambahkan dan mengedit kode HTML/Javascript, karena widget yang dikehendaki tidak disediakan oleh Blogspot.

Tentunya untuk dapat menambahkan scroll pada kedua jenis widget ini caranya akan berbeda. Namun pada intinya dalam menambahkan scroll pada widget ini adalah dengan memberi sedikit tambahan kode yaitu "overflow:auto;" tanpa tanda kutip.

Untuk Widget Bawaan Blogspot

  • Pastikan widget telah dipasang pada Blog sobat.
  • Login ke akun Blogger sobat.
  • Masuk ke Bagian Tata Letak.
  • Carilah nama widget id pada widget yang akan diberikan scroll. Caranya, sentuhkan kursor pada link edit yang terdapat di bagian elemen widget yang dikehendaki kemudian perhatikan bagian sudut kiri bawah monitor, di sana akan muncul tulisan yang menampilkan nama widget id dan sebagainya. Contohnya "widgetId:PopularPosts1".
  • Setelah widget id diketahui, maka selanjtnya sobat masuk ke bagian Template lalu klik Edit HTML.
  • Dengan tombol ctrl+F, carilah kode ]]></b:skin> dan letakan script berikut ini di atas kode ]]></b:skin>.
    #PopularPosts1 .widget-content{
    height:230px;
    width:auto;
    overflow:auto;
    }
    • Sesuaikan kode berwarna merah dengan widget id yang ada di blog sobat, dan kode berwarna biru dengan ukuran tinggi widget yang sobat inginkan.
    • Setelah selesai, silakan akhiri dengan klik Simpan Template

    Untuk widget mode HTML/Javascript.

    • Login ke akun Blogger sobat.
    • Masuk pada bagian Tata Letak.
    • Klik tambahkan gadget di mana pun sobat inginkan.
    • Pilih mode HTML/Javascript.
    • Yang perlu sobat lakukan adalah hanya menambahkan sedikit kode HTML berikut pada kode HTML widget.
    <div style="overflow:auto; width:100%px; height:200px;">
    -------KODE WIDGET-------
    </div>
    • Masukan kode HTML widget pada tulisan berwarna merah. Kemudian ubahlah kode berwarna biru dengan ukuran tinggi widget yang sobat inginkan.
    • Setelah selesai, akhiri dengan klik Simpan dan silakan lihat hasilnya pada Blog sobat.

    Artikel terkait : Cara Menambahkan Scroll pada Widget Blogspot

    Artikel Blog Regi Brader Lainnya :

    48 komentar:

    1. thanks infonya gan .. ane tunggu followback nya http://vengenzblog.blogspot.com/

      ReplyDelete
      Replies
      1. info yang bermanfaat
        Paduan blogger pemula http://go.idcheat.com/1WWhHLA

        Delete
    2. Siippp..thanks mas bro punya ane sudah berhasil, mantapppp..... ^_^

      http://wahyu-iwe.blogspot.com

      ReplyDelete
    3. http://www.goesty.tk http://www.saoxmp3.tk
      ok bro

      ReplyDelete
    4. nice blog gan,,,
      thanks,,,

      http://santri-scientist.blogspot.com/

      ReplyDelete
    5. Website : www.tokovitalitas.com dan www.tokobioaura.com
      No. HP : 085 292 259 760
      PIN BB : 2A492074
      Twitter : @tokovitalitas dan @tokobioaura
      Facebook : Tokovitalitas.com dan tokobioaura.com

      ReplyDelete
    6. This comment has been removed by a blog administrator.

      ReplyDelete
    7. thnx gan sudah berhasil saya coba di http://gerobaksoftware.blogspot.com

      ReplyDelete
    8. nice info gan.. thx ya

      http://artik-bar.blogspot.com/

      ReplyDelete
    9. mantap gan tutorialnya,.. udah ane coba dan berhasil gan. salam kenal dari http://os32.blogspot.com

      ReplyDelete
    10. keren bro.... thanks sob........

      ReplyDelete
    11. thanks Gan,,it Works!!
      ane dari www.blogITgo.blogspot.com
      Mantap!!!!
      Keep Blogging~~~

      ReplyDelete
    12. This comment has been removed by a blog administrator.

      ReplyDelete
    13. Maksudnya kode widget itu apa gan?

      ReplyDelete
    14. coba dulu yah sob. Kayaknya Keren
      Oh iya coment back yah Sob ^_^

      ReplyDelete
    15. Sudah sy aplikasikan di web ane sob, matur nuwun sangat bermanfaat

      ReplyDelete
    16. Replies
      1. Wah betul mas, terimakasih telah diingatkan...

        Delete
    17. ok trim infonya, from http://ayam-bangkok-com.blogspot.com/

      ReplyDelete
    18. blogwalking >> http://roufhacker.blogspot.com/

      ReplyDelete
    19. Makasih ya gan

      Kunjungi buat agan semua untuk download semua yang berkitan tentang Komputer atau lainya sperti games http://mx-10.blogspot.com

      ReplyDelete
    20. mohon bantuannya mas, ketika saya mencoba membuat scroll untuk widget bawaan blogger, setelah saya tambahkan kode html nya yang sudah saya modifikasi jadi
      #LinkList2 .widget-content{
      height:300px;
      width:auto;
      overflow:auto;
      }
      kok tidak terjadi apa-apa ya?

      ReplyDelete
      Replies
      1. Loh, setelah saya tengok Blog milik sobat pada widget dengan id LinkList2 ini sudah ada scroll-nya kok...

        Delete
      2. Ah itu karena saya nya tidak sabar, saya pakai cara lain..
        Terimakasih sudah membalas komen saya =)

        Delete
    21. wah makasih banyak, udah saya terapin di widget Daftar Tulisan di blog saya.... sekali lagi makasih banyaaaak :D

      ReplyDelete
    22. terima Thank yu sob, sudah berhasil di blog ane ^_^

      ReplyDelete
    23. makasih gan info'a, ane jadi bisa praktek nih
      oya gan maen" ke blog saya ya, saling komentar :D
      ditunggu ya :D

      ReplyDelete
    24. Terima kasih bang..
      sekarang tambah cakep deh blog gw..
      berkat abang..

      ReplyDelete
    25. mantap bg makasih

      kunjungan balik

      ReplyDelete
    26. Thanks tutorialnya Mas. mampir Ke blogku juga yah !

      ReplyDelete
    27. Terimakasih banyak Gan :)
      Sangat membantu :)

      ReplyDelete
    28. ok sop bisa, thanks a lot ya

      ReplyDelete
    29. mantap artikelx sangat membantu buat saya

      titip bacnklink ya gan

      http://thazbhy.blogspot.com/

      Ilmu Tazbhy

      Belajar SEO Blog, Pendidikan, Teknologi, Komputer, Elektronika, Otomotif, Kesehatan, Bisnis Online, Adsense, Adwords, Anroid

      http://technogamecyber.blogspot.com/


      Techno Game Cyber

      Free download game, game pc, game terbaru, ps 2014,

      ReplyDelete
    30. Suwun gan...

      Kunjungi balik
      www.vento-deco.blogspot.com

      ReplyDelete
    31. sudah saya terapkan gan... makasih..

      mampir juga yaa shom0601.blogspot.com

      ReplyDelete
    32. akhirnya ketemu juga tutor nya :3

      http://belajarkunci-gitar.blogspot.com

      ReplyDelete
    33. Kak,saya sudah sudah berhasil untuk 1 widget. Kalo untuk2 widget bagaimana caranya kak?

      Terima kasih.

      Lily,
      www.glowlicious.me

      ReplyDelete
      Replies
      1. cukup dicopy-paste aja kode script, dan ganti id widgetnya.

        Delete
      2. udah dipraktekkan, udah berhasil- cukup 2 widget aja,terima kasih

        Delete
    34. Keren juga gan infonya! kunbal juga ya ke komchar.blogspot.com

      ReplyDelete

    Copyright © 2013-2016 Blog Regi Brader - All Right Reserved