How Change Background And Text Color Of Blogger

How to Change Background And Text Color Of Blogger template as is very easy task which can be done without any problem.If you still think you really doesn't know anything about codes and to do it is really a big problem then don't miss even a single post from this blogger design series.If you want from start just start reading my all posts on design from beginning which explain all codes to blogger used in its design on how to make your own blogger template.

Today i will be going to explain on the next part of codes coming in blogger template. and codes define the body section of your template.Below are the codes.

Click the image To View Large

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

The body element defines the document's body.The body element contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc and after defining all these the tag is closed at end.

So we start with writing body {
this symbol means we have started defining css for body and will close it when it will be complete with opposite symbol } and this tells the css for body has been defined.

Now in body css comes the next line background:$bgcolor; this line defines the background color of your template. But the color defined here is $bgcolor. So which color it is.

As i have also told you before on how to change the colors for blogger template in the previous post.There $bgcolor would have been defined in variable definitions,that color would be your blogger template background color.If you want to change it you can change $bgcolor it from there.

And one more is to just write color code in place of $bgcolor that color will be used as we use this way to design new blogger template like this background:#000000;.

You can get all color codes from here.

You can also use any image for you blogger background just write the above line like this.

background:url(http://url_of_the_image);

Your image will be used in place of color.

Now comes margin:0;.Now what does this tag do.As its clear from its name it defines all the space around the elements for which it is being defined,like you added any header in your template and now you want little spacing to it from top,below,left or right.So you have to use this to get space for the element from any part around it.

In full it can be defined as

margin:5px 10px 5px 10px;

That tell the

margin-top
margin-right
margin-bottom
margin-left

all 4 things define these 4 margins above from all four sides.

Then comes color:$textcolor; as this too is same to define color of your text as you can change it in by replacing text color code with $textcolor or just change $textcolor from from visiting this post.


Now come these lines

font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;


telling font and size of text to be used,you can define it as you want.As font defined is georgia you can define any one you want like arial,times roman anything you want.

Now the size has been given small you can give it medium,normal or large.

you can also define size in specific measure like this.

font-size:12px;

now this line text-align: center;

This aligns the text to the centre you can make it to align left or right also by just changing center to left or right.

and after defining all these the css for body tag ends with this symbol }.

How Change Background And Text Color Of Blogger

How to Change Background And Text Color Of Blogger template as is very easy task which can be done without any problem.If you still think you really doesn't know anything about codes and to do it is really a big problem then don't miss even a single post from this blogger design series.If you want from start just start reading my all posts on design from beginning which explain all codes to blogger used in its design on how to make your own blogger template.

Today i will be going to explain on the next part of codes coming in blogger template. and codes define the body section of your template.Below are the codes.

Click the image To View Large

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

The body element defines the document's body.The body element contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc and after defining all these the tag is closed at end.

So we start with writing body {
this symbol means we have started defining css for body and will close it when it will be complete with opposite symbol } and this tells the css for body has been defined.

Now in body css comes the next line background:$bgcolor; this line defines the background color of your template. But the color defined here is $bgcolor. So which color it is.

As i have also told you before on how to change the colors for blogger template in the previous post.There $bgcolor would have been defined in variable definitions,that color would be your blogger template background color.If you want to change it you can change $bgcolor it from there.

And one more is to just write color code in place of $bgcolor that color will be used as we use this way to design new blogger template like this background:#000000;.

You can get all color codes from here.

You can also use any image for you blogger background just write the above line like this.

