How To Change Fonts And Colors Of Blogger Templates you are using.This is my 5 th post in my blogger design tutorial series,if you haven't started reading this series then you are not late,as my most important posts will be getting starting from tomorrow which will cover all blogger css codes to give it different looks and how to modify it with there meanings explained.
My last posts on blogger design series are below,if you havent checked them check for sure.
1)Xml Declaration Codes For Bloggers
2)Meta Tags For Blogger.
3)Change Title Tags For Blogger.
Now i will continue on how to change the fonts and colors of your blogger template.
First i request you to please create a new demo blog with any name in your blogger account and choose a minima template (First template in Template Lists By Google) as its layout to learn the tutorials.
Then got To Its Layout > Edit Html
Now you will see codes like these in your html :-
Click the image to View Large
/* Variable definitions
====================
<Variable name="bgcolor" description="Page Background Color"
type="color" default="#fff" value="#ffffff">
<Variable name="textcolor" description="Text Color"
type="color" default="#333" value="#333333">
<Variable name="linkcolor" description="Link Color"
type="color" default="#58a" value="#5588aa">
<Variable name="pagetitlecolor" description="Blog Title Color"
type="color" default="#666" value="#666666">
<Variable name="descriptioncolor" description="Blog Description Color"
type="color" default="#999" value="#999999">
<Variable name="titlecolor" description="Post Title Color"
type="color" default="#c60" value="#cc6600">
<Variable name="bordercolor" description="Border Color"
type="color" default="#ccc" value="#cccccc">
<Variable name="sidebarcolor" description="Sidebar Title Color"
type="color" default="#999" value="#999999">
<Variable name="sidebartextcolor" description="Sidebar Text Color"
type="color" default="#666" value="#666666">
<Variable name="visitedlinkcolor" description="Visited Link Color"
type="color" default="#999" value="#999999">
<Variable name="bodyfont" description="Text Font"
type="font" default="normal normal 100% Georgia, Serif" value="normal normal 100% Georgia, Serif">
<Variable name="headerfont" description="Sidebar Title Font"
type="font"
default="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif">
<Variable name="pagetitlefont" description="Blog Title Font"
type="font"
default="normal normal 200% Georgia, Serif" value="normal normal 200% Georgia, Serif">
<Variable name="descriptionfont" description="Blog Description Font"
type="font"
default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">
<Variable name="postfooterfont" description="Post Footer Font"
type="font"
default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">
<Variable name="startSide" description="Side where text starts in blog language"
type="automatic" default="left" value="left">
<Variable name="endSide" description="Side where text ends in blog language"
type="automatic" default="right" value="right">
*/
Now in these codes all the colors of blogger like back ground color,title color,link color,text color,description color and many more mostly have been defined and most of the font types used in blogger too are defined.
Now actually this is the place to define the colors in blogger codes and has been made easy in to modify too by google,so google has defined mostly all colors used in blogger here,but nowadays we are using free professional blogger templates designed by various bloggers.So they usually define only some colors here according to there design and most are given while when they are writing codes for particular part like for header or sidebar,dont worry reading this just if you are regularly reading this series it will become all clear to you in end.
Now as i have shown you above codes,in them you can easily read and see the words like bgcolor,text color,link color defining background color of template,text color of template and link color of template.
Similarly all the below lines too,you can read and understand for which part it is defining the colors.If you wanna change any color from above what you have to do.Let me Explain,Just i am picking one line from above codes.
This is the line i took i.e 1st line from code:-
<Variable name="bgcolor" description="Page Background Color"
type="color" default="#fff" value="#ffffff">
Now above line tells the background color of your blogger template.
How to change it ?
Just you have to change the red code in above line with your color code you want,as #ffffff is for white and #000000 is for black.If you want more color codes just visit here.
Now this way you can make changes to all colors and fonts defined in above codes.
Now one more way to change them in very easy way provided by blogger platform which will work for sure if you are using blogger default template and if you are using other free template then it is not sure it will work or not for all colors as it depends on the way designer designed his codes.
Just Go To Layout > Fonts And Colors.
You will see the option like these in the image below:-
Click the image to view Large
At the left you have window to select for which you want to change color or font,just select from there and from right select the color you want,with all colors shown and then save your changes.In this way you can easily change the color you want for many things in blogger layout.This is very useful.
But if you are not using default google template then you have to study codes as i explained at the start of my post above and find the color where it is defined for any part which you want to change and make a color code change there manually and save the codes.
I hope now you will be able to easily edit color and font codes for your blogger template.For any questions just leave your comments below.Labels: Blogger Design Series
