Blogger Basics : How To Change Background,Font Size And Font Family Of Your Blog ? - Helper Blogger

Blogger Widgets | Templates | Tutorials

Latest

Tuesday, 7 February 2012

Blogger Basics : How To Change Background,Font Size And Font Family Of Your Blog ?

On some users request I have started a series of Blogger Basics.In this tutorials I will post tutorials about blogger basics for new bloggers.These tutorials will surely helps the new bloggers to improve design of their blog.Today we will see How to change background and font size of blog.I have divided this post in two parts.


  1. How To Change Background ?
  2. How To Change Font-Size ?
  3. How To Change Font Family Of Your Blog ?


1.How To Change Background Of Your Blog ?

  • Go to Bogger Dashboard > Design > Edit HTML.
  • Now find for this tag
Main Code

body {
color: #000000;
background:#FFFFFF;
font-size:13px;
font-family:Verdana;
}

A.Use Hex Color As Background.

If you want to change background color then find this line background:#FFFFFF; and replace it with any hex color code as you wish you can use our Hex Color Code Generator.


B.Use Image As An Background.


If you want to use Image as an background the again find this in main code background:#FFFFFF; line in above code and replace it with below below.... 

background: url(YOUR  IMAGE URL);background-repeat: repeat;

  • Now replace YOUR IMAGE URL with your background image URL.
3.To Change Background Of Post


To change background of post fin this code
.post {
margin: 0;
background:#ccc;
}

Now again follow A and B steps...

How To Change Font Size Of Blog ?


Now find this code in Main Code and replace font-size:13px; and change it as you wish

Change Font Family Of Your Blog


If you wish too change font of your blog then find this line font-family:Verdana;  in main code and replace font name with any other font name as you wish.....

To Change Font Color ?


Find this line color: #000000; in main code to change color of font and replace it with any Hex color code you can use Our Hex Color Code Generator .

No comments:

Post a Comment

If you want to be informed about any replies then check "Notify me" option (present at lower right corner of comment box and it will display if you are logged in to your google account). PLEASE DO NOT SPAM