background:url(http://url_of_the_image);

Your image will be used in place of color.

Now comes margin:0;.Now what does this tag do.As its clear from its name it defines all the space around the elements for which it is being defined,like you added any header in your template and now you want little spacing to it from top,below,left or right.So you have to use this to get space for the element from any part around it.

In full it can be defined as

margin:5px 10px 5px 10px;

That tell the

margin-top
margin-right
margin-bottom
margin-left

all 4 things define these 4 margins above from all four sides.

Then comes color:$textcolor; as this too is same to define color of your text as you can change it in by replacing text color code with $textcolor or just change $textcolor from from visiting this post.


Now come these lines

font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;


telling font and size of text to be used,you can define it as you want.As font defined is georgia you can define any one you want like arial,times roman anything you want.

Now the size has been given small you can give it medium,normal or large.

you can also define size in specific measure like this.

font-size:12px;

now this line text-align: center;

This aligns the text to the centre you can make it to align left or right also by just changing center to left or right.

and after defining all these the css for body tag ends with this symbol }.

How Change Background And Text Color Of Blogger

How to Change Background And Text Color Of Blogger template as is very easy task which can be done without any problem.If you still think you really doesn't know anything about codes and to do it is really a big problem then don't miss even a single post from this blogger design series.If you want from start just start reading my all posts on design from beginning which explain all codes to blogger used in its design on how to make your own blogger template.

Today i will be going to explain on the next part of codes coming in blogger template. and codes define the body section of your template.Below are the codes.

Click the image To View Large

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

The body element defines the document's body.The body element contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc and after defining all these the tag is closed at end.

So we start with writing body {
this symbol means we have started defining css for body and will close it when it will be complete with opposite symbol } and this tells the css for body has been defined.

Now in body css comes the next line background:$bgcolor; this line defines the background color of your template. But the color defined here is $bgcolor. So which color it is.

As i have also told you before on how to change the colors for blogger template in the previous post.There $bgcolor would have been defined in variable definitions,that color would be your blogger template background color.If you want to change it you can change $bgcolor it from there.

And one more is to just write color code in place of $bgcolor that color will be used as we use this way to design new blogger template like this background:#000000;.

You can get all color codes from here.

You can also use any image for you blogger background just write the above line like this.

background:url(http://url_of_the_image);

Your image will be used in place of color.

Now comes margin:0;.Now what does this tag do.As its clear from its name it defines all the space around the elements for which it is being defined,like you added any header in your template and now you want little spacing to it from top,below,left or right.So you have to use this to get space for the element from any part around it.

In full it can be defined as

margin:5px 10px 5px 10px;

That tell the

margin-top
margin-right
margin-bottom
margin-left

all 4 things define these 4 margins above from all four sides.

Then comes color:$textcolor; as this too is same to define color of your text as you can change it in by replacing text color code with $textcolor or just change $textcolor from from visiting this post.


Now come these lines

font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;


telling font and size of text to be used,you can define it as you want.As font defined is georgia you can define any one you want like arial,times roman anything you want.

Now the size has been given small you can give it medium,normal or large.

you can also define size in specific measure like this.

font-size:12px;

now this line text-align: center;

This aligns the text to the centre you can make it to align left or right also by just changing center to left or right.

and after defining all these the css for body tag ends with this symbol }.

How Change Fonts And Colors Of Blogger Templates

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.

How Change Fonts And Colors Of Blogger Templates

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.

How Change Fonts And Colors Of Blogger Templates

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.

How To Change Title Tags For Blogger

How to change title tags for blogger,my third post to blogger template design series.Title tags for blogger play most vital role in search engine optimization.Today i will hold the tutorial on title tags and various ways on how to add these tags and what effect it makes to seo with various demos and pictures to make it all clear.

Let me first tell you, this post is the part of my blogger design tutorial series i have started.Below are the first two posts of my blogger design series.
1)Xml Declaration Codes For Bloggers
2)Meta Tags For Blogger.

The next part of codes to be explained are:-

Click the image to View Large

<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name: Minima
Designer: Douglas Bowman
URL: www.stopdesign.com
Date: 26 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */

Now just the red line above in code is for title tags for blogger.Second word in green define as an start of css part.

Then are some credits given to the template designer,design date,his blog url by google.If you design one and distribute the template you can write here yours.

Now the main tutorial to learn is about the red line that is used to show all title for blogger and its posts.

Now if you will keep this line as it is in your blogger template

<title><data:blog.pageTitle/></title>

