How To Create Your Own Blogger Template Theme *Updated*

BloggerThis 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.

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.

*Update*

Every different piece of code inside the template does not need to be used and can be modified to fit what you are creating. For example, you don’t need to include a “Labels” section in each post if it will make the design that you create look terrible. Then again, It is all in the eye of the beholder as everyone has different tastes.

Related posts:

  1. Bradblogging Custom Theme – Anyone Interested?
  2. SEO and Load Time Optimized Wordpress Theme Now Available – “Optimized Overshadowed”
  3. Please! Add that “Personal” Touch.
  4. Part One: A List Of 20 Unique Wordpress Blog Templates To Excel Your Blog From Others
  5. Blog Architecture – How “Sturdy” Is Yours?
This entry was posted in Blog Design and tagged , , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

Enjoy this post? Theres more to come, so click here to subscribe to our RSS Feed.

70 Comments

  1. Posted October 30, 2009 at 6:48 am | Permalink

    I appreciate your efforts for sharing these valuable information. i will try this on my bolg

  2. Posted October 31, 2009 at 2:54 am | Permalink

    Hi,
    Its nice to know a bit of CSS. but i don’t know if you can tell me that if i would be able to use Front page for this and if yes than its very nice.
    Thanks

    • Posted October 31, 2009 at 8:33 am | Permalink

      I don’t think this will work for Frontpage – Does it support XML tags?

  3. Mitch
    Posted November 1, 2009 at 3:40 pm | Permalink

    Hey Brad,

    Thanks for this! Learned alot of it.
    Subscribed to your feeds :)

    • Posted November 1, 2009 at 3:56 pm | Permalink

      Glad to hear it! Look forward to seeing you back here. :D

  4. Posted November 4, 2009 at 3:23 pm | Permalink

    :D awesome thanks for posting this…
    but i still don’t get it
    do u have any video on this?

  5. Posted November 5, 2009 at 12:52 am | Permalink

    hey .. thanks for posting this. i’m gonna try my best to create one. :D

  6. Posted November 6, 2009 at 12:14 pm | Permalink

    Wow thanks for sharing! awesome. looking forward for more tips pal
    lois´s last blog ..Pacquiao graces Time cover My ComLuv Profile

  7. Posted November 10, 2009 at 9:09 am | Permalink

    Wow! I just love your tutorial .Thank U very much, I’m going to try this step, hope everything will be ok :D

  8. Posted November 24, 2009 at 8:16 am | Permalink

    even better when you integrate with your own CSS .
    Thanks

  9. Aloe
    Posted November 28, 2009 at 2:05 am | Permalink

    how come when i create then will have layout but not template?

  10. Posted December 6, 2009 at 1:01 pm | Permalink

    Thanks for the nice tips and tricks!
    I’d really like to make my blog a lot prettier. Creating something entirely on my own seems difficult, but I will try it.

    Thanks again!
    LadyChuckles´s last blog ..Christmas dreaming My ComLuv Profile

  11. Posted December 14, 2009 at 9:17 pm | Permalink

    Nice article Brad! Blogger templates can be a tricky topic to explain, especially the widgets and how they interact with the CSS. You’ve given a good overview of the process.

    I’ve written a couple of tutorials on the same topic that you might enjoy: Create Your Own Blogger Template and Working with Blogger Variables. Hope you like them. :)

    Cheers,
    Matt

  12. Posted December 14, 2009 at 9:52 pm | Permalink

    interesting and can get lots of info from here..

  13. Posted December 19, 2009 at 2:39 am | Permalink

    I’ve been wanting to make my own template for the longest time. Hopefully, I’ll be able to work this out. Thanks for the help! :)
    austenfan´s last blog ..Wordology (1) My ComLuv Profile

  14. Rob
    Posted December 25, 2009 at 6:01 pm | Permalink

    I just purchased Adobe suite cs4. Is it possible to create a vlog with Dreamweaver?

  15. Posted January 18, 2010 at 11:24 am | Permalink

    I believe to create template is the best way for link building, but it is so hard…
    piwjob´s last blog ..Things for a Freelance Writer to avoid My ComLuv Profile

  16. Posted January 29, 2010 at 4:28 pm | Permalink

    Hi, thanks for the info but I’m still at a loss about what exactly C.S.S. framework is. Your site says, “A great guide on how to get started with this is available here,” but I don’t see anything to click on. I’m not computer savvy at all though I just wanted to spice up the old blog a little. Oh well, thanks anyways!
    recklessbliss´s last blog ..Let’s Get Carried Away…. Again! My ComLuv Profile

  17. Posted January 30, 2010 at 12:41 am | Permalink

    Hi,

    Thanks for the tips, I browsed the internet for some ready made templates but they dont quite seem to be what I want. Your tips will help, greatly appreciated

    regards

    Sadia
    Freelancer
    Barefoots Blogger
    Kid Allergies

2 Trackbacks

  1. By Increase Long-Term Blog Traffic | Brad Blogging on February 11, 2008 at 10:05 pm

    [...] on new topics that many people might search for assistance on. One tutorial that I have written (How To Create A Blogger Theme) has been seen by at least 5 people per day since I posted it. Refer to the statcounter keyword [...]

  2. [...] 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“ [...]

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

CommentLuv Enabled

626 RSS Subscribers

Subscribe today to recieve any updates on this blog for free!

You'll also receive, "The Blog Manual" free of charge for being a subscriber which you can download at the bottom of each post.

 


Blog Advertisers

About The Author

Brad Ney

I am a Wordpress enthusiast, part-time website designer, and enjoy using the latest technology via the internet for website promotion.I enjoy writing about startup websites, XHTML, CSS, Wordpress based on what I've learned in the industry.

Become A Facebook Fan!

Reader Poll

  • Are you a...

    View Results

    Loading ... Loading ...

Recent Comments

  • Jayce: Long time did not optimize my blog already. Does this speed up a lot? .-= Jayce´s last blog ..How to...
  • JR @ Internet Marketing: Just became a fan! .-= JR @ Internet Marketing´s last blog ..The Ultimate and Best...
  • Sadia Malik: Hi, Thanks for the tips, I browsed the internet for some ready made templates but they dont quite seem...
  • recklessbliss: Hi, thanks for the info but I’m still at a loss about what exactly C.S.S. framework is. Your...
  • Gomez the windshield monkey: Brad, Nice tip. I find I struggle with this, though. For me, this is advanced PHP...

Leave A Comment - Reap The Rewards

  • CommentLuv will fetch your last post - Free publicity!
  • NoFollow Removed - Free backlink from each post you comment on!
  • Choose to be notified of replies made to your original comment!
  • Share your prospective while learning new things and have fun meeting the community.
  • Have a question? I answer every comment with a personal response.