Misse {Design} - Design, HTML & Blogger Tutorials: Basics of Blogger HTML

EDIT

I'm thinking of creating a summary of this post, trying to explain a little more in detail as I understand it is confusing. Have a look at part 2 editing css & adjusting blog design, once you've read that, this may make more sense. Let me know what you think and if you would like some more detail about something in particular.

It's been a while since my original Basics of HTML Creating a Static Page post. So today I'm going to update on the basics of HTML, but it's going to be based on Blogspot coding rather than normal static HTML. I've separated it into two posts explaining the layout markup, basics of coding and how to adjust the css the look of your blog.

* This is to help you understand how your blog works, how its laid out and how to adjust different parts to give your blog a new look. Please be careful & backup your blog before attempting to alter it in any way. I have lost count of the amount of people who have emailed me to fix something because they paid another blogger to design their blog who had no idea what they were doing. Please do not hire someone who isn't experienced or trained...that's all I'm going to say on that *

Bloggers HTML Layout - The Markup

Just a quick bit of background information. Blogging sites such as Blogspot, Joomla and Wordpress are coded (written) a little differently to normal static websites. A static website has to be re-written to be updated. We created a static website in the first Basics of HTML post. These blogging sites like Blogger, Wordpress are dynamic, they change. These sites use something called CMS (Content Management Systems) which is a software that allows the owner to update & maintain the content without needing to know the technical html things. They are coded so that things can be updated easily but it is always good to know how your blog is structured to better understand how it works.

Some Simply Rules

HTML Body: If you open a tag you must close the tag. Tags are within arrow brackets. < > is open, followed by a closing </ > tag. Example <body> ....load of code... </body>

Measured in: px = pixel (dot resolution of the screen) | pt = point | See conversion of px, pt, em & % here

Code written in: small letters

Layout for CSS: selector { property: value; } Example .post-title { font-color: red; }, h4 { text-align: right;} the sector is basically what HTML element you want to change (titles, headings, image, menu, background...), the property is the part you are changing (font, size, colour, border, alignment) and the value is the "answer", what you are changing it too.

How you blog works

Summary

<?xml version="1.0" encoding="UTF-8" ?><br />
<!DOCTYPE html ...>
<html ...>
<head>
<title><data:blog.pageTitle/></title> Title of Blog, appears in browser
<b:skin><![CDATA[/*

/* All the styling (CSS) goes in here. Discussed Section 1-10 */

]]></b:skin> Section 11
</head>
<body> Open Tag

<br />

</body> Close Tag
</html>

Section 1 - Content

/* Content
----------------------------------------------- */
body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
$(body.background.override)
}
html body $(page.width.selector) {
min-width: 0;
max-width: 100%;
width: $(page.width);
}
a:link { Colour of a link
text-decoration:none;
color: $(link.color);
}
a:visited { Colour of a link when clicked on
text-decoration:none;
color: $(link.visited.color);
}
a:hover { Colour of a link when mouse rolls over it
text-decoration:underline;
color: $(link.hover.color);
}
.body-fauxcolumn-outer .fauxcolumn-inner {
background: transparent $(body.background.gradient.tile) repeat scroll top left;
_background-image: none;
}
.body-fauxcolumn-outer .cap-top {
position: absolute;
z-index: 1;
height: 400px;
width: 100%;
background: $(body.background);
$(body.background.override)
}
.body-fauxcolumn-outer .cap-top .cap-left {
width: 100%;
background: transparent $(body.background.gradient.cap) repeat-x scroll top left;
_background-image: none;
}
.content-outer {
-moz-box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
-webkit-box-shadow: 0 0 $(content.shadow.spread.webkit) rgba(0, 0, 0, .15);
-goog-ms-box-shadow: 0 0 $(content.shadow.spread.ie) #333333;
box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
margin-bottom: 1px;
}
.content-inner {
padding: $(content.padding) $(content.padding.horizontal);
}
$(content.background.color.selector) {
background-color: $(content.background.color);
}

This part controls how your overall blog content looks. The background, font, colours, text and links. A lot of this will be written similarly in other sections. $(_____); relates to the Template Designer. You can change this styling here manually or by going to Template > Customise.

background: $(body.background); like above relates to the Template Designer. May also appear like background: #color; which can be changed using hex colours (#FFFFFF) or words without the # (white). I show how each are written below.

a:link { text-decoration:none; color: $(link.color);
} a:visited { text-decoration:none; color: #666666;
} a:hover { text-decoration:underline; color: purple;
}

Section 2 - Header

