Pages

Tuesday, November 27, 2012

How / Where to Add Custom CSS to Blogspot on Blogger.com

Sometimes you need to change colors, background, or margin space for your Blogspot blog on Blogger.com, then where and how to add the CSS codes to make the change?

There're two ways for your to add the custom CSS codes: in dashboard's Advance CSS area, or from the template.


1st Option: Add your own custom CSS codes from the dashboard

- You can doing this from the dashboard by:

(1) clicking on Template
(2) click on Customize (screenshot below)


 (3) Then you will see following window popup at the top of the page, click on Advance, then click Add CSS


 (4) You will see the right side window open up (following screenshot), paste or type in your CSS codes in the white window, and click on the orange button Apply to Blog to save the change.

Once saved, click on <<Back to Blogger to go back to your dashboard.


 Note: to add the CSS, you have to find out the CSS Selectors to use for yourself.

2nd option: Modify the template

The second option to add custom CSS to your blog is to modify the template directly, if you are comfortable  to do so. Anyways, back up the template before doing any changes is always a good idea.

You can start from dashboard, click on Template->Edit HTML->Proceed->check on option "Expand Widget Templates", then search for the CSS Selector you'd like to modify.

Details:

1. Go to you blog panel, at the left side, click on "template", then at the right, click on "Edit HTML" button.(screenshot below)




2. In the popup window, click on "Proceed" botton


3. In the 'Template>Edit HTML" window, click on option "Expand Widget Templates".


4. On you keyboard press 2 keys  "Ctrl" and "F" at same time to bring up the search box to search the CSS selector you want to modify.

Question:

How to know which CSS selector to modify so to make the change for colors, background, or margin space? I will take about it in next post.

It's Your Turn

Do you usually use CSS codes for Blogger? How do you usually add the CSS codes, and how do you find out the CSS selector to modify? Share your experience and insights in the comments box below.



1 comment