Membuat Scroll Bar Blog Berbeda

      Sobat blogger.. kali ini aku punya trik yang tidak kalah menarik dengan blogging tutorial sebelumnya.  Kali ini akan 'Membuat Scroll Bar Blog Berbeda' ,   sudah tahu kan apa itu scroll ? ScrollBar adalah sebuah kontrol penggulung yang terdapat di sisi suatu jendela.  Macam dari ScrollBar sendiri ada 2, horizontal scrollbar dan vertical scrollbar.  Fungsinya  untuk menggulung teks pada layar atau mengubah nilai sebuah kontrol.

      Kali ini kita akan mengubah scrollbar di blog atau juga bisa dibilang scrollbar dari browser.  Untuk lebih jelas nya lihat scrollbar berwarna biru pada screenshot disamping ~>


       Bagaimana sobat ?  Tertarik menggunakan trik ini untuk memperindah blog kalian ?  Kalau iya langsung ikuti langkah - langkah berikut ini :

  1. Login ke Blogger
  2. Klik Design > Edit HTML
  3. Pasang kode berikut di atas kode ]]></b:skin> 

    ::-webkit-scrollbar {
    height:15px;
    width: 15px;
    background:
    #e6e6fa;
    }
    ::-webkit-scrollbar-thumb {
    background-color:
    #1F61DB;
    -moz-border-radius: 12px;
    border-radius: 12px;
    }


    # #e6e6fa ganti kode warna itu untuk mengganti warna background scrollbar
    # #1F61DB ganti kode warna itu untuk mengganti warna scrollbar

  4. Klik 'Save Template'
  5. Terakhir kasih komentar pada postingan ini jika berhasil dan kalau berkenan tukeran link yakk ! :D

Artikel Terkait

53 komentar:

Chikunk mengatakan...

wah2... cakep gan... mampir ya gan ke blog ane y gan... http://chikunkshare.blogspot.com/

Deo Pradipta mengatakan...

hohoho.. makasih sob.. dicoba yakk :D

Ika Ariyani mengatakan...

ane nggak nemu nyang tulisan ]]>
di edi html,,,,duuuweweeng !! hihi

Achmad Ma'ruf Bagus Wibowo mengatakan...

gmanani nambai ngasih gabar pada scrol

Deo Pradipta mengatakan...

@ika : lho ? pakek apa kau ? :/
@achmad : ngasih gambar ? masukin kode gambar di sela2 <div style="*******" (kode gambar disini)>Masukkan teks atau kode anda disini;</div

Ahli Penasaran mengatakan...
Komentar ini telah dihapus oleh administrator blog.
Happy Fibi Ananda mengatakan...

Gag berhasil, ya :'(??
Salah di mananya aq, ni T.T

Andreansyah mengatakan...

gan numpang nendang iklan sitti aja ane mah...

mampir gan. http://andretauladan.blogspot.com/p/guest-book.html

Deo Pradipta mengatakan...

@happy : waduh.. gak tau ane :/
@andreansyah : oke sob . nendang balik ^_^

WIS mengatakan...

makasih ya.. tapi kodenya buanyak banget mumet ngantian..
wisnetcorp.blogspot.com

Deo Pradipta mengatakan...

hohoho.. harus trus blajar tentang kode2 sob biar gak mumet2 lagi :D

Noval Nawawi mengatakan...

deo...ni gua noval, uzumaki_popey.. thanks smua artikel menariknya. lo mau kan jadi guru blog gua???hehehe^^

Noval Nawawi mengatakan...

deo...ni gua noval, uzumaki_popey.. thanks smua artikel menariknya. lo mau kan jadi guru blog gua???hehehe^^

Deo Pradipta mengatakan...

wew.. makaseh sob pujiannya.. :D
boleh2 aja kok .. tpi ane masih newbie juga ^_^

ardian mengatakan...

klo ngasih banner pada scroll bar gmn caranya sob?!
mhn bantuanx ya...

Deo Pradipta mengatakan...

maksudnya gini http://dopind.blogspot.com/2010/06/cara-memasang-gambar-tetap-di-kiri.html ?

UHD mengatakan...

Bagus om, coba liat nih : http://uhdcode.blogspot.com

Deo Pradipta mengatakan...

hoho.. makasih sob ^^ .. oke langsung ke TKP :3

tedyrizaldi mengatakan...

ok akan saya coba .. .. mas kunjungi Blog saya yah www.histoiredumonde33.blogspot.com ! tolong di kritik blog saya Thx !

Deo Pradipta mengatakan...

