Parts of the Template. ~ The Blog Doctor.
Loading...

Parts of the Template.

New Visitor? Like what you read? Then please subscribe to my Blog Feed or sign up for Free Email Updates. Thanks for Visiting!

The Beta Blogger Template consists of FIVE main parts..............


NOTE that this is the new beta template and you do not get it automatically on migrating to beta.

BACK UP TEMPLATE using Download Full Template link in Edit Html subtab of Template tab.
After migrating go to Template---->Customize and there you will find a link to upgrade to the new template. Without this template you will not get all the new features of beta blogger like Layouts etc.


The FIRST PART of the template consists of the XML language declarations :


<?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 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'>



The first line is the XML declaration identifying the document as a XML document. The second line is the HTML declaration. The third line is the XHTML declaration which is the XML version of HTML.


The SECOND PART consists of the first part of the 'head', the title and the Metatags :

<head>
<title><data:blog.pageTitle/></title>
<b:include data='blog' name='all-head-content'/>
<META content='6UdGiVvyAoLArGpux3xzus9nP4VEkAdsnY8mgwQKg4g=' name='verify-v1'/>
<meta content='Bet Blogger for Dummies' name='Description'/>
<meta content='beta blogger,blogger,blog,hacks,hacking beta blogger template,template,beta blogger template, blogskin,Google blog, google blogger' name='keywords'/>
<meta content='index,follow' name='robots'/>

The Metatags inform the search engines of the subject of your blog and are necessary for indexing your site. For more information on Metatags go here.






The THIRD PART of the beta blogger template is where the 'Variable Definitions' are declared and is responsible for the 'Fonts and Colors' subtab under the Template tab :













This is the code :


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

/* 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="#0000ff">
............


Here CDATA section starts and it is used to insert an XML document within another XML document. CDATA sections start with <[CDATA] and end with ]]>. The XML processor ignores all markup except for ]]> (which means it is not possible to include a CDATA section in another CDATA section). Since there are XML-style declarations within the block. CDATA just tells XML not to parse the data within the block until it reaches the closing ]]>, when it resumes normal XML processing.

You can <![CDATA[]]> anywhere outside a tag in an XML document.


The FOURTH PART of the template is the CSS (Cascading Style Sheet) section :



/* Use this with templates/template-twocol.html */

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
a:link {
color:$linkcolor;
text-decoration:none;
}
a:visited {
color:$visitedlinkcolor;
text-decoration:none;
}
a:hover {
color:$titlecolor;
text-decoration:underline;
.............

/* Footer
----------------------------------------------- */
#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

/** Page structure tweaks for layout editor wireframe */
body#layout #header {
margin-left: 0px;
margin-right: 0px;
}
]]></b:skin>
</head>


Notice that CDATA section ends here with ]]>


The second, third and fourth parts of the template make up the 'head'.






The FIFTH PART of the template is the body :


<body>
<div id='outer-wrapper'><div id='wrap2'>

<!-- skip links for text browsers -->
<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>
<b:widget id='Header1' locked='false' title='Beta Blogger For Dummies (Header)' type='Header'/>
<b:widget id='HTML6' locked='true' title='' type='HTML'/>
</b:section>
</div>

<div id='content-wrapper'>
<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='HTML10' locked='false' title='CONTACT AUTHOR' type='HTML'/>
<b:widget id='LinkList1' locked='false' title='' type='LinkList'/>
<b:widget id='HTML4' locked='true' title='' type='HTML'/>
<b:widget id='HTML1' locked='true' title='' type='HTML'/>
<b:widget id='HTML9' locked='false' title='' type='HTML'/>
<b:widget id='HTML7' locked='false' title='' type='HTML'/>
<b:widget id='HTML8' locked='false' title='' type='HTML'/>
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
</b:section>
</div>

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='HTML2' locked='false' title='' type='HTML'/>
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>
<b:widget id='HTML3' locked='false' title='' type='HTML'/>
</b:section>
</div>

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML5' locked='true' title='' type='HTML'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='HTML11' locked='false' title='' type='HTML'/>
</b:section>
</div>

<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'> </div>

</div> <!-- end content-wrapper -->

<div id='footer-wrapper'>
<b:section class='footer' id='footer'>
<b:widget id='Text1' locked='false' title='' type='Text'/>
</b:section>
</div>