Click the image to View Large

Then lets see how your title will be shown for your blogger posts if you use the above line as it is in your blogger template.

Where Funny pictures in above picture is title for blogger which will always remain before the title of blogger post pages,as a result your important keywords of post pages are left behind in search engines as will definately harm you in case of long title of blogger i.e more than two words.

Now you need to have the solution for this problem,you have to have title of blogger post pages coming before than blogger title.

If you want to show up the title of blogger post pages first and then the blogger title like this in picture below:-

Just install this hack from here and your blogger post title will always appear first than blogger title in search engines.

On more Hack is there,to use just blogger title at blogger home page and post title at post pages like in picture as below:-

Now if you want this type of hack get it from here,post title only in blogger posts pages.

Now one more thing i would like to tell you that many bloggers add by mistake or according to there wish the title line like below

<title>Funny Pictures Blog</title>

in there blogger template code after the <head> tag.

We use this type of title declaration in website pages,as to give each web page the title according to our wish and need.

As blogger codes will also accept this title tag but the result after using this will lead to same title in blogger home page and all blogger post pages.As i have given Funny Pictures Blog as my title,so my title for my blog and all post pages will always remain (Funny Pictures Blog) as i used in above example.

If you are using this type of tag you will not be able to implement the two hacks for change of title tags above i told you.

I think,have provided sufficient information on title tags for blogger yu need to know. If you have any further questions to be asked leave your comments below.

How To Change Title Tags For Blogger

How to change title tags for blogger,my third post to blogger template design series.Title tags for blogger play most vital role in search engine optimization.Today i will hold the tutorial on title tags and various ways on how to add these tags and what effect it makes to seo with various demos and pictures to make it all clear.

Let me first tell you, this post is the part of my blogger design tutorial series i have started.Below are the first two posts of my blogger design series.
1)Xml Declaration Codes For Bloggers
2)Meta Tags For Blogger.

The next part of codes to be explained are:-

Click the image to View Large

<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name: Minima
Designer: Douglas Bowman
URL: www.stopdesign.com
Date: 26 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */

Now just the red line above in code is for title tags for blogger.Second word in green define as an start of css part.

Then are some credits given to the template designer,design date,his blog url by google.If you design one and distribute the template you can write here yours.

Now the main tutorial to learn is about the red line that is used to show all title for blogger and its posts.

Now if you will keep this line as it is in your blogger template

<title><data:blog.pageTitle/></title>

Click the image to View Large

Then lets see how your title will be shown for your blogger posts if you use the above line as it is in your blogger template.

Where Funny pictures in above picture is title for blogger which will always remain before the title of blogger post pages,as a result your important keywords of post pages are left behind in search engines as will definately harm you in case of long title of blogger i.e more than two words.

Now you need to have the solution for this problem,you have to have title of blogger post pages coming before than blogger title.

If you want to show up the title of blogger post pages first and then the blogger title like this in picture below:-

Just install this hack from here and your blogger post title will always appear first than blogger title in search engines.

On more Hack is there,to use just blogger title at blogger home page and post title at post pages like in picture as below:-

Now if you want this type of hack get it from here,post title only in blogger posts pages.

Now one more thing i would like to tell you that many bloggers add by mistake or according to there wish the title line like below

<title>Funny Pictures Blog</title>

in there blogger template code after the <head> tag.

We use this type of title declaration in website pages,as to give each web page the title according to our wish and need.

As blogger codes will also accept this title tag but the result after using this will lead to same title in blogger home page and all blogger post pages.As i have given Funny Pictures Blog as my title,so my title for my blog and all post pages will always remain (Funny Pictures Blog) as i used in above example.

If you are using this type of tag you will not be able to implement the two hacks for change of title tags above i told you.

I think,have provided sufficient information on title tags for blogger yu need to know. If you have any further questions to be asked leave your comments below.

How To Change Title Tags For Blogger

