 |
| CUSTOM CSS CODE IN BLOGGER TEMPLATE |
CSS and CSS3 are Cascading Style Sheets. CSS Code is used to change the look and style of the website and blog. Each and every people want some uniqueness on their Blog either to change the layout or add few elements.
Here five options are available to add CSS code to blogger Themes or blogger template. It depends on you which option you like most. It also depends on the requirement. Either it is for entire blog or a particular post and element like footer gadget etc.
Blogger Theme Designer
It is a very easy and simple method for a newbie blogger who just started blogging. While adding CSS code to blogger theme here you will not face error problem. It is provided by the Blogger Theme Designer where you can add CSS code in Add CSS Rich Text field which is located under Advance option. The main advantage of this text editor is that there is a live preview.
How to add meta tags code in blogger blog?
How to add meta tags code in blogger blog?
How to Insert Custom CSS Codes into Blogger Theme?
Go to Blogger.com/Home --> Click on Particular Blog
1. Click on Theme
2. Click on Customize
1. Advance Tab --> Select Add CSS
2. Add/Paste your CSS Code in Add custom CSS
3. Apply to Blog
1. Click on Theme
2. Click on Customize
1. Advance Tab --> Select Add CSS
2. Add/Paste your CSS Code in Add custom CSS
3. Apply to Blog
Note: If you are using third-party Blogger Template/Theme there may be only Add CSS sub-menu on the right side.
Edit HTML of Blog Theme
This is a little bit difficult for a newbie blogger. You should have some basic coding knowledge about HTML and CSS. If you don't have an idea about coding HTML and CSS and you want to edit, first of all, Backup/Restore your blog template then only you try to change or edit code. If you are getting error press Ctrl+Z to make it unchanged.
Go to Blogger.com
1. Click on Theme
2. Click on Edit HTML
Click Mouse anywhere in given code --> Press Ctrl+F --> Type ]]> in Search box --> Add/Paste your CSS Code before ]]>
1. Click on Theme
2. Click on Edit HTML
Click Mouse anywhere in given code --> Press Ctrl+F --> Type ]]> in Search box --> Add/Paste your CSS Code before ]]>
Note: CSS starts with a tag name and code must be inserted between {Brackets}.
Example:
After editing code sees the preview then only save the template. If your CSS code is between <style> CSS code </style>. You can add anywhere but it is better to Add before </head>
Go to Blogger.com -->Click on Theme --> Edit HTML --> Click Mouse anywhere in code section
1. Press Ctrl+F
2.Type </head> in search box -->Press Enter key
3. Before </head>
4. Paste Code
5. Click on Save Theme
1. Press Ctrl+F
2.Type </head> in search box -->Press Enter key
3. Before </head>
4. Paste Code
5. Click on Save Theme
Gadget
This is a riskless and user-friendly method for the newbie blogger who just started blogging. If you have CSS code in bulk, it will be the best approach.
Go to Blogger.com --> Blog Dashboard
1. Click on Layout
2. Click on Add Gadget.
1. Click on Layout
2. Click on Add Gadget.
1. Select HTML/JavaScript
1. Add/Paste CSS Code.
2. Click on Save
3. Click on Save arrangement
<styletype="text/css">
/*Your CSS Code will be placed here*/
</style>
External CSS files
For beginners and newbie blogger it is very difficult to change CSS Code through Edit HTML in Blog Theme. There is a simple method, if you have an External CSS Code file and you want to link to your Blog Theme then you can link this as below.
<linktype="text/css" rel="stylesheet" href="your-external-style-code-file.css">
Follow this step:
Go to Blogger.com --> Blog Dashboard --> Click on Theme --> Click on Edit HTML --> Click Mouse anywhere in given code --> Press Ctrl+F --> Type </head> in search box --> Add/Paste your CSS code file link above </head>
Note: Link of External CSS code file should be placed between <head> and </head>.
Example:
CSS for single post
This method is applied to a single webpage or single blog post here you can use "Inline Style" technique. It is better for one-time formatting for a particular text in your webpage or blog post. The syntax of Inline Style is as below.
<spanstyle="CSS Code">Your Text</span>
Where you can change and place the code in your blog post. Follow this step:
Go to Blogger.com --> Blog Dashboard --> Select a particular Post --> Click on Edit option of post --> Select HTML in post editor --> Add/Change Inline CSS Code.
Example:
Hopefully, this post is very useful for you, if it is so, please help other bloggers and your friends to share this very important "coding and setting" related post on social media and also don't forget to comment on the comment box.
Posts
0 comments:
Post a Comment
Thank you for reading the post.