/* Header
----------------------------------------------- */
.header-outer { Entire Top Header section
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
_background-image: none;
}
.Header h1 { Header Title Text
font: $(header.font);
color: $(header.text.color);
text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);
}
.Header h1 a {
color: $(header.text.color);
}
.Header .description { Header Description
font-size: $(description.text.size);
color: $(description.text.color);
}
.header-inner .Header .titlewrapper {
padding: 22px $(header.padding);
}
.header-inner .Header .descriptionwrapper {
padding: 0 $(header.padding);
}

This section obviously contains the header. A lot of this doesn't need editing, as when you upload a header image to take the place of the text it eliminates most of this code. Find out how to centre the header in blogger here.

Section 3 - Tabs/ Menu

/* Tabs
----------------------------------------------- */
.tabs-inner .section:first-child {
border-top: $(header.bottom.border.size) solid $(tabs.border.color);
}
.tabs-inner .section:first-child ul {
margin-top: -$(header.border.size);
border-top: $(header.border.size) solid $(tabs.border.color);
border-left: $(header.border.horizontalsize) solid $(tabs.border.color);
border-right: $(header.border.horizontalsize) solid $(tabs.border.color);
}
.tabs-inner .widget ul {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none;
border-bottom: $(tabs.border.width) solid $(tabs.border.color);
   margin-top: $(tabs.margin.top);
margin-left: -$(tabs.margin.side);
margin-right: -$(tabs.margin.side);
}
.tabs-inner .widget li a { Colour of a link
  display: inline-block;
   padding: .6em 1em;
   font: $(tabs.font);
color: $(tabs.text.color);
   border-$startSide: $(tabs.border.width) solid $(content.background.color);
border-$endSide: $(tabs.bevel.border.width) solid $(tabs.border.color);
}
.tabs-inner .widget li:first-child a {
border-$startSide: none;
}
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
color: $(tabs.selected.text.color);
background-color: $(tabs.selected.background.color);
text-decoration: none;
}

This is the menu part of your blog, usually found beneath the header. Use this section to edit the links, colours, text font and border of your tabs menu. To center tabs have a look at this quick easy tutorial. I created two tutorials on alternative ways to have a menu - Horizontal Navigation with Images & Drop Down Navigation Menu. There are a few ways to change the border, which I'll go into more detail in in the next post but if you want to remove the border & shadow from your posts or the content of your blog visit this tutorial. If you want to remove the border or shadow from your images visit this tutorial.

Section 4 - Columns/ Sidebar

/* Columns
----------------------------------------------- */
.main-outer { Entire Blog Area incl. the post & sidebars
border-top: $(main.border.width) solid $(body.rule.color);
}
.fauxcolumn-left-outer .fauxcolumn-inner {
border-right: 1px solid $(body.rule.color);
}
.fauxcolumn-right-outer .fauxcolumn-inner {
border-left: 1px solid $(body.rule.color);
}

This section may be different depending on the layout of your blog. You don't have to worry too much about this area. .main-inner .column-right-outer or .main-inner .column-left-outer will control your sidebar area, these are found in section 7.

Section 5 - Headings

/* Headings
----------------------------------------------- */
h2 { H2 heading usually controls widget titles & sometimes the date
margin: 0 0 1em 0;
font: $(widget.title.font);
color: $(widget.title.text.color);
text-transform: uppercase;
}

Headings range from h1 (largest) to h6 (smallest). You can add headings here with different colours & sizes to use within your posts. Remember that some headings such as h3.post-title, .comments h4 will be defined in section 7. To use a heading in your post simply use the heading tag <h5> Enter Text Here </h5> the following appears like this on my blog

Enter Text Here

I did this by editing the h5 heading like so

h5 { background: #color;
border-radius: 0 20px 20px 0; Adding a rounded border, similarly to this tutorial for photos.
color: white;
font: small-caps 16px Calibri;
letter-spacing: 0.1em; Space between the letters
margin: 3px 0 4px;
padding: 3px; }

Section 7 - Posts