How to change title tags for blogger,my third post to blogger template design series.Title tags for blogger play most vital role in search engine optimization.Today i will hold the tutorial on title tags and various ways on how to add these tags and what effect it makes to seo with various demos and pictures to make it all clear.

Let me first tell you, this post is the part of my blogger design tutorial series i have started.Below are the first two posts of my blogger design series.
1)Xml Declaration Codes For Bloggers
2)Meta Tags For Blogger.

The next part of codes to be explained are:-

Click the image to View Large

<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name: Minima
Designer: Douglas Bowman
URL: www.stopdesign.com
Date: 26 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */

Now just the red line above in code is for title tags for blogger.Second word in green define as an start of css part.

Then are some credits given to the template designer,design date,his blog url by google.If you design one and distribute the template you can write here yours.

Now the main tutorial to learn is about the red line that is used to show all title for blogger and its posts.

Now if you will keep this line as it is in your blogger template

<title><data:blog.pageTitle/></title>

Click the image to View Large

Then lets see how your title will be shown for your blogger posts if you use the above line as it is in your blogger template.

Where Funny pictures in above picture is title for blogger which will always remain before the title of blogger post pages,as a result your important keywords of post pages are left behind in search engines as will definately harm you in case of long title of blogger i.e more than two words.

Now you need to have the solution for this problem,you have to have title of blogger post pages coming before than blogger title.

If you want to show up the title of blogger post pages first and then the blogger title like this in picture below:-

Just install this hack from here and your blogger post title will always appear first than blogger title in search engines.

On more Hack is there,to use just blogger title at blogger home page and post title at post pages like in picture as below:-

Now if you want this type of hack get it from here,post title only in blogger posts pages.

Now one more thing i would like to tell you that many bloggers add by mistake or according to there wish the title line like below

<title>Funny Pictures Blog</title>

in there blogger template code after the <head> tag.

We use this type of title declaration in website pages,as to give each web page the title according to our wish and need.

As blogger codes will also accept this title tag but the result after using this will lead to same title in blogger home page and all blogger post pages.As i have given Funny Pictures Blog as my title,so my title for my blog and all post pages will always remain (Funny Pictures Blog) as i used in above example.

If you are using this type of tag you will not be able to implement the two hacks for change of title tags above i told you.

I think,have provided sufficient information on title tags for blogger yu need to know. If you have any further questions to be asked leave your comments below.

How To Add Meta Tags To Blogger Blog

How to Add Meta Tags To Blogger,as this is second post of my blogger design series.As you would be knowing what importance is of adding meta tags to blogger if not,you should know.Meta tags tell bots about your keywords and tags you use so as to your blog get emphasized on those keywords which will help you to get better results in engines for those keywords.

To get learn from beggining from xml codes you can check my first post here on blogger design series i.e xml codes declaration.

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.And now check for below two lines in codes.

<head>
<b:include data='blog' name='all-head-content'/>

Now i will tell you something about head tag and how to add meta tags.

The head element is a container for all the head elements. Elements inside <head> can include scripts, instruct the browser where to find style sheets, provide meta information, and more.

The following tags can be added to the head section: <base>, <link>, <meta>, <script>, <style>, and <title>.

The <title> tag defines the title of the document, and is the only must required element in the head section!

<b:include data='blog' name='all-head-content'/>

is a blogger specific directive. When blogger reads your template and parses through it, it does so from the top down. When Blogger hits this particular line, Blogger then realizes that it needs to 'inject' some HTML to replace this line.


Now below are the meta tags which you have to add after above two lines.

<meta name="keywords" content="Blog, Blogger, Google Blogger, Template, Blogger template, tutorial, hacks, blogger tutorial, tips, tricks, blogger tips, blogger tricks, blogger tips and tricks" />
<meta name="description" content="widgets, hacks, help, tips and tricks for bloggers using the Google Blogger platform for their blogs. Some posts also relevant for those using other blogging platform" />
<meta name="author" content="Anshul Dudeja" />
<meta name="ROBOTS" content="ALL" />