</div></div> <!-- end outer-wrapper -->

</body>
</html>




NOTE : SOME REPEATING ELEMENTS IN THE CODE HAVE NOT BEEN SHOWN ABOVE IN ORDER TO ACHIEVE BREVITY.

Technorati Tags:, , , ,

13 comments:

brandon said...

...hhhhelp meh....

I have an 'old style' blogger blog that I built with me own html/css. when I converted to blogger beta it appears that I don't have many of the options that I see here in your screenshots. I don't have the "page elements" thing or those color swatches. I'd like to access the page elements thing because I've established some labels but now I want to display the labels in a box in my sidebar, but after much digging I can find nothing that answers the question, "what the hell"?

I have only a little hair left to pull out. Couldja help me?

Anonymous said...

where does the feed 'information' go? I cant see anything resembling that in the example template.

Comedy + said...

I just found your site a bit ago and yesterday I removed the "no follow" from the backlinks and comments. A big thank you.

Here is my problem. I am in blogger and my readers can no long link to a particular post. So, this is not helping me with the link love I enjoy. Example: If someone clicks on my post title for the address for that post all you get is a blank page, my header and my two sidebars. The same happens when you click on the time or permanent link. Just a blank page. If you can help me with this you will be my hero forever.

I think my problem started when I allow two different folks to make changes in my HTML. Here is my link: Comedy Plus. Thanks in advance.

Sandee

vin said...

Brandon,

Have a look at :

Interchanging from Layout to Template

Anonymous,

The Feed information is within the posts widget. You will have to expand the widgets template to see the Feed links code.

Comedy Plus,

Try reloading the template.

Shane Belceto said...

Very informative and helpful ... Thank YOU!

Expect Miracles...
Shane

Sihui said...

I follow ur instruction carefully... but when i save Template it say there: Your template could not be parsed as it not well-formed. Please make sure all XML elements are closed properly.
XML error message: The markup in the document following the root element must be well-formed.

i donno what happen can you help me :(

Vin said...

Sihui,

Have a look at Error Messages in the New Blogger Templates.

If you are trying to load a Classic Template see How to Interchange between Layout and Classic Template.

Gabrielle said...

Hi. I have uploaded a 3 column thisaway rose template from a site. When I published my blog, the right wrapper which contains the archive, etc is placed below my post topics and I have been trying to figure out how to correct it and how to place it on the right side of my post. Could you help me what I should change in my html settings?

Thanks.

Gabrielle

Vin said...

Gabrielle,

Have a look at : Why my sidebar keeps falling down?

D/M C said...

Hi, Vin. I am trying to help a friend with her blog and am not doing such a good job at it. I'm trying to figure out why her blog list and archive list are so spread out. There's about 5 inches between each link in her link list and each post title in the archive list. Her blog is private, so you cannot go have a look for yourself. Is there a way I can send you the html for the section I'm having a problem with so you can look at it and see if anything is wrong? Thanks ever so much! -Marie

D/M C said...

Forgot to subscribe to follow-up comment emails. Doing it now. Thanks.

D/M C said...

BTW I figured it out SOMEHOW. I think it was luck. Thanks anyway!

Magick said...

I've been making a new blog & I've got most of it looking the way I want. But the gray shaded area is out of sync with the rest of my design.
I can't find that section anywhere since I'm not sure what it's called.

Could you look at my blog and give me a hand changing the gray area?

If I could make it a nice medium brown that would be great. Dark enough for the lighter text, but light enough to see the dark text.

If you can help me figure this out - you'll be the #1 awesome CSS person in my book! Thanks for any help you can offer.

Here's my blog: http://achocolatedream.blogspot.com/

CLICK TO LEAVE A COMMENT..... :-)



Skip to top of post.

Search Blog Before Commenting

Loading...

Post a Comment

Please use the above search box to search this blog before posting your valuable comments.

Comments posted on Dummies Guide to Google Blogger (Beta) are moderated and will be approved only if they are on-topic and not abusive. Try not to include website URLs/links in your comments. You can email me : drbhatns at gmail dot com for any blogging question. Thanks,

Vin.

The Blog Doctor The Blog Doctor2 Blog Doctor Home

SUGGESTED READING

Tips On Blogger and Latest News.



Skip to top of post.