Everyone knows there are tons of templates for different platforms like blogger, wordpress, joomla. Some like some templates but some doesn't.
In most of the cases you like the templates but you don't like some part of it. But as you couldn't edit the template to change the unwanted stuff you skip the template. Even this happened to me like 50 times. But I did a research on the internet to find out the layout in which blogger templates are published. And I found a great website which gave me an idea on the template layout for blogger.
But unfortunately I can't find that website again. So I have made some stuff myself to help newbie bloggers edit their templates. Hope this helps. Any queries, don't hesitate to click on the contact me tab up there.
You need to have a basic idea on the structure and syntax of HTML and CSS in order to edit templates.
Websites are basically a collection of html, css and javascript each stored in different files that are interlinked to each other. But in blogger, every necessary thing is stored in a single file with xml extension i.e template.xml.
This is very simple. All the HTML, CSS, JS code is written in that single xml file only. So you need to edit the template that you have downloaded from the internet. There is a basic format or layout or structure which every template(most of them) follow. If you know this simple format or structure then you can easily edit the templates and make it look as you like. The entire goal of this post is to give you an idea about how HTML, CSS, JS are organised in blogger templates. So here I start.
As you know everything is present in our brain only like controlling the functions, maintaining style etc. In the same way, every necessary stuff including the css and javascript are placed in HEAD tag only. One thing, there are somethings called VARIABLES in blogger templates. They say how to style the basic style in blogger like fonts, font colors and all that. You need not change anything in VARIABLES. If you want to change the font colors etc then you are free to change them.
This image to the right shows the basic layout of a blogger template.
So, VARIABLES, JS, CSS are placed inside head tag. Most of the work will be regarding placing of the elements i.e with the help of CSS. So editing CSS will be the very important part in editing the template.
Variables look some thing like this.
/* 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">
--------------------------------------------------
type="color" default="#666" value="#666666">
<Variable name="descriptioncolor" description="Blog Description Color"
*/
I need not tell you what javascript looks like. It has all this randomly thrown alphabets, symbols, numbers inside it. LOL Remember, Javascript is placed right next to Variables only. But we need not change anything in JS. It wont be of much help.
Let me show you how CSS in a blogger template looks like.
<style type='text/css'>
body{background: #222222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1vGl8lVgcQvHjAAZDXuNuphdVs1Q7MzyeRk0JYWQEg6Mc37-tuegwFAsYW5mbomnLhEu1bnjnpA-obYBWUzaVT5dOUMMdltTICyIOjupRSKLvQ3IxctB43tz7h05426axEWiqg62ezXqS/s1600/background.png) left top repeat-x;color:#ADADAD;font-family:Arial,Helvetica,Sans-serif;font-size:13px;margin:0px;padding:0px 0px 0px 0px;}
a:link,a:visited{color:#F2A30B;text-decoration:none;outline:none;}
a:hover{color:#CB6D01;text-decoration:none;outline:none;}
a img{border-width:0}
#body-wrapper{margin:0px 0px 0px 0px;padding:0;}
blockquote{overflow:hidden;padding-left:9px;font-style:italic;color:#666;border-left:3px solid #d9cbc3;}
------------------------------------------------
.menu-primary li li .sf-sub-indicator{padding:8px 13px 0 0}
n4/Y-QtdCp76qM/s1600/widget-list.png) left 12px no-repeat;border-bottom:1px dashed #747474;}
AAAAEq4/qpgAHAOe9x0/s1600/comment-avatar.jpg);width:32px;height:32px;float:right;margin:5px 10px 5px 5px;border:1px solid #ddd;position:absolute;top:5px;right:5px;}
.widget-wrap{list-style-type:none;list-style:none;margin:0 0 15px 0;padding:0}
h3.widgettitle{color:#EDECEC;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjd2sefhSU2pNULy65sc_ju-j3Fb3H_w4rWCUOJ_6K710utmzkTHHO4SHGfuRJl721lgILB-JmESVsELlPgZtWJ3gjARKK24oaQYJb8ofOdgY59KqsYRd2B25ogEEUV5BBIAf72hatcgkZ9/s1600/widget-title-bg.png) left top repeat-x;font:bold 14px/14px Arial,Helvetica,Sans-serif;margin:0 0 10px 0;padding:11px 0 11px 10px;text-transform:uppercase}
-----------------------------------------------------
24{width:938px!important}.last{margin-right:0;padding-right:0}
.last,div.last{margin-right:0}
</style>
Remaining everything like the original html i.e your templates content will be available in the <body></body> tag.
But each and every div or span tag will be associated with a style class. It is very difficult to find out the respective style class and edit for that div or span tag.
The best way to do this is by using F12 feature in Google Chrome. upload the template to your blog. Open your blog in Google Chrome and press f12. This is a graphical interactive representation of your blog's source. That means your blogs content i.e your templates content will be interactively displayed in Chrome if you press the F12 button. Below will be the source and above will the source's graphical result. You can select and scroll through all the content of your blog's template. The selected element in the page's source will be highlighted in the graphical view of the page.
So you can easily find out which style class is linked to which page element and you can easily change it in html editing software like Adobe Dreamweaver.
Thus you can happily edit the template and customize it to suit your style.
If you have any queries please feel free to hit the "Contact me" button in the top. I will respond to them ASAP.
I can edit your templates if you are facing any problems. Feel free to contact me.
WANT TO TRY OUT NEW OPERATING SYSTEMS BUT HAVE A SINGLE HARD-DISK ?? DONT WORRY
The Artifex.
In most of the cases you like the templates but you don't like some part of it. But as you couldn't edit the template to change the unwanted stuff you skip the template. Even this happened to me like 50 times. But I did a research on the internet to find out the layout in which blogger templates are published. And I found a great website which gave me an idea on the template layout for blogger.
But unfortunately I can't find that website again. So I have made some stuff myself to help newbie bloggers edit their templates. Hope this helps. Any queries, don't hesitate to click on the contact me tab up there.
You need to have a basic idea on the structure and syntax of HTML and CSS in order to edit templates.
Websites are basically a collection of html, css and javascript each stored in different files that are interlinked to each other. But in blogger, every necessary thing is stored in a single file with xml extension i.e template.xml.
This is very simple. All the HTML, CSS, JS code is written in that single xml file only. So you need to edit the template that you have downloaded from the internet. There is a basic format or layout or structure which every template(most of them) follow. If you know this simple format or structure then you can easily edit the templates and make it look as you like. The entire goal of this post is to give you an idea about how HTML, CSS, JS are organised in blogger templates. So here I start.
As you know everything is present in our brain only like controlling the functions, maintaining style etc. In the same way, every necessary stuff including the css and javascript are placed in HEAD tag only. One thing, there are somethings called VARIABLES in blogger templates. They say how to style the basic style in blogger like fonts, font colors and all that. You need not change anything in VARIABLES. If you want to change the font colors etc then you are free to change them.
So, VARIABLES, JS, CSS are placed inside head tag. Most of the work will be regarding placing of the elements i.e with the help of CSS. So editing CSS will be the very important part in editing the template.
Variables look some thing like this.
/* 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">
--------------------------------------------------
type="color" default="#666" value="#666666">
<Variable name="descriptioncolor" description="Blog Description Color"
*/
I need not tell you what javascript looks like. It has all this randomly thrown alphabets, symbols, numbers inside it. LOL Remember, Javascript is placed right next to Variables only. But we need not change anything in JS. It wont be of much help.
Let me show you how CSS in a blogger template looks like.
<style type='text/css'>
body{background: #222222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1vGl8lVgcQvHjAAZDXuNuphdVs1Q7MzyeRk0JYWQEg6Mc37-tuegwFAsYW5mbomnLhEu1bnjnpA-obYBWUzaVT5dOUMMdltTICyIOjupRSKLvQ3IxctB43tz7h05426axEWiqg62ezXqS/s1600/background.png) left top repeat-x;color:#ADADAD;font-family:Arial,Helvetica,Sans-serif;font-size:13px;margin:0px;padding:0px 0px 0px 0px;}
a:link,a:visited{color:#F2A30B;text-decoration:none;outline:none;}
a:hover{color:#CB6D01;text-decoration:none;outline:none;}
a img{border-width:0}
#body-wrapper{margin:0px 0px 0px 0px;padding:0;}
blockquote{overflow:hidden;padding-left:9px;font-style:italic;color:#666;border-left:3px solid #d9cbc3;}
------------------------------------------------
.menu-primary li li .sf-sub-indicator{padding:8px 13px 0 0}
n4/Y-QtdCp76qM/s1600/widget-list.png) left 12px no-repeat;border-bottom:1px dashed #747474;}
AAAAEq4/qpgAHAOe9x0/s1600/comment-avatar.jpg);width:32px;height:32px;float:right;margin:5px 10px 5px 5px;border:1px solid #ddd;position:absolute;top:5px;right:5px;}
.widget-wrap{list-style-type:none;list-style:none;margin:0 0 15px 0;padding:0}
h3.widgettitle{color:#EDECEC;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjd2sefhSU2pNULy65sc_ju-j3Fb3H_w4rWCUOJ_6K710utmzkTHHO4SHGfuRJl721lgILB-JmESVsELlPgZtWJ3gjARKK24oaQYJb8ofOdgY59KqsYRd2B25ogEEUV5BBIAf72hatcgkZ9/s1600/widget-title-bg.png) left top repeat-x;font:bold 14px/14px Arial,Helvetica,Sans-serif;margin:0 0 10px 0;padding:11px 0 11px 10px;text-transform:uppercase}
-----------------------------------------------------
24{width:938px!important}.last{margin-right:0;padding-right:0}
.last,div.last{margin-right:0}
</style>
Remaining everything like the original html i.e your templates content will be available in the <body></body> tag.
But each and every div or span tag will be associated with a style class. It is very difficult to find out the respective style class and edit for that div or span tag.
The best way to do this is by using F12 feature in Google Chrome. upload the template to your blog. Open your blog in Google Chrome and press f12. This is a graphical interactive representation of your blog's source. That means your blogs content i.e your templates content will be interactively displayed in Chrome if you press the F12 button. Below will be the source and above will the source's graphical result. You can select and scroll through all the content of your blog's template. The selected element in the page's source will be highlighted in the graphical view of the page.
So you can easily find out which style class is linked to which page element and you can easily change it in html editing software like Adobe Dreamweaver.
Thus you can happily edit the template and customize it to suit your style.
If you have any queries please feel free to hit the "Contact me" button in the top. I will respond to them ASAP.
I can edit your templates if you are facing any problems. Feel free to contact me.
WANT TO TRY OUT NEW OPERATING SYSTEMS BUT HAVE A SINGLE HARD-DISK ?? DONT WORRY
The Artifex.
