blogging 102 | Blogger/BlogSpot Themes

Reading time: 6 – 9 minutes

I am in no way an expert in Blogger or BlogSpot, but I am passing along to your a nice free article on how to write a theme there since I know some of you blog there.

How To Create A Blogger/Blogspot Theme by Brad

This tutorial will cover the steps needed to create your own blogger template. Many people have used blogger to run blogs and have wondered how they can make their own theme to use with it. There are a very few hard to find guides on how to do this, so I’ve decided to take up the task to help as many people as I can, create one. Incase you are skimming over the content, this article is teaching you “How to create a blogger / blogspot theme“

To create a blogger template, you will need a graphic editor (Such as Photoshop, GIMP, or even Paint will do) to create images for backgrounds, post headers, sidebars, etc.. We will get to that later. You will also need an idea or vision about what you want to create. Without that, you are just wasting your time and electricity. Lastly, you will need to know about C.S.S (Cascading.Style.Sheets) and how to operate them. If you do not know how to do that, you cannot apply interesting effects to your newly designed template (Such as: Positioning pictures or text, creating repeated backgrounds, moving around pictures and text and more). A great guide on how to get started with this is available here.

Once you have got everything you need, you should start the C.S.S Framework by putting properties such as

body[ background-color: #000000; margin: 0 auto; font-family: “Trebuchet MS”, Arial, Helvetica, sans-serif; font-size: 14px;}

#title [ font-size: 32px; color: #000011; }

so-on and so forth. A basic list of these tags that were taken from Blogger’s simple white theme are available here: (PDF File) XML Tags Blogger List Of CSS. An easier way to do this would be to find a theme that you like and copy and paste the C.S.S, editing it along the way so that time is saved. The only problem with doing that is that every theme is engineered differently so the tags will change.

After configuring your CSS Stylesheet, you must piece it together in HTML. This can be achieved using similar structures.

<div id=’main-wrapper’> <b:section class=’main’ id=’main’ showaddelement=’no’> <b:widget id=‘Blog1′ locked=‘true’ title=’Blog Posts’ type=Blog’/> </b:section> </div>

Do not forget to reference blogger templates that have already been created for the required widgets that you are supposed to put in certain spots. Without doing this, you could not complete making your own template.

Now comes the grueling part that you can either do yourself which could take hours to finish, or copy from another site and edit accordingly. Blogger is configured using widgets. All your posts are just one big widget hence the code up there. An Example of the code that you could type yourself or copy is:

<div class=’post-footer’>
<p class=’post-footer-line post-footer-line-1′><span class=’post-author’>
<b:if cond=’data:top.showAuthor’>
<data:top.authorLabel/> <data:post.author/>
</b:if>
</span> <span class=’post-timestamp’>
<b:if cond=’data:top.showTimestamp’>
<data:top.timestampLabel/>
<b:if cond=’data:post.url’>
<a class=’timestamp-link’ expr:href=’data:post.url’ title=’permanent link’><data:post.timestamp/></a>
</b:if>
</b:if>
</span> <span class=’post-comment-link’>
<b:if cond=’data:blog.pageType != “item”‘>

<b:if cond=’data:post.allowComments’>
<a class=’comment-link’ expr:href=’data:post.addCommentUrl’ expr:onclick=’data:post.addCommentOnclick’><b:if cond=’data:post.numComments == 1′>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</span> <span class=’post-icons’>
<!– email post links –>
<b:if cond=’data:post.emailPostUrl’>
<span class=’item-action’>
<a expr:href=’data:post.emailPostUrl’ expr:title=’data:top.emailPostMsg’>
<span class=’email-post-icon’> </span>
</a>
</span>
</b:if>

<!– quickedit pencil –>
<b:include data=’post’ name=’postQuickEdit’/>
</span> </p>

<p class=’post-footer-line post-footer-line-2′><span class=’post-labels’>
<b:if cond=’data:post.labels’>
<data:postLabelsLabel/>
<b:loop values=’data:post.labels’ var=’label’>
<a expr:href=’data:label.url’ rel=’tag’><data:label.name/></a><b:if cond=’data:label.isLast != “true”‘>,</b:if>
</b:loop>
</b:if>
</span> </p>

That code translated into human terms controls what goes at the bottom of every post…In this case its the author, time, comment link and labels. To extract the code from other templates, just click the “Expand Widget Templates” button and it is below the stylesheet on a certain template.

Most of creating a template is just trial and error. If you look at the code and try to piece it together bit by bit.. you will eventually succeed and reap the rewards of creating one. I hope this tutorial has covered everything that you will need and comments/suggestions would be greatly appreciated as it would be great if this tutorial would become a one-stop source for all of the Blogger CMS(Content Management System) users.

About the Author

This post was created by Brad. This article is from Brad Blogging.com, which is also where he blogs about tips to make your blog better, through personal experience. If you run a blog, or will be considering about creating one in the future, this blog may be the ultimate resource for you to achieve maximum success!!

BlogBoy Notes:To me everything looked quite sound, but I am not expert on blogger or BlogSpot so make sure you back up your current themes and templates.