In red are the keywords and description for my blog,please change it with yours.Then third line in green is used to tell uthor name as is not necessary and the last one is used to tell all the search engine robots to follow the all content of this blog i.e to index all posts or giving permisssion to all type of robots to index in there engines.

And also check the image below on how exactly to add the meta tags if any problem.

Click the image to view the large

I am sure you will now be able to add meta tags succesfully.

And dont forget to check my next post on blogger design series which will be on title for your blogger as is very important and then we will proceed towards the css part thats the design of blogger.

How To Add Meta Tags To Blogger Blog

How to Add Meta Tags To Blogger,as this is second post of my blogger design series.As you would be knowing what importance is of adding meta tags to blogger if not,you should know.Meta tags tell bots about your keywords and tags you use so as to your blog get emphasized on those keywords which will help you to get better results in engines for those keywords.

To get learn from beggining from xml codes you can check my first post here on blogger design series i.e xml codes declaration.

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.And now check for below two lines in codes.

<head>
<b:include data='blog' name='all-head-content'/>

Now i will tell you something about head tag and how to add meta tags.

The head element is a container for all the head elements. Elements inside <head> can include scripts, instruct the browser where to find style sheets, provide meta information, and more.

The following tags can be added to the head section: <base>, <link>, <meta>, <script>, <style>, and <title>.

The <title> tag defines the title of the document, and is the only must required element in the head section!

<b:include data='blog' name='all-head-content'/>

is a blogger specific directive. When blogger reads your template and parses through it, it does so from the top down. When Blogger hits this particular line, Blogger then realizes that it needs to 'inject' some HTML to replace this line.


Now below are the meta tags which you have to add after above two lines.

<meta name="keywords" content="Blog, Blogger, Google Blogger, Template, Blogger template, tutorial, hacks, blogger tutorial, tips, tricks, blogger tips, blogger tricks, blogger tips and tricks" />
<meta name="description" content="widgets, hacks, help, tips and tricks for bloggers using the Google Blogger platform for their blogs. Some posts also relevant for those using other blogging platform" />
<meta name="author" content="Anshul Dudeja" />
<meta name="ROBOTS" content="ALL" />

In red are the keywords and description for my blog,please change it with yours.Then third line in green is used to tell uthor name as is not necessary and the last one is used to tell all the search engine robots to follow the all content of this blog i.e to index all posts or giving permisssion to all type of robots to index in there engines.

And also check the image below on how exactly to add the meta tags if any problem.

Click the image to view the large

I am sure you will now be able to add meta tags succesfully.

And dont forget to check my next post on blogger design series which will be on title for your blogger as is very important and then we will proceed towards the css part thats the design of blogger.

How To Add Meta Tags To Blogger Blog

How to Add Meta Tags To Blogger,as this is second post of my blogger design series.As you would be knowing what importance is of adding meta tags to blogger if not,you should know.Meta tags tell bots about your keywords and tags you use so as to your blog get emphasized on those keywords which will help you to get better results in engines for those keywords.

To get learn from beggining from xml codes you can check my first post here on blogger design series i.e xml codes declaration.

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.And now check for below two lines in codes.

<head>
<b:include data='blog' name='all-head-content'/>

Now i will tell you something about head tag and how to add meta tags.

The head element is a container for all the head elements. Elements inside <head> can include scripts, instruct the browser where to find style sheets, provide meta information, and more.

The following tags can be added to the head section: <base>, <link>, <meta>, <script>, <style>, and <title>.

The <title> tag defines the title of the document, and is the only must required element in the head section!

<b:include data='blog' name='all-head-content'/>

is a blogger specific directive. When blogger reads your template and parses through it, it does so from the top down. When Blogger hits this particular line, Blogger then realizes that it needs to 'inject' some HTML to replace this line.


Now below are the meta tags which you have to add after above two lines.

