How to change/adjust width, change font size, font color, font type in a custom blogger template.

If you have moved from default blogger templates to a custom blogger template. Then you will notice that, most of the custom templates cannot be edited with the customize option available.

In this article I am going to tell how to edit basic properties, which are- width of columns, increasing decreasing font size, changing font size ant type.

So first, log in to your blogger account and go to “template” option available in your blogger dashboard at the left side.

Select “edit HTML” and a new page will open which contains the HTML codes of your blog’s template.

1. To adjust the width of main post and sidebars. (columns)

Open the “Find box” in the HTML window (Not your browser’s find box) by pressing CTRL+F and search-

#main-wrapper {
 


You will find all the properties related to your sidebars and main columns.
Sidebar 1 is your main middle post column (in case of three column template); sidebar 2 is your left sidebar and the third is right sidebar. In case of two column template, sidebar 1 is your main column and the remaining is your sidebar. 

For the example we will take sidebar 1 (main post column) 

Understanding the codes.

1. float: right;

The flow of the text in a post is from left to right.

2. font-size: 13px;

The default font size of all the elements present in that column is 13 pixels.

3. margin-right: 6px;

Margin from right of the column (the main column In this case) is 6 pixels.

4. margin-top: 4px;

Margin from right of the column (the main column In this case) is 4 pixels.

5. padding: 10px;

space between post and other elements is 10 pixels. (the other elements could be comments, labels or date.)

6. width: 530px

The width of that column is 530px

To adjust the width of the column simply edits the “width” property with your desired size. You can also adjust the margins from right and top by editing the “margin-right” and margin-top” properties respectively.

2. To change font size, font color and font type.

In the HTML search box, search for-

.post {

You will find all the properties related to your text in your blog post.

Understanding the codes.

1. margin: 0.5em 0 10px;

Is to define the space between the blog post and other elements such sidebars

2. padding-bottom: 31px;

It defines the space between the blog post and the other elements such as comments date etc.

To change the font size add-

Font-size:(Your desired font size in pixels);

For example if you want text size to be 15 pixel, then add code-

Font-size:15px;

To change the text color in the post body add-

Color:(hex code of the color you want)

For example if you want grey color then add-

Color:#a3a3a3;

(You can find hex code for color you want from http://www.color-hex.com. OR if you found a color on web with different shade then you can download a sample on your PC and get the hex code for it by using this free software http://www.iconico.com/colorpic/)

To change the font type add-

Font-family:(“Font you want”) (inverted commas necessary)

For example if you want the style- Comic sans MS then put code-

Font-family:”Comic sans MS”;

Always use fonts which are available for most of the users in most of the devices.

Also add a backup font for the users which do not have the first specified font installed.
For example we want that text is available in “Arial” font for the users who do not have “Comic sans MS” then type code-

Font-family:”Comic sans MS”,Arial;


If you have any questions leave then in comments section below and also leave your feedback in the comment section. If you find this article helpful then please support by liking on Facebook, following the blog, sharing the article.

No comments:

Post a Comment

Please take a sec to share :-)

Related Posts Plugin for WordPress, Blogger...

About Me

Hello there, I am a student studying in class 12. Computers, technology, internet are my areas of interest. I have learned a lot about coding, designing, internet since I was in class 8 and still learning. Now I want to share my knowledge with everyone so they can also get benefit from that.