Are you looking to make your Blogger blog stand out with a more professional and eye-catching design? One simple yet effective way to do this is by customizing the scrollbar and text selection colors. These small changes can significantly enhance the user experience, making your blog more attractive and user-friendly.
Customizing the appearance of your Blogger blog can make it look more professional, engaging, and user-friendly.
In this guide, we'll walk you through the step-by-step process to customize your blog's scrollbar and text selection colors. By following these instructions, you'll be able to give your blog a unique look that reflects your style and personality.
Why Customize Your Blog?
Customizing your blog isn't just about aesthetics; it's about creating a better experience for your visitors. A personalized scrollbar and selection color can make your blog look polished and professional, setting it apart from others.
Imagine having a blog that not only provides valuable content but also has a unique look and feel that resonates with your audience. That's the power of customization!
Please note that these customizations are easy to implement and do not require advanced coding skills.
While you're enhancing your blog, consider expanding your skills with our E-Book “Quick Start to Web Development with HTML, CSS, and JavaScript”. This E-Book offers a comprehensive guide to web development, perfect for bloggers looking to improve their technical skills.
Ready to dive in and make your blog stand out? Let's get started with the customization process!
Ensure you have a backup of your template before making any changes to the HTML and CSS code.
Customizing the Scrollbar
Overview
By default, the scrollbar in most browsers is a plain grey color. However, you can customize it to better match your blog's theme. Customizing the scrollbar involves changing its width, height, track color, thumb color, and more. This not only improves the aesthetic appeal of your blog but also enhances the overall user experience.
Steps to Customize the Scrollbar
Ensure you follow each step carefully to avoid any errors in your template.
Step 1: Login to your Blogger account and navigate to the Template section. Then, click on Edit HTML.
Step 2: Click anywhere inside the template code box and press Ctrl+F (Windows) or Cmd+F (Mac) to open the search function.
Step 3: Search for closing skin tag ]]></b:skin>
/*--------- Scrollbar Customization by learntricking.blogspot.com--------- */
::-webkit-scrollbar {
width:8px;
height:8px;
}
::-webkit-scrollbar-track {
background:#FFF; /*------This is the background color of the scrollbar track ------*/
-webkit-box-shadow:inset 1px 1px 2px #E0E0E0;
border:1px solid #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: Click the Save button to apply the changes.
Detailed CSS Code
The above CSS code customizes various parts of the scrollbar:
- Track: The background of the scrollbar track can be changed using the
backgroundproperty. - Thumb: The scrollbar thumb (the draggable part) color and shadow effects can be customized for normal, hover, and active states.
- Width and Height: The dimensions of the scrollbar can be set using the
widthandheightproperties.
Feel free to modify the color codes to match your blog’s theme and personal preference.
Customizing Text Selection Color
Overview
When users select text on your blog, the default background color is blue and the text color is white. Customizing this color scheme can add a unique touch to your blog, making it more visually appealing and consistent with your overall design.
Steps to Customize Text Selection Color
Ensure to save your template changes to avoid losing any customizations.
Step 1: As with the scrollbar customization, start by logging into your Blogger account and navigating to the Template section. Click on Edit HTML.
Step 2: Click inside the template code box and use the search function (Ctrl+F on Windows or Cmd+F on Mac) to search for closing skin tag ]]></b:skin>
/*--------- Text Selection Customization by learntricking.blogspot.com------------- */
::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;
}
Step 3: Save your changes by clicking the Save button.
Detailed CSS Code
The provided CSS code changes the background and text color when a user selects text on your blog:
- Background Color: The
backgroundproperty within the::selection,::-moz-selection, and::-webkit-selectionselectors sets the background color for text selection. - Text Color: The
colorproperty sets the color of the text when selected.
Customize the color values to match your blog's theme and create a cohesive look.
Final Step: Testing Your Changes
After saving your template, visit your blog to see the changes in action. Select some text and check if the new colors appear as intended. If needed, go back and adjust the color codes for a perfect match.
Remember, while visual customizations are important, the quality of your content should always be your top priority.
Engagement and Support
We'd love to see your customized blogs! Share your blog URLs in the comments, and we'll personally visit to see your chosen colors and leave feedback.
Facing any issues with your template while adding these styles? Just ask in the comments, and we'll be happy to help.
Don't forget to like and share this guide with your fellow bloggers!