hohoho.. okeh sob.. langsung menuju ke TKP ^_^

PIEBIE mengatakan...

Gan Ntu cuma berhasil di browser google chrome n safari, lw di ie, mozilla n opera. gmana?

PIEBIE mengatakan...

Oy jwb di blog aq ajah ya........?

Deo Pradipta mengatakan...

iya memang sob.. scroll ini memang lebih menonjol ke chrome..

goyang pattah-pattah mengatakan...

mantap nich bang layak untuk di cob, :)

Deo Pradipta mengatakan...

ho'ohh sobb.. silakan coba aja ^^

Hafidz Jabar mengatakan...

dari dulu kek kalo ada blog sebagus ini
bisa belaja gratis juga lagi
makasih buat ilmunya :)

Gudangrusak mengatakan...

sori gan, ngasih tmbhn doang.g brmksud sotoy.

Kode CSS yg dikasi agan Deo pradipta ini kode CSS3 (klo g salah) dan hanya bekerja pada browser2 yg support CSS3 seperti google chrome dari versi awal, dan safari sang empunya -webkit. untuk browser lain sprti opera dan firefox, hanya beberapa versi terbarunya yg support. tp kalo agan mo yg cross browser(support semua) bs pake jquery.

terima kasih atas waktu dan kesempatannya hehhhe....

Deo Pradipta mengatakan...

@hafidz : hohoho.. iya sob.. makasih juga yak ^^
@gudangrusak : ane masih gg paham sama jquery sob -_-'

Royan Sableng mengatakan...

mantab beud mas brow.....cek ya in my blog
n dapet follow sari gue, follback ya

Deo Pradipta mengatakan...

sip sob.. makasih ya.. oke oke ^^

TORAYASURABAYA mengatakan...

Mantap aku buat eksperimen nanti :D

Deo Pradipta mengatakan...

sip sob .. selamat bereksperimen ^^

Naufal Syahrial Hidayat mengatakan...

waah makasih sob ! langsung saya praktekkan ! :D

Deo Pradipta mengatakan...

iya sob.. sama2 yakkk.. silahkan dimanfaatkan ^_^

Zangetsu Fukanzam'ma Blog mengatakan...

thx gan mampir blog saya
zangetsu123.blogspot.com

Deo Pradipta mengatakan...

sama2 sob.. langsung ke TKP ^_^

Ramadhan.S.K. mengatakan...

Itu masih biasa sob... klau seperti milik facebook bagian chat itu bisa gak??? klau bisa ajarin ane ya hehe --> http://ramadhansk.blogspot.com/

Deo Pradipta mengatakan...

wah.. klau itu kagak bisa sob ~.~

Bagikan postingan Anda disini, di recentPost mengatakan...

Basgus sekali mas.

Deo Pradipta mengatakan...

wah.. makasih sob.. ^_^b

Adha's Blogger mengatakan...

Wah Thank's Buat Yang Satu Ini , Maju Trus Ya Bro (y)

Jangan Lupa Visit www.vxrax.com (y) ^^

Deo Pradipta mengatakan...

wkwk.. makasih sob :D
kalau maju terus entar nabrak dong -_-

woke ^_^

Aregalank Comunity mengatakan...

MAntep nih bang sayah coba . jangan lupa mempir di blog saya bang www.aregalank.blogpot.com

Deo Pradipta mengatakan...

siap sob.. langsung ke TKPnya ^_^

amdafni mengatakan...

makasih sob ilmu yang bagus banget ini

Aguel Wijaya mengatakan...

gak work gan ane harus gimana ya?
http://gracool.blogspot.com/

Wijaya R-T mengatakan...
Komentar ini telah dihapus oleh pengarang.
Deo Pradipta mengatakan...

kemungkinan work nya cuma di chrome sob.. :)

Adjeng Aprinna mengatakan...

makasih kak :) aku sudah berhasil .

Deo Pradipta mengatakan...

ehehe... iyaaiyaa.. semogaa bermanfaat kawan ^_^

Wy mengatakan...

Skali ktik ktemu dsini artikelnya thanks sob..

Yustie Amanda mengatakan...

thanks infonya, tapi kalau boleh saran, kasih tau link untuk tiap warna.

tatan nurahman mengatakan...

mantep gan, mampir donk min ke blog Q, http://www.rahmanfile.blogspot.com

Poskan Komentar

Askorus Distro Askorus Distro
Copyright 2010 - 2012 ^ Akatsuki Blog™ - Compatible with Chrome 1024 x 768 -