[best way] How to Insert CSS Codes in Blogger Blog

 Any custom CSS to your blog looks like a pro blogger is a blog. Cascading Style Sheets (CSS) is used for the styling of your website, or to change the look and feel of your Blog. Everyone wants to make his/her blog is different and unique from the rest, either by changing the layout or adding to certain areas, apart from your niche. 

There are basically five ways to add CSS code in blogger, blog, and you will need to choose one of them as the best option which you can apply to your blog. In general, the choice to add/edit the CSS codes will depend on your needs, if you want to add the CSS to the entire blog, or just like the style of a particular area, i.e., Sidebar, footer, single post, in particular, Gadget, etc

1. Add the CSS in the Blogger template designer 

This is a simple, easy, and best option for those who are new to the world of blogging. In this method, you don't have to worry about that, this error will be brought to you when you add the CSS code to your blogger template. 

This custom has been provided by the Blogger Template Designer, you can change to any part of your blog is to add the CSS codes to add the CSS to the field, which is located in the Advanced Tab.

The best part of this tool is that you can look directly into a live preview in the editor.

Step 1: Sign in to your blogger account blogger.com/home and then click on the right of the blog. 

Step 2: From your blog's Dashboard, go to Template Tab of your blog then click on the configure button. 

Step 3: In the Advanced menu on the left-hand pane, scroll down, and select to Add to the cascading style sheets. However, if you are using a third-party Blogger Template, it can only be to Add a CSS sub-menu to the right

Step 4: Now you can add the CSS into the box, which is located in the Add Custom CSS to override the existing styles of your blog. 

2. Add CSS to Edit the HTML code of the Blog's Template 

In order to use this method, you should have some basic knowledge of HTML Editor for your blogger blog's template. In other words, if you're familiar with HTML coding, you can add the CSS codes to more easily into your blog. 

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

In order to add a CSS code to your blogger template directly, please go to the Template Tab of your blog then click on the Edit HTML button. 

Out in the open the HTML Editor of your blog, you're going to see a lot of lines of code. You have to click on the mouse anywhere in the given set of codes to search for ]]></b:skin>

For Example:

/* Showeblogin 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, then click the Preview of the Template in order to see the effects, and save the template. You can also place your CSS between the <style>CSS codes here</style> anywhere in the template but it should be better to insert it before closing the </head> tag.

3 Insert CSS codes through Gadgets

This method is also risk-free and it can be useful for newcomers to blogging platforms. Further, if you have a 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 to and click on HTML/JavaScript and then add your custom CSS codes to be found between the 

<style type="text/css">

/* Place your CSS codes here. */

</style>

4) the Link is an external cascading style sheet file to the Blog 

Beginners should not use this method because it takes a lot of care, and the technical knowledge to add to the CSS to Edit the HTML code for the Blog Template. 

However, we have an easy trick to. So, if you have an external custom CSS file and you want to link externally hosted CSS file, to your blog's template, you can do this in the following ways: 

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

Go to your blog's template, an Editor, and search for <head> the tag, and then add the above is the HTML code of a link to the external host's style.the CSS file after the/in the <head> or by/over </head>.

However, the link, the tag needs to be placed in the <head> ... </head> the only element. The Rel attribute with the value "stylesheet" allow the browser to recognize that it is the href attribute, the Web address (URL) of your style sheet. 

5. Add CSS in order to create a Single Post for your Blog 

These technologies are used in style. In other words, you can also use this method for a specific blog post or page. 

Therefore, if you would like to make one-time formatting for a particular part of the body of your blog post. This is the format of the style it is.

<span style="CSS Codes here">Write your text here</span>

Let's say you want to dress up as a certain amount of at a certain point, you can do so with the help of this simple coding. 

Go to your post editor (HTML), rather than as a shooting location for that particular blog post, and add the following to the custom CSS code: 

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