5 steps to make a Blogger template by yourself
blogger template, tutorial, web design
Part 1 - Overview
Step 1: Think to have an idea and outline blog appearance on paper with a pencil
This is the 1st step that most designers should do. It is not an exception for advanced bloggers who want their blogs to be unique. One of factors to make his/her blog unique is appearance/theme/skin of the blog. So, use a pencil to outline what you think and want your blog to be on a paper.
Step 2: Use graphics design tools to make your draft as image
You must know some graphics design tools, for ex: Photoshop...
Find images and use graphics design tools to make overview of your blog as image.
Step 3: Use web design tools to make your blog as HTML web page
You must know some web design tools, for ex: Dreamweaver, Fontpage... and
HTML &
CSS.
Prepare the images (slice a big image into pieces if required...). Use HTML and CSS to position and connect all parts of a page. You can use available templates to modify.
FreeCSSTemplates has many templates ready for you.
Step 4: Make Blogger template
You must know
XML and structure of a Blogger template. You can use existing Blogger template to modify.
Step 5: Apply new Blogger template to your blog
Part 2 - Structure of a Blogger template
Blogger template is an
XML document. Root is <html> containing 2 parts:
- <head>: blog title & skin data (Variable definitions & CSS)
- <body>: blog content including blog header, blog posts, sidebar (contains widgets) and blog footer
* <b:skin>:
1. Variable definitions for using in CSS
<Variable name="
variable_name" description="..." type="colorfontautomatic" default="
default_value" value="...">
* Usage: $
variable_name2. CSS
* Global definitions: *, body, h1, h2, h3, h4, p, blockquote, code, hr, ol, ul, ul li, a, a:hover, a:visited, img...
* CSS layout for 2-column blog (blog posts on left, sidebar on right):
#outer-wrapper
|--
#header-wrapper
| |--#header-inner
|--
#content-wrapper
| |--
#main-wrapper
| | |--#main
| | | |--.post
| | | |--.post-title
| | | |--.post-body
| | | |--.post-footer
| | | |--.post-labels
| | | |--.timestamp-link
| | | |--.comment-link
| | | |--#comments
| | | | |--h4: num of Comments
| | | | |--#comments-block
| | | | | |--.comment-author
| | | | | |--.comment-body
| | | | | |--.comment-timestamp
| | | |--#blog-pager
| | | | |--#home-link
| | | | |--#blog-pager-older-link
| | | | |--#blog-pager-newer-link
| | | |--.feed-links
| |--
#sidebar-wrapper
| | |--#sidebar
| | | |--.widget
| | | | |--h2: widget title
| | | | |--.widget-content
|--
#footer-wrapper
| |--#footer
* <body> details may be customized as you like. The following structure is a basic structure of a Blogger template:
outer-wrapper
|-- wrap2
| |--
header-wrapper
| | |-- section id='header'
| | | |-- widget type='Header'
| | | | |-- includable id='main'
| | | | |-- header-inner
| |--
content-wrapper
| | |--
crosscol-wrapper
| | |--
main-wrapper
| | | |-- section id='main'
| | | | |-- widget type='Blog'
| | | | | |--
includable id='nextprev'
| | | | | | |-- blog-pager
| | | | | | | |-- blog-pager-newer-link
| | | | | | | |-- blog-pager-older-link
| | | | | | | |-- home-link
| | | | | |--
includable id='backlinks'
| | | | | |--
includable id='post'
| | | | | | |-- post hentry
| | | | | | | |-- <h3 class='post-title entry-title'></h3>
| | | | | | | |-- post-body entry-content
| | | | | | | |-- post-footer
| | | | | | | | |-- post-author vcard
| | | | | | | | |-- post-timestamp
| | | | | | | | | |-- timestamp-link
| | | | | | | | |-- post-comment-link
| | | | | | | | | |-- comment-link
| | | | | | | | |-- post-icons
| | | | | | | | |-- post-labels
| | | | | |--
includable id='commentDeleteIcon'
| | | | | |--
includable id='status-message'
| | | | | |--
includable id='feedLinks'
| | | | | |--
includable id='comment-form'
| | | | | |--
includable id='backlinkDeleteIcon'
| | | | | |--
includable id='feedLinksBody'
| | | | | |--
includable id='postQuickEdit'
| | | | | |--
includable id='comments'
| | | | | | |-- <h4>data:post.numComments</h4>
| | | | | | |-- paging-control-container
| | | | | | |-- comments-block
| | | | | | | |-- comment-author
| | | | | | | |-- comment-body
| | | | | | | |-- comment-footer
| | | | | | | | |-- comment-timestamp
| | | | | | |-- paging-control-container
| | | | | | |-- comment-footer
| | | | | | | |-- data:postCommentMsg
| | | | | | |-- backlinks-container
| | | | | |--
includable id='main'
| | |--
sidebar-wrapper
| | | |-- section id='sidebar': contains all widgets, each widget is in <b:widget> </b:widget> tag. Here are some typical widgets:
| | | | |--
widget type='BlogArchive'
| | | | | |--
includable id='main'
| | | | | | |-- <h2>widget title</h2>
| | | | | | |-- widget-content
| | | | |-- widget type='Label'
| | | | |-- widget type='HTML'
| | | | |-- widget type='LinkList'
| | | | |-- ...
| |--
footer-wrapper
| | |-- section id='footer'
| | |--
anything you want to display at the bottom of blog page
* b namespace:
<b:skin> to define template style, including variable definitions and CSS
<b:section> contains zero or many <b:widget>
<b:widget> contains one or many <b:includable>
<b:section>
| <b:widget>
| | <b:includable>...</b:includable>
| | |...
| | <b:includable>...</b:includable>
| </b:widget>
| ...
| <b:widget>
| | <b:includable>...</b:includable>
| | |...
| | <b:includable>...</b:includable>
| </b:widget>
</b:section>
* Conditional structure:
<b:if cond='...'>
do something if condition is true...
<b:else/>
do something if condition is false...
</b:if>
* Iteration structure:
<b:loop values='...' var='...'>
do something if condition is true...
</b:loop>
* data namespace:
- data:blog.pageTitle: blog name, blog title
- data:blog.homepageUrl: blog homepage Url
- data:blog.url
- data:description
- data:homeMsg
- data:newerPageUrl
- data:newerPageTitle
- data:widget.instanceId
- data:olderPageUrl
- data:olderPageTitle
- data:post.backlinksLabel
- data:post.numBacklinks
- data:post.backlinks
- data:backlink.url
- data:backlink.title
- data:backlink.snippet
- data:post.authorLabel
- data:backlink.author
- data:post.timestampLabel
- data:backlink.timestamp
- data:post.createLinkUrl
- data:post.createLinkLabel
- data:post.id
- data:post.title
- data:post.link
- data:post.url
- data:post.body
- data:top.showAuthor
- data:top.authorLabel
- data:post.author
- data:top.showTimestamp
- data:top.timestampLabel
- data:post.timestampISO8601
- data:post.timestamp
- data:blog.pageType
- data:post.allowComments
- data:post.addCommentUrl
- data:post.addCommentOnclick
- data:post.numComments
- data:top.commentLabel
- data:top.commentLabelPlural
- data:post.emailPostUrl
- data:top.emailPostMsg
- data:post.labels
- data:postLabelsLabel
- data:label.url
- data:label.name
- data:label.isLast
- data:comment.adminClass
- data:comment.deleteUrl
- data:top.deleteCommentMsg
- data:navMessage
- data:feedLinks
- data:posts
- data:post.feedLinks
- data:postCommentMsg
- data:blogCommentMessage
- data:post.commentFormIframeSrc
- data:backlink.adminClass
- data:backlink.deleteUrl
- data:top.deleteBacklinkMsg
- data:feedLinksMsg
- data:links
- data:f.url
- data:f.mimeType
- data:f.name
- data:f.feedType
- data:post.editUrl
- data:post.adminClass
- data:post.editUrl
- data:top.editPostMsg
- data:post.commentPagingRequired
- data:post.oldLinkClass
- data:post.oldestLinkUrl
- data:post.oldestLinkText
- data:post.olderLinkUrl
- data:post.olderLinkText
- data:post.newLinkClass
- data:post.newerLinkUrl
- data:post.newerLinkText
- data:post.newestLinkUrl
- data:post.newestLinkText
- data:post.comments
- data:comment.authorClass
- data:comment.anchorName
- data:comment.authorUrl
- data:comment.author
- data:commentPostedByMsg
- data:comment.isDeleted
- data:comment.body
- data:comment.url
- data:comment.timestamp
- data:post.embedCommentForm
- data:post.showBacklinks
- data:posts
- data:post.dateHeader
- data:post.includeAd
- data:adEnd
- data:adCode
- data:adStart
- data:top.showStars
- data:top.languageCode
- data:top.blogspotReviews
- data:title
- data:content
- data:link
- data:height
- data:sourceUrl
- data:caption
- data:style
- data:data
- data:i.url
- data:i.name
- data:i.post-count
- data:intervalData
- data:i.expclass
- data:i.data
- data:i.posts
- data:interval.toggleId
- data:interval.expclass
- data:widget.actionUrl
- data:interval.toggleId
- data:toggleopen
- data:blog.languageDirection
- data:labels
- data:label.name
- data:label.url
- data:label.count
- data:links
- data:link.target
- data:link.name
To use data within HTML tag, add prefix "
expr:" to HTML tag atttribute. For ex: <a
expr:href='data:blog.homepageUrl'
expr:title='data:blog.pageTitle'><data:blog.pageTitle/><a>
Part 3 - Using Blogger template
* Apply a blogger template:
- After making or downloading a blogger template as XML file, open the file and copy file content to clipboard.
- Go to Layout -> Edit HTML -> paste content to Edit Template text box.
- Click Preview to see the preview of new template, or click Save Template to apply new template, or click Clear Edits to reverse old template.
* Backup/Restore template:
- Go to Layout -> Edit HTML -> Backup/Restore Template -> click Download Full Template to backup your current template.
- Go to Layout -> Edit HTML -> Backup/Restore Template -> Browse template file and click Upload to restore a template.
Part 4 - Tips
* To
hide Blogger navigation bar, include this definition in CSS section:
#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}
* Use
Firebug (a plugin of Firefox) to explore the structure of any web page as well as blogger page and it will help you make CSS.
