Ads

Widget



add link Top  blogs Blogger Bertuah W3 Directory - the World Wide Web Directory Personal-Journals blog

Cara Membuat Scroll Pada Widget Blog

Cara membuat Scrol Pada Widget Blog
Cara membuat Scroll Pada Widget Blog | Sudah lama tak posting tutorial blogger terlalu sibuk dengan dunia nyata, dari kemaren status otak saya Loading... terus :D. Hari ini saya inigin Berbagi tentang bagaimana Cara membuat Scrol Pada Widget Blog. Apa sih scroll itu? Dalam bahasa indonesia artinya gulung atau digulung. Jadi widget yang dipasang kode scroll bisa digulung dan akan menghemat tempat. Yang saya maksud dengan widget Blog disini adalah widget bawaan blogger bukan widget yang ditambahkan dengan add HTML/Javascript tapi yang langsung ada dipilihan widget blogger. Faham? atau malah puyeng? Sama hehehe... Biar jelas langsung lihat gambar ini deh.

Widget blog
Widget 1
Widget 2
  1. Widget 1 merupakan widget dengan editor HTML/js langsung
  2. Widget 2 merupakan widget tanpa editor HTML/js secara langsung
Nah, Cara Untuk Menambahkan Scrol pada Widget 1 sangat mudah caranya yaitu tinggal sisipkan kode scrol didalam kotak editor HTML. Lalu bagaimana caranya dengan widget blog 2? Itu mudah juga sob, hanya bermodalkan ketelitian :D, langsung saja cekidot...

Cara membuat Scroll Pada Widget Blog

Pastikan sobat sudah mempunyai blog di blogspot (yaiyalah)
Setelah login di blogger dan masuk dashbor klik rancangan trus edit laman (lihat gambar)

Dasbor Blog

Disini yang akan buat contoh atau eksperimen adalah widget Daftar Blog atau Blog List, tambahkan dulu widget ini kalau sobat belum menambahkannya dengan cara add widget / tambah widget cari Daftar Blog / Blog List.

Setelah sobat tambahkan dan simpan widget tadi saatnya otak-atik pada HTMLnya. Pergi ke rancangan dan klik edit HTML.
Dasbor Blog

Lanjut centang pada Expand Template Widget kemudian tekan CTRL + F pada keyboard untuk memudahkan pencarian kemudian pastekan kode ini widget id='BlogList1'.

Pencarian Kode HTML


Tambahkan kode ini <div style='overflow: auto;background-color:#C7DFB5; margin: 0px auto; padding: 5px; height: 100px;width: 94%;text-align: left;'> diantara kode </b:if> dan <div class='widget-content'> maka akan menjadi seperti ini

Keterangan kode :  
  • background-color:#C7DFB5 adalah kode warna background yang bisa sobat ganti sesuai keinginan
  • height: 100px adalah ketinggian kotak scrol semakin besar nilainya semakin tinggi kotaknya
  •  width: 94% merupakan persentase lebar kotak dari lebar widget
  •  text-align: left posisi text widget bisa diganti dengan "center" ataupun "right".
"Udah selesai?" Belum sob masih ada kode yang perlu disisipkan yaitu penutup </div> sisipkan kode ini diatas atau sebelum kode </b:includable> </b:widget> kode ini masih dalam area BlogList1 diatas.
Kemudian simpan template Sobat.
Untuk memaksimalkan hasil dari eksperimen ini atur widget sobat seperti ini


Seperti apakah hasil dari eksperiman kita kali ini? Lihat sebelah kanan di blog Berbagi Yang Kudapat pada widget blog sahabat.

Eksperimen ini bisa sobat terapkan pada widget-widget blogger lainnya juga lho, seperti recent post, recent comment de el el.

Apabila sobat kesulitan dalam menerapkan tutorial Cara membuat Scroll Pada Widget Blog ini bisa sobat tanyakan di kolom komentar. Insyaallah akan saya jawab ASAP.

Terima Kasih Sudah Berkomentar

