Entry terbaru

Tutorial Cara buat scroll box pada sidebar.


Hi all! sedikit perkongsian tutorial ni utk mereka yang sedang mencari- cari cara nak buat scroll ni, benda ni boleh diaplikasi pada widget2 kt sidebar tu..contohnya macam bloglist, blog achive, shotbox, picture box.. dan macam2 lah.. semua boleh..try je hehe.. contoh kat bawah untuk bloglist VVIP :)


Step 1
Caranya tak susah, korang hanya perlu gantikan code lama dengan code yang baru.. mula-mula korang pergi ke Design>Edit HTML klik pada expand widget templates...

Step 2
Cari perkataan untuk widget yang korang nak modify tu dengan menggunakan ctrl+F..contoh dekat sini ialah VVIP then tekan enter...cari kod ini dibawah perkataan VVIP tu..

<div class='widget-content'>

tukarkan kod itu kepada kod ini..


<div class='widget-content' style='overflow:auto; width:ancho; height:200px;'>


Kemudian kalau korang nak buat ketinggian korang boleh adjust dekat height tu ye..
--------------------------------------------------------------------
Siap yg atas tu bermakna korang dah ada scroll..tapi korang nak berwarna pula?hehe ade caranya..

Step 1
Cari kod ini pada edit html korang tu: ]]></b:skin>

Step 2
Copy kod ini diatas kod dalam step 1 tu..

::-webkit-scrollbar {
height:12px;
width: 12px;
background: 
#FF6699;
}
::-webkit-scrollbar-thumb {
background-color:
 #B2C0C6;
-moz-border-radius: 10px;
border-radius: 10px;
}

Step 3
Ubah kod warna tu kepada warna yang korang nak..pilih kod DISINI

Yang merah itu untuk backgroud scroll.
Yang purple tu utk scroll.

iMBobo guna background scroll hijau dan scroll biru. :)

kemudian save :)


p/s: aku puas hati giler sebab berjaya menghilang garis bawah perkataan dlm blog aku ni!! yeay!

13 Comments
Tweets
Comments

13 Comments:

  1. nice.yana pun da try,tapi yana nya tuk google chrome ja.hehe

    ReplyDelete
  2. utk google chrome je?yg pakai mozilla xboleh ek?

    ReplyDelete
  3. heheh...Han prefer pkai scrool yg lme :)
    tp scrool yg ni cun jgk....

    ReplyDelete
  4. eeeee..pandai nyer budak ni..anak sape la ni...good effort bobo! hmmm nnt2 sy bt k..

    slmt bpuase bobo...

    ReplyDelete
  5. terrornya dia. arisha pun tak expert sgt tentang coding segala mcm ni :)

    ReplyDelete
  6. wah, lepas ni boleh la buat ! hehe tq tq :)

    ReplyDelete
  7. blog bro dah buat imbobo hmm

    ReplyDelete
  8. oo baru azie tau macam mana..
    boleh la try pasni :)

    ReplyDelete
  9. dah berjaya... thanx bobo-i...hehe

    ReplyDelete
  10. aku try buat tapi tak jadi... tak tau apsal...

    ReplyDelete
  11. tq bobo...dh buat..yey..

    ReplyDelete
  12. Replies
    1. kena pakai google chrome baru jd :) kalau mozilla mmg tak de perubahan..

      Delete

Related Posts Plugin for WordPress, Blogger...