Thursday, September 23, 2021
HomeBloggerHow to add Custom CSS to Blogger Blog

How to add Custom CSS to Blogger Blog

Must Read

Pradeep Augustinehttps://www.catholicgallery.org
Pradeep Augustine is the founder of Get Cool Tricks. He is a passionate Writer, An Artist, a computer geek and a part-time Blogger who loves to write a lot of technical Contents related to blogging, Windows, Softwares, Android Development and other cool tricks and tutorials in his free time. Stay connected with him on his social profiles.

This tutorial is for the new Bloggers who are not aware of adding Custom CSS to Blogger Blog. Adding the CSS to the template has a lot of advantages, as the added CSS can be called with its class or ID whenever it is needed. You don’t need to add them again and again.  If you are very new to blogging, I recommend you to read, How to create a Blog in Blogger, Giving Professional look to blogger, Running your blog on a custom Domain, Creating Posts and Pages in blogger, Adding custom Robots.txt.

What is a Custom CSS?

CSS stands for Cascading Style Sheet. This is a style sheet language that describes the look and formatting of the document written in HTML. In simple words, CSS is used to style the elements of HTML. In blogger, the template comes with some standard CSS and the CSS that you are going to add in your blogger template is called Custom CSS. This CSS may have the codes for your buttons, Styling, and Formatting of your <div> tag etc. Let us see the steps in adding this CSS code to your blogger blog. Example for this CSS is given below

.YourClassName {
margin: 1px;
color: #EFF8FB;
padding: 5px 15px;
position: relative;
border: 0px #fff;
background-color:#2E9AFE;
border-radius: 5px;
}

Adding Custom CSS to Blogger Blog

CSS can be added to blogger blog in three ways. The easiest method is to add it to the customizer or Template Designer. The other methods include adding the CSS directly into the template in the template editor, or else uploading the CSS separately in some file sharing sites and linking them to your blog template. This method of linking the external style-sheet saves a lot of lines of codes in your HTML. Let us see the easiest method here.

Login to your Blogger and go to the Blog in which you want to add the custom CSS. Navigate to the Template in your left sidebar and click Customize button as shown below.

Adding-Custom-CSS-GetCoolTricks-1
Click Customize button

In the Customizer Click the Advanced Tab and click Add CSS from the submenu that appears. Enter your CSS there in the space provided. and Click Apply to Blog button on your top right corner as shown here.

Adding-Custom-CSS-GetCoolTricks-2
Add your CSS in the space given

You have now added Custom CSS to your Blog.

Other People are reading

Hope you liked this tutorial. For any clarifications and suggestions, use the comment box below. Subscribe to our Newsletter for getting the future updates directly to your inbox.

Related Articles

Pradeep Augustinehttps://www.catholicgallery.org
Pradeep Augustine is the founder of Get Cool Tricks. He is a passionate Writer, An Artist, a computer geek and a part-time Blogger who loves to write a lot of technical Contents related to blogging, Windows, Softwares, Android Development and other cool tricks and tutorials in his free time. Stay connected with him on his social profiles.

9 COMMENTS

guest
Enter your Full Name
Enter Your E-mail Address
The comment form collects your name, email and content to allow us keep track of the comments placed on the website. Please read and accept our website Terms and Privacy Policy to post a comment.
9 Comments
Most voted
Newest Oldest
Inline Feedbacks
View all comments

More Articles Like This