/* Posts
----------------------------------------------- */
.date-header span { Where you can edit the look of the date
background-color: $(date.header.background.color); Background of dats
color: $(date.header.color); Colour of date text
padding: $(date.header.padding);
letter-spacing: $(date.header.letterspacing);
margin: $(date.header.margin);
}
.main-inner { Space between posts/ sidebar/ around content/ etc.
padding-top: $(main.padding.top);
padding-bottom: $(main.padding.bottom);
}
.main-inner .column-center-inner {
padding: 0 $(main.padding);
}
.main-inner .column-center-inner .section {
margin: 0 $(main.section.margin);
}
.post {
margin: 0 0 $(post.margin.bottom) 0;
}
h3.post-title, .comments h4 { Post title & comment
font: $(post.title.font);
margin: .75em 0 0;
}
.post-body { Body of the post, what you write
font-size: 110%;
line-height: 1.4;
position: relative;
}
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img { Images within the post
padding: $(image.border.small.size);
   background: $(image.background.color);
border: 1px solid $(image.border.color);
   -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
}
.post-body img, .post-body .tr-caption-container {
padding: $(image.border.large.size);
}
.post-body .tr-caption-container {
color: $(image.text.color);
}
.post-body .tr-caption-container img {
padding: 0;
   background: transparent;
border: none;
   -moz-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
-webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
box-shadow: 0 0 0 rgba(0, 0, 0, .1);
}
.post-header {
margin: 0 0 1.5em;
   line-height: 1.6;
font-size: 90%;
}
.post-footer {
margin: 20px -2px 0;
padding: 5px 10px;
   color: $(post.footer.text.color);
background-color: $(post.footer.background.color);
border-bottom: 1px solid $(post.footer.border.color);
   line-height: 1.6;
font-size: 90%;
}
#comments .comment-author {
padding-top: 1.5em;
   border-top: 1px solid $(body.rule.color);
background-position: 0 1.5em;
}
#comments .comment-author:first-child {
padding-top: 0;
border-top: none;
}
.avatar-image-container {
margin: .2em 0 0;
}
#comments .avatar-image-container img {
border: 1px solid $(image.border.color);
}

Section 11

]]></b:skin>

<b:template-skin> Sizes of blog width & sidebar
<b:variable default='960px' name='content.width' type='length' value='1000px'/>
<b:variable default='0' name='main.column.left.width' type='length' value='0px'/>
<b:variable default='310px' name='main.column.right.width' type='length' value='300px'/>

Find out how to change the size of your blog here.

The following is all to do with sizing & space.

<![CDATA[
body {
min-width: $(content.width);
}

.content-outer, .content-fauxcolumn-outer, .region-inner {
min-width: $(content.width);
max-width: $(content.width);
_width: $(content.width);
}

.main-inner .columns {
padding-left: $(main.column.left.width);
padding-right: $(main.column.right.width);
}

.main-inner .fauxcolumn-center-outer {
left: $(main.column.left.width);
right: $(main.column.right.width);
/* IE6 does not respect left and right together */
_width: expression(this.parentNode.offsetWidth -
parseInt("$(main.column.left.width)") -
parseInt("$(main.column.right.width)") + 'px');
}

.main-inner .fauxcolumn-left-outer {
width: $(main.column.left.width);
}

.main-inner .fauxcolumn-right-outer {
width: $(main.column.right.width);
}

.main-inner .column-left-outer {
width: $(main.column.left.width);
right: 100%;
margin-left: -$(main.column.left.width);
}

.main-inner .column-right-outer {
width: $(main.column.right.width);
margin-right: -$(main.column.right.width);
}

#layout {
min-width: 0;
}

#layout .content-outer {
min-width: 0;
width: 800px;
}

#layout .region-inner {
min-width: 0;
width: auto;
}
]]>
</b:template-skin>

(Any script goes here)

</head>

Section 12

The body part of bloggers html contains the content layout for your blog. Be really careful if editing this section as one mistake may delete something needed for your blog to work. Each part of this section corresponds to a part above. Example

Header of a post in the HTML Body

<b:if cond='data:post.title'>
<h1 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h1>
</b:if>

CSS Styling

h3.post-title {
border-bottom: 1px dotted #D0B79D; font: 18px Arvo; letter-spacing: 0.05em; margin: 0;}

Padding Vs. Margins

Padding defines the space between the content & the border. Margin is the space between the border and the outer element. Once you begin to edit these more, you'll understand the difference better.

Next up: Adjusting the CSS

I hope that explained how you're blog is laid out and what a couple of things do. Coming up next will be the different CSS elements and how to adjust some things on your blog easily. Hopefully that was explained ok? If not, leave any questions or requests below. I'd suggest setting up a "play" blog and just messing around with altering different CSS styling one at a time to see what happens and to get a feel for it, much easier to learn when you're doing it bit by bit.

PART 2 Editing CSS & Adjusting Blog Design

Basics of Blogger HTML | Markup & Coding

Monday, January 7, 2013

EDIT

Bloggers HTML Layout - The Markup

Enter Text Here

Padding Vs. Margins

Next up: Adjusting the CSS

Followers

Blog Archive