In this tutorial, you will learn how to add CSS custom style in Blog on Blogger. CSS play a very important role in Presentation of website or Blog or customize your existing template. But if you are the newbie in the blogger and don’t know how to insert the code of CSS and HTML? You will get the answer in this tutorial, for your better understand we also insert the screenshot.
The Blogger platform offers two options to insert the CSS in blogger. You can add it in as part of your blogger template or second is you can add it to separate from the template. HTML template editor where you can put the code according to your needs anywhere in the document. And another Add CSS GUI option provide in visual template designer. I suggest using Add CSS option in blogger for people who are new to the web and not know who insert the code in blogger template.
Insert CSS in Template Designer
Blogger has included an Add CSS option where you can just only the copy and pastes the CSS styles code. Blogger has a set of template designing tool that can use to change the color, fonts and layout of your blog without writing the even line of code. The template designer allows you to own define CSS style in your Blog in Blogger. To access these options follow the instruction:
- Go to the Blogger dashboard.
- Now select the blog if there are the list of your Blog and then go to the template on the left pane.
- On the Layout tab, click on the button that says “Customize” and it goes the Template Designer Page.
- Then Select the Advanced tab from the list and select the Add CSSbottom it.
- Now there will be input area display where you paste the CSS code style like.
.header {
Height: 60px;
Width: 700px;
Background-color: pink;
Border-radius: 24px 20px;
}
- In here you don’t need to add HTML element like < style type=”text/css”> </style>, we paste the css style directly. Adding those elements may result in wrong.
Adding the CSS using Blogger Template
this method is recommended to all template designer who develops blogger template. There is number of predefine line of code which not code for the new developer.
- Go to the Blogger dashboard.
- On the template tab, select the Edit HTML.
- Now there is number line of code press the ctrl+ f and find the </head> and paste your CSS code above of the </head>.
<style tyle=”text/css”>
Body{
Background-color: brown;
Color: #fff;
Font-family: “arial”;
Font-size: 20px;
}
- So now you have the idea where you can insert the css code in your blog. Remember to backup your template before any change to it. To backupyour template go to the Blogger Dashboard >>Template tab on right corner there will be Backup/Restore button and then download the full template.
Author Desk – if you have face any problem then feel free contactus or leave the comment in comment box.