How To Change Font, Size, Color Of Sidebar Title In Blogger

Advertisements
Are you bored with your dirty looking Sidebar? Sidebar is one of the core elements because it holds all those widgets which have significant information about a website. Let us assumes that a person arrived on your blog while navigating through your articles he saw a junky looking Sidebar Heading. Hence, a pleasant visit was turned into a horrifying one. Since, first impression is the last impression. Therefore, it is essential to decorate your Sidebar Headings with Correct Color Scheme and fonts. So, those who are anxiously looking for a method of modifying their Blogger Blog’s Sidebar Headings have arrived to the right place. In this article, we will learn How to Change Sidebar Fonts, Color and Size in Blogger Platform. 


How To Change Font, Color, Size of Sidebar Titles in Blogger:

There is no rocket science behind Sidebar heading. Almost all Blogger Enabled websites uses H2 Heading tags for the Sidebar headings. Therefore, it is extremely straightforward to alter or change Sidebar headings. Consider the following Instructions.

Step#1: Go To Blogger.com >> Template >> Edit HTML >> Proceed.

Step#2: Now within the Template search for the following chunk of coding. Remember: it is not necessary that you may get the same coding because every single template has different style of coding. Look for the similar CSS coding.

.sidebar h2 { ______
________________
________________
________________
________________ }


Step#3: Once you find a similar coding in the template then, just replace it with the Following CSS coding. Make sure the Opening “{“and the ending “}” tags are properly closed otherwise it might mess up the StyleSheet of your website. 


.sidebar h2{
border-bottom: 1px solid #d2d2d2;
padding: 0 0 12px;
margin: 0 0 10px;
margin-top:5px;
font-weight:inherit;}

.sidebar h2{
text-transform: uppercase;
font-family:Oswald;
font-size: 20px;
padding: 0 0 5px;}

Step#4: Now it’s up to a person that in which way he wants to change his Sidebar Reading. Try to Change Font Family, Font Color and Font Size. However, if a person don’t want to get in trouble then he can use or predefined design. Once, everything is finalized save your template. 

From The Editor’s Desk:

We hope that this small but flexible technique would help you to customize your predesigned template. Many of our readers were asking again and again that How they can create their own Blogger Template. To be honest, creating a Blogger Theme is not a child’s play because it needs lots of knowledge about the coding language. For that reason, we have decided to share all the essential tips that are needed to customize a Blogger Template. What are your thoughts about this technique?  Take a lot care of yourself till then Peace, Blessings and Happy designing.
Advertisements

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).

Comment With:
OR
Choose Wisely!

10 comments

December 25, 2012 at 11:49 AM

Blogger default templates do not use sidebar h2 tags (except awesome template).So how do we modify the css of those sidebars.Surely template editor is not an option for advanced edits like text shadows.

Regards
Your Pc Genie

Editorial Team MOD
December 25, 2012 at 11:52 AM

Mostly, the Themes We Use in this Time and Age Supports Sidebar h2 .From my past 100 Theme views i have hardly found any site that is not using the Same ID.

However, For Blogger Default Theme you can JUST USE H2. Consider the Following coding for default OLD Blogger themes.

h2{
border-bottom: 1px solid #d2d2d2;
padding: 0 0 12px;
margin: 0 0 10px;
margin-top:5px;
font-weight:inherit;}

h2{
text-transform: uppercase;
font-family:Oswald;
font-size: 20px;
padding: 0 0 5px;}

We Just Removed .Sidebar Hope that answers your question. Peace

January 2, 2013 at 11:42 PM

Best Result>>u add all change before ]]>!!!for example:

.sidebar h2 {
margin:0;
padding:0 0.2em;
line-height:1.5em;
}


]]>

August 29, 2013 at 3:40 PM

thx for the tip! it was just what i need for my ugly sidebar. how do u remove the dots? because my sidebar already uses arrows

Editorial Team MOD
August 29, 2013 at 4:26 PM

What's your Blog URL?

Cee
August 30, 2013 at 2:04 PM

http://www.ceezworld.com/

Editorial Team MOD
September 8, 2013 at 11:33 AM

Add this to CSS to remove the Dots

.sidebar li {
display: block;
}

July 30, 2014 at 12:48 PM

http://girlallover.blogspot.com/

November 9, 2014 at 10:10 PM
April 6, 2015 at 6:50 AM

Thanks for this!

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2018. MBL Networks, All Rights are Strictly Reserved.