Custom Scrollbar untuk Blogger dengan Tiny ScrollBar - Kali ini saya akan berbagi custom scrollbar dengan jQuery. Tentunya sesuai dengan judul, custom scrollbar ini berjalan di berbagai browser. Banyak plugin jQuery untuk custom scrollbar ini, diantaranya : Tiny Scrollbar, FleXcroll, VertiScroll, jScrollPane, Perfect Scrollbar, dll. Saya sendiri menggunakan FleXcroll untuk notifikasi komentar. Namun saat ini saya akan membuat tutorial cara membuat custom scrollbar untuk blogger dengan Tiny Scrollbar, karena untuk penggunaan FleXcroll untuk banyak website harus menggunakan plugin berbayar.custom scrollbar

Kelebihan Tiny Scrollbar diantaranya tidak merubah scrollbar standar dengan jQuery, melainkan membuat scrollbar sendiri. Berbeda dengan FleXcroll yang saya gunakan, sebelum jQuery tereksekusi, maka akan ditampiklan scrollbar standar. Tetapi, tentu saja ada kekurangan dan kelebihan apabila dibandingkan dengan yang lainnya.

custom scrollbar


Ada 3 step pemasangan yang harus sobat lakukan untuk memasang Tiny Scrollbar ini :

Tiny Scrollbar Plugin

Simpan kode ini di atas </head>

<script src='https://kang-is.googlecode.com/svn/trunk/javascript/tinyscrollbar.js' type='text/javascript'/>

CSS

Simpan CSS ini di atas ]]></b:skin> atau </style>

#scrollbar1 { width: 100%; clear: both; margin: 20px 0 10px; }
#scrollbar1 .viewport { width: 97%; height: 200px; overflow: hidden; position: relative; }
#scrollbar1 .overview { list-style: none; position: absolute; left: 0; top: 0; }
#scrollbar1 .thumb .end,
#scrollbar1 .thumb { background-color: #666; }
#scrollbar1 .scrollbar { background-color: #d3d3d3; position: relative; float: right; width: 6px; border-radius:3px }
#scrollbar1 .track { background-color: #d3d3d3; height: 100%; width:6px; position: relative; padding: 0; border-radius:3px}
#scrollbar1 .thumb { height: 20px; width: 6px; cursor: pointer; overflow: hidden; position: absolute; top: 0; border-radius:3px}
#scrollbar1 .thumb .end { overflow: hidden; height: 5px; width: 6px; }
#scrollbar1 .disable{ display: none; }
.noSelect { user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; }

#scrollbar2 { width: 251px; margin: 20px 0 10px; }
#scrollbar2 .viewport { width: 236px; height: 125px; overflow: hidden; position: relative; }
#scrollbar2 .overview { list-style: none; width: 1416px; padding: 0; margin: 0; position: absolute; left: 0; top: 0;  }
#scrollbar2 .overview img{ float: left; }
#scrollbar2 .scrollbar{ background-color: #d3d3d3; position: relative; margin: 0 0 5px; clear: both; height: 6px;border-radius:3px }
#scrollbar2 .track { background-color: #d3d3d3; width: 100%; height:6px; position: relative;border-radius:3px }
#scrollbar2 .thumb { background-color: #666; height: 6px; cursor: pointer; overflow: hidden; position: absolute; left: 0; border-radius:3px}
#scrollbar2 .thumb .end{overflow: hidden; height: 6px; width: 5px;border-radius:3px}
#scrollbar2 .disable { display: none; }
.noSelect { user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; }

jQuery Pemicu

JQuery ini untuk mengaktifkan id tertentu, alam hal ini scrollbar1 dan scrollbar2. Simpan kode di atas </body>

<script type='text/javascript'>
//<![CDATA[
$('#scrollbar1').tinyscrollbar();
$('#scrollbar2').tinyscrollbar({ axis: 'x'});
//]]>
</script>

Cara Pemasangan

Untuk pemasangan saya gunakan 2 custom scrollbar yaitu Vertical dan Horizontal seperti pada demo. Untuk vertical dengan #scrollbar1 dan Horizontal dengan #scrollbar2

Kode HTML untuk Pemasangan Tiny Scrollbar

<div id="scrollbar1">
    <div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div>
        <div class="viewport">
            <div class="overview">
            Isi yang akan discrol di sini
        </div>
    </div>
</div>

Nantinya sobat bisa membuat style baru dengan menambahkan CSS, jQuery pemicu dan kode HTML dengan id yang berbeda.

Tutorial ini adalah request dari +Leony Li, sobat juga bisa request tutorial DISINI. Untuk berkomentar di luar topik bahasan, silahkan gunakan juga halaman OOT.

74 komentar

PERTAMAX-nya dulu diamankan nih, kang :D