<meta name="keywords" content="Blog, Blogger, Google Blogger, Template, Blogger template, tutorial, hacks, blogger tutorial, tips, tricks, blogger tips, blogger tricks, blogger tips and tricks" />
<meta name="description" content="widgets, hacks, help, tips and tricks for bloggers using the Google Blogger platform for their blogs. Some posts also relevant for those using other blogging platform" />
<meta name="author" content="Anshul Dudeja" />
<meta name="ROBOTS" content="ALL" />

In red are the keywords and description for my blog,please change it with yours.Then third line in green is used to tell uthor name as is not necessary and the last one is used to tell all the search engine robots to follow the all content of this blog i.e to index all posts or giving permisssion to all type of robots to index in there engines.

And also check the image below on how exactly to add the meta tags if any problem.

Click the image to view the large

I am sure you will now be able to add meta tags succesfully.

And dont forget to check my next post on blogger design series which will be on title for your blogger as is very important and then we will proceed towards the css part thats the design of blogger.

Xml Declaration Codes For Bloggers

So now today we will start from the the first line of the codes so that not only you could design a template but know the exact meaning of each and every line in blogger template and learn xml.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 and Check mark Expand Widgets To Expand.

Now lets start from the first line of codes.Below are the first 5-6 lines at the start of the template codes,which you will find same in all the blogger template codes.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

Click the image to View Large

Now i will explain these as what they mean and for what are they used.

That is the mandatory beginning for XML,documents may, and should, begin with an XML declaration which specifies the version of XML being used.

1)First Line in red is part of specifying what version of what mark-up language you have used.

2)Second Line in green is used to declare the Document Type Definition (DTD) which consists of a list of syntax definitions for each element in your XML document.

DTD means creating the syntax rules for any XML document that uses the DTD. You are specifying which element names can be included in the document, the attributes that each element can have, whether or not these are required or optional, and more.The DTD can either be internal (written into the same document that it's being used in), or external (located in another document).As this lines are same in all blogger templates so i think no need to go for further discussion.

The exact function of it if you wanna know is below as i got it while reading one Web Master forum.

Means that web browsers don't have to guess, and go into strict mode where they expect you to know what you are doing and render the page as specified by the W3C standards.
Withour DOCTYPEs modern browser go into 'quirks mode' which means they gloss over all your mistakes like if you forget to close some tags and stuff, but can't render exactly as you intended because they have to assume you don't know what you're doing and therefore the information you give it (via mark-up) may be incomplete.

As this is the fixed part of beggining in bloggers and not to much worry about.So just wait out for my second tutorial on design series.

Xml Declaration Codes For Bloggers

So now today we will start from the the first line of the codes so that not only you could design a template but know the exact meaning of each and every line in blogger template and learn xml.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 and Check mark Expand Widgets To Expand.

Now lets start from the first line of codes.Below are the first 5-6 lines at the start of the template codes,which you will find same in all the blogger template codes.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

Click the image to View Large

Now i will explain these as what they mean and for what are they used.

That is the mandatory beginning for XML,documents may, and should, begin with an XML declaration which specifies the version of XML being used.

1)First Line in red is part of specifying what version of what mark-up language you have used.

2)Second Line in green is used to declare the Document Type Definition (DTD) which consists of a list of syntax definitions for each element in your XML document.

DTD means creating the syntax rules for any XML document that uses the DTD. You are specifying which element names can be included in the document, the attributes that each element can have, whether or not these are required or optional, and more.The DTD can either be internal (written into the same document that it's being used in), or external (located in another document).As this lines are same in all blogger templates so i think no need to go for further discussion.

The exact function of it if you wanna know is below as i got it while reading one Web Master forum.

Means that web browsers don't have to guess, and go into strict mode where they expect you to know what you are doing and render the page as specified by the W3C standards.
Withour DOCTYPEs modern browser go into 'quirks mode' which means they gloss over all your mistakes like if you forget to close some tags and stuff, but can't render exactly as you intended because they have to assume you don't know what you're doing and therefore the information you give it (via mark-up) may be incomplete.

As this is the fixed part of beggining in bloggers and not to much worry about.So just wait out for my second tutorial on design series.

Xml Declaration Codes For Bloggers

So now today we will start from the the first line of the codes so that not only you could design a template but know the exact meaning of each and every line in blogger template and learn xml.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 and Check mark Expand Widgets To Expand.

Now lets start from the first line of codes.Below are the first 5-6 lines at the start of the template codes,which you will find same in all the blogger template codes.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

Click the image to View Large

Now i will explain these as what they mean and for what are they used.

That is the mandatory beginning for XML,documents may, and should, begin with an XML declaration which specifies the version of XML being used.

1)First Line in red is part of specifying what version of what mark-up language you have used.

