How to add CSS code to blogger blog

If you own a blog on Blogger, you will definitely have to add some customization to your blog, such as changing some colors, adding properties, or hiding elements through CSS.

Element-level customization (inline css):

This method is used to add customization to a specific element only, and we often use this method to add the formatting of an element within the post without going to the source code of the blog.

How to add CSS code to blogger blog

  • To add CSS at the element level, we switch the editor to 'Edit HTML', then search for the HTML element and add the following tag to it:

Put the CSS code in place of the red text, in the above code I put the DIV element as an example only but it could be any other HTML element.

Adding CSS codes via customization:

And it is the easiest way and it is recommended by blogger experts, just go to the blogger control panel and then from the appearance click on 'customize'.

Watch the explanation video for css

After that, click on the floppy disk icon at the left of the page to save. The nice thing about this method is that you can undo or cancel the codes even after saving. You can also return to this page after closing it to find the codes are still in their place where you can modify or delete them.

Adding CSS codes from within the HTML code:

Which is probably the way most bloggers use on Blogger, to do this go to Appearance and then under Personalization choose 'Modify HTML', click with your mouse pointer anywhere in the code and then press Ctrl+F.

In the search box at the top left of the code, type the following phrase

Add CSS code on a specific page:

  • It is one of the ways that many people who use Blogger may not know, and this method is often used to hide certain elements at the level of a specific post, and we mean the elements on the page, but they are not within the post, such as the date, comment box, labels and others.
  • And suppose, for example, that we want to hide the comment box on a particular page, enter the post and then change the editor mode to 'Edit HTML', and at the bottom of the code add the CSS code between the open and close style tags like the one in the image.

You can use the same method to hide the date or a specific category. It is not about hiding or showing, but you can add CSS elements to any element inside the blog page.

In the end, I hope the explanation is simple and useful, if you have any explanations, leave them in the comments.