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-
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
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
2. To change font size, font color and font type.
In the HTML search box, search for-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.
Posts
No comments:
Post a Comment