2)Second Line in green is used to declare the Document Type Definition (DTD) which consists of a list of syntax definitions for each element in your XML document.

DTD means creating the syntax rules for any XML document that uses the DTD. You are specifying which element names can be included in the document, the attributes that each element can have, whether or not these are required or optional, and more.The DTD can either be internal (written into the same document that it's being used in), or external (located in another document).As this lines are same in all blogger templates so i think no need to go for further discussion.

The exact function of it if you wanna know is below as i got it while reading one Web Master forum.

Means that web browsers don't have to guess, and go into strict mode where they expect you to know what you are doing and render the page as specified by the W3C standards.
Withour DOCTYPEs modern browser go into 'quirks mode' which means they gloss over all your mistakes like if you forget to close some tags and stuff, but can't render exactly as you intended because they have to assume you don't know what you're doing and therefore the information you give it (via mark-up) may be incomplete.

As this is the fixed part of beggining in bloggers and not to much worry about.So just wait out for my second tutorial on design series.

Blogger Design Tutorials Series

Hi friends how are you,hope everything will be fine.Yesterday i was thinking how to help my blogger readers and other bloggers more to help in making there blog more beautiful and design it according to there own wishes as they want so as they can install any widget and hack at any place in there blog they want.

So i am planning to start a blogger design series on how to design a blogger template from scratch.So for this i would consider one default template of google for taking all my tutorials and that will be minima template,the first blogger template in list.

I will take all codes from this template and start explaining it from 1st line on how to modify it and what it means,so that you can alter it any time according to your wants.

And this will be done in a series of tutorials and will keep posting these tutorials with the time i get to post.I hope you all will love this design tutorial series.

Please leave your feedback on this below with your comments and all will be appreciated.If you have any other suggestions on this series please leave your comments we will discuss over it.

Blogger Design Tutorials Series

Hi friends how are you,hope everything will be fine.Yesterday i was thinking how to help my blogger readers and other bloggers more to help in making there blog more beautiful and design it according to there own wishes as they want so as they can install any widget and hack at any place in there blog they want.

So i am planning to start a blogger design series on how to design a blogger template from scratch.So for this i would consider one default template of google for taking all my tutorials and that will be minima template,the first blogger template in list.

I will take all codes from this template and start explaining it from 1st line on how to modify it and what it means,so that you can alter it any time according to your wants.

And this will be done in a series of tutorials and will keep posting these tutorials with the time i get to post.I hope you all will love this design tutorial series.

Please leave your feedback on this below with your comments and all will be appreciated.If you have any other suggestions on this series please leave your comments we will discuss over it.

Blogger Design Tutorials Series

Hi friends how are you,hope everything will be fine.Yesterday i was thinking how to help my blogger readers and other bloggers more to help in making there blog more beautiful and design it according to there own wishes as they want so as they can install any widget and hack at any place in there blog they want.

So i am planning to start a blogger design series on how to design a blogger template from scratch.So for this i would consider one default template of google for taking all my tutorials and that will be minima template,the first blogger template in list.

I will take all codes from this template and start explaining it from 1st line on how to modify it and what it means,so that you can alter it any time according to your wants.

And this will be done in a series of tutorials and will keep posting these tutorials with the time i get to post.I hope you all will love this design tutorial series.

Please leave your feedback on this below with your comments and all will be appreciated.If you have any other suggestions on this series please leave your comments we will discuss over it.