How To Customize Blogger Scrollbar too Text Selection Color

Ever idea virtually if you lot could customize the text alternative color as well as browser scrollbar color/width on your blogger blog? You tin meet the alive examples on our spider web log itself. We accept changed its text alternative color as well as scrollbar’s color & width too. Isn’t it nice? 🙂 Follow this unproblematic pace past times pace tutorial as well as produce the same on your blog. Make your spider web log await to a greater extent than professional, oculus catchy, user friendly as well as of course, colorful too.

Customization of Scrollbar

Default color of scroll bar inward every browser is greyness which tin move customized thoroughly. We tin customize our blogger’s default scroll-bar past times customizing its width, height, scrollbar rail color, pollex color, pollex hover color as well as pollex color when scroll-bar is active. To produce so, all nosotros demand to produce is add together these styles to our blogger template’s CSS style-sheet. Without farther delay, allow us produce the job.

Step 1) Login to your blogger concern human relationship >> become to Template >> Edit HTML.
Step 2) Click anywhere within the template code box as well as hence press Ctrl+F on windows as well as Cmd+F on mac.
Step 3) Find out this footling slice of code draw ]]></b:skin> as well as only earlier that, glue the whole CSS code given below. You tin customize its color codes every bit you lot wish.

/*——— Scrollbar Customization past times TwistBlogger——— */
::-webkit-scrollbar {
width:8px;
height:8px;
}
::-webkit-scrollbar-track {
background:#FFF;  /*——This is background color of scrollbar rail ——*/
-webkit-box-shadow:inset 1px 1px 2px #E0E0E0;
border:1px corporation #D8D8D8;
}
::-webkit-scrollbar-thumb {
background:#c0392b;  /*——Thumb color ——*/
-webkit-box-shadow:inset 1px 1px 2px rgba(155,155,155,0.4);
}
::-webkit-scrollbar-thumb:hover {
-webkit-box-shadow:inset 1px 1px 10px rgba(0,0,0,0.4); /*——Shadow on hover——*/
}
::-webkit-scrollbar-thumb:active {
background:#333;   /*——Thumb color when it is active——*/
-webkit-box-shadow:inset 1px 1px 2px rgba(0,0,0,0.4);
}

Step 4) Hit salve push clitoris :). In the higher upwardly CSS code, I accept added proper comments to alter the color codes to larn inward slowly for every one. If you lot accept farther questions, follow the comment route, am eagerly waiting to assistance you lot produce the project :).

Baca Juga:  New Stylish Sidebar Subscription Box Widget For Blogger - V.2

Note: Please produce portion your spider web log URL inward comments as well as I’ll personally take in every one’s spider web log to cheque which colors you lot accept chosen. I’ll larn out a comment too. Fair enough? huh?

Customization of Text Selection Color

By text alternative color, what produce I hateful is whenever someone selects the text amongst mouse on your spider web log post service as well as hence past times default its color. Got it? Default background color is ever blueish as well as text color is white. Ready to add together roughly to a greater extent than colors to your spider web log on this HOLI season?

Step 1) Just repeat the previous steps start as well as uncovering out this ]]></b:skin> code again.
Step 2) As always, glue the code given below afterward changing the color codes to jibe amongst your blog’s subject as well as hitting salve button.

/*——— Text alternative Customization past times Twistblogger————- */
::selection {
background:#e67e22; /*——This is the background color on selection—–*/
color:#fff; /*——This is text color on selection—–*/
}
::-moz-selection {
background:#e67e22;
color:#fff
}
::-webkit-selection {
background:#e67e22;
color:#fff
}

Final Step:  Do non forget to take in your spider web log afterward adding these styles. How tin you lot forget? Right? lol

There is it. These things are of footling importance compared to your spider web log content hence produce non waste materials your fourth dimension on the things similar adding every other widget to your blog. Bear amongst your dandy content as well as serve your audience amongst your best of best. Always laissez passer on them imperial handling because? They deserve it same every bit you lot do. 🙂

Baca Juga:  Memasang Syntax Highlighter Dengan Fungsi Defer

PP: Did you lot facial expression upwardly whatever occupation amongst your spider web log template piece adding these styles? Just enquire me inward comments as well as I’ll bring together you lot at that topographic point soon. Now produce share, subscribe as well as similar our page buddy, you lot tin produce it. 🙂