How To Create Your Own Blogger Template Theme *Updated*
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.
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.
Thanks for visiting my blog! You may want to subscribe to my RSS feed so you will be able to get these personal blog tips for free!
Wow, this is what I’ve been looking for. I’m gonna subscribe your feed so that I can learn more on how to create a Blog*Spot’s template. Hope this kind of post will be published more or maybe I can shoot you an email if ever I come across any problem? What say you, Brad?See you around.Greetings and lots of love from Malaysia.
ArahMan7’s last blog post..SOS, I’ve Been Attacked!
Thanks for this great tip. I’ll be applying it to my site as soon as I get some time aside from school and work.
Sean’s last blog post..The Tech Juice now on Twitter
No problem Sean.. Glad I could help
Arahman7..You can always send me an email using the contact page
Thank you for your information. It’s very nice article and teach people who wants to be blogger design
putra banua’s last blog post..Learn web hosting
I wish I came across your information sooner! I’ve just completely written all of my CSS and HTML from scratch to create my own template!The benefits though are tremendous - I have now slightly altered the code and have used it on 4 of my other blogs! It was a lot of hard work - but totally worth it!
thinsurface’s last blog post..The Untold Story of How the Three Little Pigs Built Their Blogs
Do you have a video tutural for this? Because I like how it is done, but I barely understand what it means. I understand video tuturals better.
That could be a future consideration Spoil.
Thanks for reading!
Your welcome!
Is there any software that can do the coding?
Digital Board’s last blog post..Empathize With The Retiree: Find The Perfect Retirement Gift.
many many thanx for this post
i’ve looking around for things like this…
great job !!!
xtremagix’s last blog post..Coin Date Prediction
Hello thereThank you for the insightful description. I have one question I am not clear about. Is it possible for me to have two areas on my blog that I can post to, for example an area where I can post my new text posts and another area where I can post my weekly cartoon?
Is there any way you can help me make my blog look like the Chanel Site?
Fashion_Girl22’s last blog post..Garrett For Calvin Klein Body
Thanks for the tutorial.
Armand’s last blog post..Customizing Permalinks For Better SEO
Hi Brad, This is the first time I visited your site for the template stuff and after some time.. I came across one more site that looks like the copy paste thing. Just wanted to know, which post is the original one. I wanted to learn about the templates tutorial.. so I could follow.. The link to that site is http://public-template.blogspot.com/2008/06/how-to-create-blogger-template.html . Is it yours ???
Kinjal bali’s last blog post..How to become a Mystery Shopper
Thanks, this blog is really informative It’s a nice thing I stumbled to this site, more power to you.
How to Make Money Online Blogging’s last blog post..My New 3 Column Blogspot Layout
This I will work on a bit more when I have time. I have thought about making my own template. There are a lot of good ones out there but the might be missing that one thing that would make it perfect.
I should have read this before… this is exactly what I need to make blogger templates. Thanks, Brad!
Thank s for the tutorial
Gokhiel’s last blog post..Microsoft Excel 2007: How to take limit value to the cell
thanks your info, I just start create blog
How come your teaching how to create a blogger template when your blog is on WORDPRESS?
Eneza’s last blog post..The Church Bells Started Singing
hello,
im a new beginner for this blogging community.
i just want to know about edit your template blog.
Thanks for your help
This is exactly as I’d hoped it would be, however, it’s still a little greek to me. I’m so not computer savvy.
Thank you though.
Great Tutorial! Thanks…
No offense buddy, but this is hardly a tutorial to create your own template. I mean, knowing there are XML tags, HTML, widget codes in the template ain’t gonna be enough to create your own template? How about more practical stuff like how to customize the templates of your posts, etc.? Just my 2 cents
tahnks for this tutorial…
i’ve been looking for this… this is what i need…
Thanks for tutorial.
Till now I am was using free CSS templates for my site lonians.
Now I am taking inspiration from your tutorial to create my own designed template.
Great tutorial! You might find the stuff on my blog rather interesting, but it will never be as good as yours….
Hi,
Thanks! Very Informative news about how to create a new blogger
template. Hope this would help me in the future
Hi,
I’ve tinkered a lot with my blog template and I am happy with the template that I have. There are, however, certain things I wish to add to make it better like the ‘visitor capture form’ like the one you have for posting comments. I’ve not come across any blogger template that has such a form, even you are using Wordpress which has it by default. Can you help?
Nice tutorial to make a blog template…
thanks.
very nice tutorial!
This is very useful.Thank you very much.I learn many thing from this thanks again
nice tutorial. i will try.
This was really awesum tutorial. will try creating one..
consider visiting mine @ TheMillionDreams.Blogspot.Com