Balas

joss gadoss...
tutorialnya..

Balas

pagi-pagi suda dihidangkan sarapan weenak ala kang ismet
ijin menghabiskan sarapannnya kang
trimakasih banyang kang

Balas

Keren scrollbarnya bisa lintas browser gitu.:-bd
Btw, kalau ga pake Tiny Scrollbar Plugin itu, scrollbar kita ga bisa tampil bagus di bwowser lain gitu ya, kang?

Balas

jangan lupa minum susu wkwkwkwkkwk

Balas

iya, kan lintas alam.. eh lintas browser :D tapi masih terbatas pada area tertentu

Balas

Keren ya kang bisa dimodif bentuk scrollnya, cuman sayang belum bisa ngepek pada scroll default browser ya kang... sudah coba beberapa tapi masih terbatas pada kolom yang kita buat saja seperti yang satu ini...

Balas

scrollnya jadi kayak scroll facebook gitu...
mantab, mantab.

Balas

iya kang.. saya juga masih daam tahap ujicoba, kebanyakan ga bisa untuk default browser

Balas

hehehe iya bung...biar maknyuuus :D

Balas

Bisa diterapkan buat scroll yang ada di samping halaman ngak Kang?

Balas

wah keren ya jd unyu-unyu gt scrollnya :D
blog saya jg pake yang css scrollbar tapi cm support di chrome, kl yg ini sudah cross browser hehe.. :-d

Balas

belum kang... saya masih ujicoba untuk yang kya gitu

Balas

iya kalau pake CSS cuma support chrome.. makanya saya cari solusinya biar cross browser... :D

Balas

menu dari kang ismet kan sudah 4 sehat 5 sempurna hehehehe

Balas

btw saya gk paham apa gunanya ini, emang menariknya apa ya kalo scroll bisa lintas alam :D

maaf kang, bukan berarti ngejek, mungkin daya seni design saya yang minim jadi gk bisa menilai kelebihan dari ini scroll :D

Balas

memang ini lebih kearah penyesuaian dengan desain, kalaupun dirubah dengan CSS, itu hanya support pada Chrome dan akan mengakibatkan 'warning' pada validasi CSS3. sedangkan dengan tinyscrollbar ini, akan terbaca di semua peramban.

Balas

Scroll Bar-nya keren.. ntar dicoba deh kang.. keren kayak di facebook.

Balas

kang setiap saya berkomentar di blog ini, komentar saya selalu dihapus?

Balas

walaupun agak susah saya cerna tapi harus saya praktekkan ni scrollbar, hehehehe

Balas

ngejar desain aja sob.. ga terlalu penting sebetulnya

Balas

kang ismet boleh bantu saya gak, supaya blog saya jadi valid HTML 5, kurang 3 lagi nih susah banget :(

Balas

hanya sebagian.. dan bukan dihapus, dimasukan folder 'spam'...

karena catatan di atas form komentar bukan hanya hiasan, makanya saya ga pandang bulu siapapun itu.. sekelas master sekalipun kayak Taufik Nurrohman, Agus Ramdhani, Kang Rohman.. kalau tidak mengindahkan saya masukan ke spam... maaf sekali lagi

Balas

heheh thankyu kang, pasang dulu hehehe :)

Balas

Rada-Rada susah gan, tapi dah berhasil, thanks buat kang ismet :)

Balas

boleh juga nih tapi bikin berat blog :D kebanyakan javascript jadi stop dulu lah

Balas

saya cek dulu.. nanti diinfokan lagi

Balas

kalau difahami bener2 gampang ko :D

Balas

sama2 jeng.... silahkan coba custom scroll yang lain

Balas

emang ga penting2 banget sih :D tergantung kebutuhan jeng :)

Balas

sama2 sob... mantaps :-bd

Balas

hehe sudah terpasang kang, cuman nanti mau di modif warnanya kang :)

Balas

ada caranya gak kang supaya saya bisa diarahkan ke arah yang benar (maksudnya bagaimana cara berkomentar di blog yang benar dan baik?)

Balas

kalau menurut saya, blog itu ibarat rumah.. punya aturan masing2, jadi bukan suatu ketetentuan yang bersifat umum... kecuali garis besarnya saja

Balas

caranya adalah pahami artikel dan baca catatan di atas form komentar dulu sebelum berkomentar. apakah anda akan senang jika ada orang menyepam di blog anda? narasi yang tidak sesuai tema tentu akan membuat komentar anda tidak relevan. karena kami disini sudah tahu prinsip masing2 walau kami disini tidak pernah saling bertatapan. belajar apa yang harus kita berkomentar. dan yang pasti adalah jangan mencantumkan URL dan berkata kunjungan balik. itu hanya memaksa orang untuk berkunjung. :)

