How to Easily Add CSS Codes in Blogger Template

Socialize It →

Tweet

3

Advertisements

As a beginner sometimes it becomes extremely tough to customize your blogger template without learning or understanding how it is really done. This is the reason why you end up in either downloading a free blogger template or spending money in hiring a blogger template developer. Recently, one of our user asked us that how to add CSS to Blogger as CSS codes plays the most significant role while you are developing or even customizing your existing template. Today in this article, we will show you how to easily add CSS codes in Blogger template.

There are two ways of adding CSS codes in your blogger template. The first method is recommended for developers and the other one is for non-technical users who are not much known to codes. The two ways mentioned below:

Developer’s Way of Adding CSS Code in Blogger:

This method is recommended to all template designers who develop blogger templates. The very first thing you would be going is to login to blogger dashboard and go to Template >> Edit HTML >> Search for ]]></b:skin> tag and just above it paste the CSS code that you would like to add to your blogger site.

Once everything is done, you are finish customizing your template you can preview the changes that you have done before applying it to your site by pressing “Preview template” button. After previewing if the results are satisfactory press the “Save Template” button present towards the top of the template editor. Your CSS is successfully applied to your

Adding CSS to Blogger Using Template Designer:

Luckily, for non-technical users blogger provides an amazing tool known as “Blogger Template Designer” that allows you to take care of some most modest customization that you want to see in your template without learning any of the web developing languages like HTML or CSS.

From Blogger dashboard go to Template>> Customize as it can be seen in the screenshot below:

Now you will notice a step of tools above your screen and live preview of your blog towards the bottom. Select “Advance >> Add CSS” and in the empty text box area paste your CSS codes.  Since, the preview of your blog is interactive. Therefore, while adding CSS codes you can notice the changes being done on that preview window.

Once everything is done press “Apply to Blog” button present at the top right corner of your screen.

Congratulations: Even if you are a developer or a common blogger user, we are sure this tutorial has surely helped you to understand where you have to put up all the CSS codes. You can now check your site to see if codes are working properly.

In case you people want to add more to this resource then feel free to leave your quality comments below. If you liked this article then do not forget to share it with the people that it might benefit by sharing it on Facebook, Twitter or may be Google+.
 

Advertisements

About the Editorial Team

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