Αλλάξτε το scrollbar στο blog ή το site σας (webkit-scrollbar)

Πολλοί ιστότοποι θα δείτε ότι δεν έχουν τα συνηθισμένα scrollbar (μπάρες δεξιά και κάτω στον browser) όπως για παράδειγμα το Gmail όταν συνδεόμαστε μέσω Google Chrome. Αυτό γίνετε με έναν μικρό κώδικα CSS που δεν επιβαρύνει τη ταχύτητα του blog σας. Δείτε τα παραδείγματα, για να το κάνετε και εσείς.

Θα κάνουμε λοιπόν χρήση του στυλ -webkit-scrollbar το οποίο όμως δεν το υποστηρίζουν δυστυχώς όλοι οι browsers. Θα το βλέπουν οι επισκέπτες του blog σας μόνο εάν χρησιμοποιούν Google Chrome ή Safari. Δεν δουλεύει ακόμα σε Firefox και Internet Explorer αλλά δεν υπάρχει πρόβλημα γιατί τότε ο κώδικας απλά παρακάμπτεται.

Στα παρακάτω παραδείγματα για όσους θέλουν να τα βάλουν στο site τους αρκεί να επικολλήσουν τον κώδικα μέσα στο CSS τους. Για όσους χρησιμοποιούν τον blogger, από το αριστερό μενού του Blogger επιλέγουμε το [Πρότυπο] και [επεξεργασία HTML]

Με Ctrl + F αναζητούμε το ]]></b:skin> και ακριβώς από πάνω του επικολλάμε τον κώδικα. [Αποθήκευση] και τέλος.

Παράδειγμα 1ο

Δείτε το scrollbar στο koprogato.blogspot.gr

/* Scrollbar from tetsitech.blogspot.com  */
::-webkit-scrollbar{
    width:18px;
    height:10px;
    background-color:#fff;
    box-shadow: inset 1px 1px 0 rgba(0,0,0,.1),inset -1px -1px 0 rgba(0,0,0,.07);
}
::-webkit-scrollbar:hover{
    background-color:#eee;
}
::-webkit-resizer{
    -webkit-border-radius:4px;
    background-color:#666;
}
::-webkit-scrollbar-thumb{
    min-height:0.8em;
    min-width:0.8em;
    background-color: rgba(0, 0, 0, .2);
    box-shadow: inset 1px 1px 0 rgba(0,0,0,.1),inset -1px -1px 0 rgba(0,0,0,.07);
}
::-webkit-scrollbar-thumb:hover{
    background-color: #bbb;
}
::-webkit-scrollbar-thumb:active{
    background-color:#888;
}

Παράδειγμα 2ο

Δείτε το scrollbar στο larisafun.blogspot.gr
Αλλάξτε τα χρώματα στον κώδικα (τα κόκκινα νούμερα) και φτιάξτε την μπάρα με το δικό σας γούστο. Το χρωματολόγιο θα το βρείτε εδώ.

/* Scrollbar from tetsitech.blogspot.com  */
::-webkit-scrollbar {
background: #474747;
}
::-webkit-scrollbar-thumb {
background-color: #FB8F3D;
border-bottom-left-radius: 10px; 
border-bottom-right-radius: 10px; 
border-top-left-radius: 10px; 
border-top-right-radius: 10px; 
border:1px solid #FDA251;
}
::-webkit-scrollbar-thumb:hover{
    background-color: #FBA53D;
}

Παράδειγμα 3ο

Εάν έχετε διάθεση, μπορείτε να αλλάξετε ολόκληρη την εμφάνιση του scrollbar, όπως έχει κάνει ο τύπος εδώ. Φτιάξτε τις τέσσερις εικόνες που σας ζητάω στον παρακάτω κώδικα και επικολλήστε τες στα κόκκινα γράμματα.

::-webkit-scrollbar {
    width: 18px;}

::-webkit-scrollbar-track {
    background: transparent url(ΕΙΚΟΝΑ_ΜΠΑΡΑΣ) repeat-y;}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
background:url(ΕΙΚΟΝΑ_ΚΙΝΟΥΜΕΝΗΣ_ΜΠΑΡΑΣ_ΚΕΝΤΡΟ) no-repeat;}

::-webkit-scrollbar-track-piece:start{
     background: transparent url(ΕΙΚΟΝΑ_ΚΙΝΟΥΜΕΝΗΣ_ΜΠΑΡΑΣ_ΕΠΑΝΩ) repeat-y !important;}

::-webkit-scrollbar-track-piece:end{
    background: transparent url(ΕΙΚΟΝΑ_ΚΙΝΟΥΜΕΝΗΣ_ΜΠΑΡΑΣ_ΚΑΤΩ) repeat-y !important;}

Εάν θέλετε να παίξετε κι άλλο με το -webkit-scrollbar, διαβάστε ένα αναλυτικό άρθρο που έχω βρει εδώ.