77 Komentar:

  1. ok sob dicoba dulu makasih tipsnya

    ReplyDelete
    Replies
    1. OK sob, terimakasih sdh berkunjung :-bd

      Delete
  2. Wah thanks infonya gan... blogwalking hehe

    ReplyDelete
  3. kalo buat wordpress gimana gan, ada gak tutorialnya.... :rolled:

    ReplyDelete
    Replies
    1. waduh kagak mudeng kalau wp gan @@,

      Delete
  4. ok.
    bahasan yang sangat mantap.

    ReplyDelete
  5. asiiiik dengan scroll tampilan bisa lebih rapi karena panjangnya bisa diatur

    ReplyDelete
  6. saya coba dulu mas...smga berhasil

    ReplyDelete
  7. gan udah di coba ga berhasil dan kq beda ya html yg di agan tunjukin sama yg punya saya
    btw thank info nya

    ReplyDelete
  8. kunjungan balik donk gan, hehehhee

    ReplyDelete
  9. cihuuy udah bisa gan hehehe <=) <=)

    ReplyDelete
  10. Thanks for the info... Blogwalking

    ReplyDelete
  11. nyoba langsung sob ke TKP`


    http://ba12.blogspot.com/2012/07/jakarta-di-mata-blogger-kontes-blog.html

    ReplyDelete
  12. kunjungan sob + follow yah
    maaf kalau ngerepotin

    ReplyDelete
  13. tambah ilmu nih :W, makasih ya gan

    ReplyDelete
  14. Cara menjelaskannya terlalu kroco...
    AMPAS!!!!!!!!!!!!

    ReplyDelete
  15. Wah, terima kasih banget gan, udah langsung nancep di blog ane, udah jadi deh scrollnya

    ReplyDelete
  16. Terimakasih banyak mas sudah sharing, izin praktek :)

    ReplyDelete
  17. Nah ini dia
    Sebentar lagi langsung saya terapkan cara ini
    Terima kasih tips bermutunya :)

    ReplyDelete
  18. Terima kasih infonya... langsung dicoba :)

    ReplyDelete
  19. mantab mas brooow untuk info yang diberikan

    ReplyDelete
  20. Langsung di praktekin..tengkyu

    ReplyDelete
  21. Makasih atas tutorial'a sangat membantu.. tapi saya lagi nyari yang slider image.. :D

    ReplyDelete
  22. ijin praktek sesuai petunjuk .....

    ReplyDelete
  23. Wah... mkasi neh infonya, jdi sering2 berkunjung kesni,. :-d

    ReplyDelete
  24. saya cari kemana-mana, ternyata ada disini apa yang saya cari, Thank ya atas infonya gan..

    ReplyDelete
  25. thanks sudah berbagi ilmunya, sukses selalu....

    ReplyDelete
  26. tutorial yang menarik ni
    thanks mas bro

    ReplyDelete
  27. terimakasih banyak mas, bantu ane banget ni tutorial

    ReplyDelete
  28. thx Gan tutorialnya bermanfaat , ditunggu potingan berikutnya
    visit me ya di http://jualtrainerdandesainpcb.blogspot.com/

    ReplyDelete
  29. Makasih banget tutoru bagusnya :-bd

    Salam kenal dari Direktori Penerjemah Indonesia.

    ReplyDelete
  30. Edili 99 Menarik untuk dicobain ni kawan, nanti kalo ada masalah balik lagi.. hehehe..

    ReplyDelete
  31. makasih gan anwar... T_T yg blogger versi baru bang. Bingung ama yg model baru nih. @_@
    http://www.animesubscorner.com/

    ReplyDelete
  32. thanks gan untuk infonya, sangat membantu tentunya untuk perkembangan blog saya, bila agan berkenan silahkan kunjugni blog saya di d-ungu.blogspot.com
    tetapi maaf apabila blog saya acak-acakan, maklum lah, saya adalah blogger awam . . .

    ReplyDelete
  33. mantap mastah , thanks infonya yaa :))

    ReplyDelete
  34. Oke Langsung di praktekan dan berhasil thank's

    ReplyDelete
  35. template nya juga beda beda pasti ada yang ada ada yang ngak ada..

    (Komen Back )

    Salam Sehat Anggota Grup Republik Blogger Nusantara (Oktariandi Yoga Pardiansyah)

    ReplyDelete
  36. lumayan bisa saya coba langsung di blog saya

    ReplyDelete
  37. kok gx bisa gan,tlong di jelasin versi yg baru

    ReplyDelete
  38. Matur nuwun sanget, kula saking yogya. Makasih ya dah mau berbagi info.

    ReplyDelete
  39. dicoba dulu ya gan, klo gak bisa gue hajar lo

    ReplyDelete
  40. mas kalau bikin RSS di sisi atas blog ini yang bisa gonta ganti caranya bagaimana mas? maaf oot.

    ReplyDelete
  41. Tutorial yang bagus sobat, mudah dimengerti

    ReplyDelete
  42. kunjungan malam sob
    http://tips-gobel.blogspot.com




    Gobel's Blog

    ReplyDelete
  43. ini yang saya cari-cari sob, terimakasih ya :)

    ReplyDelete
  44. langsung ke TKP mau praktekin,makasih ilmunya juragan.

    ReplyDelete
  45. Thanks Tutorialnya ya :)
    Di tunggu kunjungan baliknya
    http://ilhamshare301.blogspot.com/

    ReplyDelete
  46. Bingung nih dengan penjelasan pada widget 2 :(
    tapi bagus Artikelnya. ditunggu yah coment backnya

    ReplyDelete
  47. tampilan template-nya sudah berubah kang.. ada update-annya ga kang untuk template blog yang baru ? ^^

    ReplyDelete

Pembaca Yang Baik ialah Pembaca Yang Meninggalkan Komentar Yang Nyambung dengan isi artikel, komentarmu = sifatmu!!!
- Jangan tinggalin link dalam komentar, bila terjadi akan saya hapus!
- Dilarang Komentar kasar, kotor, dan sara!