How to Add CSS code To Blogger using Template Designer

If you are having difficulties adding the CSS codes in a Blogger template, here's a short guide that will show you a more practical and fast way to add CSS (Cascading Style Sheets) so that it will be easier for you to customize your blog.

Some readers have complained that when they had to add the CSS codes to install some feature in Blogger, they found it difficult to locate the ]]></b:skin> tag. So, I decided to make this quick tutorial to show you another way of adding the CSS without having to access the Blogger HTML editor.

Adding CSS via the Blogger Template Designer

Step 1. Log in to your Blogger account and select the blog that you want to customize.

Step 2. From the Blogger dashboard, choose "Template" and click on the "Customize" button.

Step 3. Click on the "Advanced" tab.

Step 4. Now just add your CSS code inside the right field, located in the "Add CSS" tab (if you have more options, you may need to scroll down the list). Here you can add any CSS code when you want to apply a new style to your template.

Step 5. Once added, click on the "Apply to blog" button to save the changes.

Following this method you can't edit the existing CSS styles already added in your template, which will require to access the template's HTML and make the modifications there. Here you can only add new styles and edit the existing styles added through the Template Designer panel.

It is also important to mention that when adding the CSS styles, it isn't required to put the <style type="text/css"> ... </style> style tags, which normally would go above the </head> tag of the template html. Adding those tags may result in an error.

If you change the template, the CSS added here will be removed. The same goes for any other additions or CSS customizations made ​​through the Template HTML editor.

What is the difference between padding and margins?

What is the difference between padding and margins?

For those who would like to know more about HTML and CSS, today we will see about the difference between margin and padding CSS properties which allow us to add blank space between the HTML elements, preventing the elements from getting 'stuck' together.

Although both possess similar functions, each has its particularity. 

1. Padding determines the inner margins, being responsible for determining the distance between the content of a given element and its border.
2. Margin is applied to the outside of an element affecting how far the element is away from other elements.

For more info, please take a look at the picture below:

Difference between margin and padding

Just as you have the option to define the borders for each side of your HTML elements (eg. borders in the sidebar), you can do the same with the margin and padding properties. All you need to to do is to change the top, right, bottom and left values​​.
These values ​​that you can select include: pixels (px), centimeters (cm), millimeters (mm). em units (em), x-height (ex), inches (in), picas (pc) and point sizes (pt).

By using margin and padding, you should add each value set in the four corners, as follows: top, right, bottom, left and each value must refer to each side of the HTML element. The first value is for the top, and they follow a clockwise direction, so the value would be close to the right, then bottom and finally, left.

Example 1: 

padding:5px 15px 5px 15px;
- top padding is 5px 
- right padding is 15px 
- bottom padding is 5px 
- left padding is 15px  

margin: 10px 5px 10px 5px;
- top margin is 10px 
- right margin is 5px 
- bottom margin is 10px 
- left margin is 5px

If you define a single value, the distance applies to all sides, so it will be applied to the 4 sides of the HTML element that you want to modify.

Example 2:
padding: 5px (top and bottom) 15px (left and right);
margin: 10px (top and bottom) 5px (left and right); 

If it helps to do it visually, think of an A4 page of type inside a picture frame. The margin is the space between the edge of the sheet of paper and the other elements (the parts of the frame) and the padding would be the space between the edge of the sheet and where the type starts on the page. The border would be the edge of the sheet of paper. 

It's probably easier to understand if you have borders, then it also becomes obvious which one to use. Do you want the "space" after the border (outside the element = margin) or before the border (inside the element = padding).

5 Easy Ways to Improve the SEO of a blog & Boost Traffic

5 easy ways to improve the SEO of a blog 

SEO tips for a better search engine ranking

A blogger needs to know at least the minimum on SEO. For it, you don't need to be an SEO expert but you need to know the minimum so that your posts are well indexed in search engines.

The phrase "content is king" is one of the widest spread Internet memes and is used by many bloggers, with the idea that you should focus on having quality content, while the rest don't matter much. This is not true. Quality content is important, but that shouldn't be the only concern of a blogger today. In addition to producing quality content, your text needs to be optimized for search engines.

5 easy ways to improve the SEO of a blog

In this post, I will talk about of what would be the basics that any blogger needs to learn about SEO and other simple SEO knowledge. Below are 5 tips to improve the SEO of your blog:

1. Define the keyword

When you write a post, it is necessary to choose the keyword (or term) suitable for your text. What you want is that this keyword or term to be searched on Google and then get your post among the top. For this, it is necessary to use this keyword a few times in the text.

For example, here the keyword could be SEO, but this term is too generic and I could hardly get in the top for this search. Then I'll work with a term or a long tail keyword, so that this post will rank for the term "easy ways to improve the SEO of a blog". I will use this term a few times, but without exaggeration.

2. Use the keyword in the post title

Now that I have defined the keyword, I will use it in the post title. This step is very important and certainly will help you to get a better rank in search engines. As you can see, what I have in my title is the easy ways to improve the SEO of a blog keyword, along with other words to form an attractive and optimized title for SEO.

3. Use the keyword in the H2 tags

You must also use heading tags (h2, h3) in your posts. In this post, I am using the keyword "easy ways to improve the SEO of a blog" in a H2 header. Do this always, because it also helps to become well positioned in the search results. If you don't know or don't understand what are the header tags, I would suggest to do a further research on this subject.

4. Use the keyword in the text

You must use your keywords throughout the text. Especially in the first paragraph (please note that I have repeated the title in italics on the first line). But be careful when doing this, there is a maximum and minimum limit for that. Your text needs to be between 1 and 4.5% of occurrences of the keyword. Less than that will have no effect and more than that can alert the search engines and your text might be considered spam.

5. Write posts with more than 300 words

Posts under 300 words have little chance to be among the top results in search engines. Of course, you will be able to rank for multiple keywords that are less popular with less than 300 words text, but for the most competitive keywords that have the potential to bring a greater number of visits, it will be nearly impossible.

Thus, it is recommended to write posts with more than 300 words. It's not hard when you really understand the subject you're talking about.

Conclusion

As you can see, with some simple SEO techniques you can improve traffic coming to your blog from search engines. I hope you enjoyed these 5 easy ways to improve the SEO of a blog.

If you have any questions, leave a comment below.