How to Insert Custom CSS Codes into Blogger Blog Template

Cascading Style Sheets (CSS) are mainly used to styling your Web Pages or change the looks of your Blog. Everyone wants to make his/her blog different and unique from others either by changing layouts or adding some elements apart from your niche.

There are mainly five options for adding CSS codes into blogger blog and you have to choose one of them as the best option which you can easily apply to your blog. Generally, the choice for adding/changing CSS codes will depend on your needs like whether you want to add CSS for the entire blog or just want to style any particular element viz. Sidebar, footer, single post, specific Gadget etc.

1) Add CSS in the Blogger Template Designer

This is a simple and best option for those who are new to the world of blogging. In this method you need not worry about the error to be faced while adding CSS codes into blogger template.

This customized preference has been provided by the Blogger’s Template Designerand you can change any aspect of your blog by adding CSS codes into the Add CSSfield located under Advanced Tab.

The best part of this tool is that you can see the return instantly in a live preview beneath the editor.

Step-1:

Login to your blogger account at blogger.com/home and click on the particular blog.

Step-2:

From your blog Dashboard, go to the Template Tab of your blog and click onCustomize button.

Step-3:

Under the Advanced Tab menu on left pane, scroll down and select Add CSS. However, if you are using a third party Blogger Template, there may be only Add CSS sub-menu on the right pane.

Step-4:

Now you can add CSS in the field located under Add Custom CSS to override existing styles of your blog.

2) Add CSS through Edit HTML of Blog Template

To use this method, you should have some basic knowledge about HTML Editor of blogger blog template. In other words, if you are familiar with HTML codes, you can add CSS codes more easily into your blog.

However, I strongly recommend you to please download a copy of your blog template before making any changes or editing the code.

For adding any CSS code into blogger template directly, go to the Template Tab of your blog and click on the Edit HTML button.

In the open HTML Editor of your blog, you will see a bunch of lines with various codes. Click or put your mouse pointer anywhere in the given codes and search for ]]>

Now, before or above ]]>

 add your CSS codes to change almost any aspect of your blog’s appearance. Note that each Cascading Style Sheets (CSS) starts with a tag name and CSS codes shall be inserted between the {Brackets} in the style sheet.

For Example:

/* CSS Codes sample for body tag */

body {font-family:"Times New Roman",Serif;

color:#123456;

background:#654321;

border:solid 2px red;

}

After adding the codes click on Preview Template to see the effects and then only save template. You may also add your CSS between anywhere in the template but it should be better to insert it before closing the 

 tag.

3) Insert CSS codes through Gadgets

This method is also risk free and it can be useful for newcomer of blogging platform. Further, if you have bunch of Open Codes of CSS, this approach will be user friendly.

Just visit your blog Dashboard and go to the Layout tab and then click on any Add a Gadget link provided on the widget areas of your blog.

Now, scroll down and click on HTML/JavaScript and then add your CSS codes there between

4) Link external CSS files into Blog

Beginner shall not use this method as because it takes lots of care and technical knowledge like adding CSS through Edit HTML of Blog Template.

But, we have a simple trick for that. So, if you have external CSS file and want to link the externally hosted CSS file to your blog template then you can do this as follows:

type="text/css" rel="stylesheet" href="your-externally-hosted-style.css">

Go to your blog template Editor and search for  tag and then add the above HTML codes with the link of your externally hosted style.css file after/below the  or before/above the 

.

However, the link tag must be placed within the  ...  element only. The rel attribute with the value “stylesheet” allow the browser to recognize that the href attribute gives the Web address (URL) for your style sheet.

5) Add CSS for Single Post of your Blog

This technique is to be used for inline style. In other words, you may apply this method for a specific blog post or webpage.

Accordingly, if you want to do one-time formatting for a particular piece of text in your blog post. Here is the format to style it:

style="CSS Codes here">Write your text here

Suppose you want to style a particular text (Showeblogin) in a specific paragraph then you may do this with the help of this simple coding.

Go to the post editor (HTML) instead of compose mode of that particular blog post and add the following CSS codes:

style="color:red;font-weight:bold;background-color:#f3f3f3;">Showeblogin

Enjoy!