SoF: 5 steps to make a Blogger template by yourself

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

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.

SoF

5 steps to make a Blogger template by yourself

0 comments:

Post a Comment

Admin

Search Blog

Blog Archive

Recent Posts

Recent Comments

Labels

Followers

Links

Blogging Tips

Blog themes/templates/skins

Visitors

License