Balas

eh.. tapi komentar saya juga pernah dihapus oleh kang ismet, tapi itu di demo komentar hack3. karena kata kang ismet kalau komentar hack3 bertingkat 6, tapi karena penasaran maka saya coba, namun ternyata sampai bertingat 14 dan terus bertingat heheheh :) kans ismet masih ingatkah itu??

Balas

wuih ketinggalan jauh nih :D

Balas

Sama gara-gara nyiapin acara tahun baruan eh da kelewat sama pertamax nih ... mana jaringan di tubruk bus ahhh

Balas

muhun tingal napelkeun doang ko hehe

Balas

keren mas, makasih udah share, saya minta izin bookmark dulu :D
- salam damai

Balas

hahahha... udah lupa, ga apa2lah demo ini :D

Balas

teu kedah nganggo lem nya kang :D

Balas

tos sae deui ayeuna kang? paingan atuh menghilang :D

Balas

gara-gara komen kang Yoga dihapus, ane ikut keseret juga, hehehe soalnya ngereply komennya bang Yoga , padahal kemarin masih sepi, hehehe |o|

Balas

kang maaf nih tanyanya beda klu mau ngasih scroll di recen comen ala google plus itu
kode ini taro di mananya yah heheh maaf newbie

.cm-outer::-webkit-scrollbar{width:5px;background:#aaa}
.cm-outer::-webkit-scrollbar-thumb{background-color:#666;border-radius:3px}

Balas

tuh kan kang komentar saya dihapus lagi?, dan di halaman OOT gk dibalas, hadeuh

Balas

baca lagi halaman request yang di blok kalau ga baca.. saya tulis disini :

"Mohon bersabar untuk menunggu jawaban, dan jangan mengulang-ulang pertanyaan pada artikel yang lain karena banyak pertanyaan yang yang harus saya jawab. Untuk menjawab pertanyaan, saya tidak bisa asal-asalan, untuk hal yang baru saya harus melakukan ujicoba terlebih dahulu, dan itu memakan waktu.
Terimakasih atas pengertiannya...

Satu hal lagi... ada beberapa pertanyaan yang tidak bisa saya reply. Oleh karena itu aktifkan reply pada GooglePlus sobat, agar pertanyaan bisa saya balas."

Balas

mantap kang.. :-bd saya menunggu tutorial yang bisa merubah scrollbar browser :)

Balas

sedang proses ujicoba sob.. ditunggu aja :D

Balas

owh begitu ya kang, saya tunggu jawabannya kang, hehe, nih kang beberapa hal orang sering melakukan hal out of topic (ala saya) :
1. pada artikel pertama, pasti komentarnya akan cepat dibaca oleh admin
2. ribet harus cari-cari halaman yang sesuai topik yang mau ditanyakan
3. kalau di halaman out of topic jarang terbaca oleh admin.

Balas

udah tau blog kang ismet rame pertanyaan, cari solusi sendiri dong bro kalau mau cepet :P

Balas

sorry sob... dihapus satu jadi kebawa semua deh :D

Balas

Masih lup lep kang ah .. eta da bus teh jeng susuluduk kana tihang tlp jadi weh ngabarerang kana blog haha

Balas

area tertentu maksudnya sperti apa kang? :D hehe

Balas

tuntut ka nu gaduh busna kang :D

Balas

hanya dalam tag 'div' dengan class tertentu.. kitu tah kang :D

Balas

Mantap kang :D menghemat ruang

Balas

nah itu yang saya tunggu, yang cross browser pokoknya :)

Balas

tiny scrollbar ya... Mantap deh

Balas

betul sob.. ternyata ada lagi yang lebih simple.. nicescroll

Balas

iya sob.. biar tambah keren lagi :)

Balas

ini juga cross browser, tapi masih belum bisa untuk browsernya

Balas

iya kang... nicescroll lebih mantap dan simple...

Balas

wah... ini yang ane tunggu-tunggu...
thanks kang tutorialnya..

Balas

Aiih, mantap kang JQuery na, pelajaran heula ah :D

Balas

Kak di blog aku kok gak berfungsi scroll nya, tolong bantuannya kak, udah aku coba berulang kali masih gagal kak, kira-kira yang salah dimana ya, tolong cek di www.sagitasoft.com klik icon lonceng pada navbar ?

Balas

Kak, tolong lah kak, notifikasi pada blog aku gak bs discroll lo, mohon bantuannya donk................?

Balas

Sudah bisa kak, ternyata aku harus meraba-raba sendiri dimana letak kekeliruannya, dan sudah aku modif sedemikian rupa supaya sesuai dengan template blog aku, makasih banyak tutorialnya ?

Balas

Poskan Komentar


×
Chat