Tutorials on Blogger Template Design

>> Browse templates, Money tips,  23 comments


Blogger Template Design: Introduction

This tutorial is a very quick guide to teach you how to change or design your own Blogger templates. It's easy to understand and follow, especially to those who has no knowledge in HTML programming.

The tutorial is split into a number of sub-tutorial modules that explain specific parts of Blogger template design in detail. The best way to learn is by going through the module sequence one by one. But if you are familiar with the basics, you can jump into the more advanced modules. The earlier modules are focused on explaining the basic structure of the template design and the template code so that you understand more about a Blogger template in general. The later modules explain each section of a Blogger template in more detail and help you go through the process of coding and designing a template in a step-by-step approach.

In the tutorial, some of the names and terms are based on my own template design, but I'll explain them as general as possible so you get the bigger picture and can adapt to different template designs.

Tutorial Contents


Labels: ,

23 comments:

Thiru June 08, 2007 9:11 PM  

This is a wonderful tutorial, I have always wanted to know what such things meant. The color coded template is a good way to learn Blogger Template customizing. Thanks for the great service. Cheers,

Elque June 10, 2007 3:31 AM  

Thanks for your input. I've got more things coming for the tutorial, but still on hold for now so that i can build more templates. i'll posagain on tutorials after 30th templates.

autodynamix June 14, 2007 4:48 PM  

Thnak you for the tutorial.

solusisehat June 19, 2007 10:27 AM  

Thank's for your templates, very good and very nich. I want to get information from you about:

"Inside your blog was templates sample (format jpg), how to make its.


Thank's

Azhari (Indonesia)

Elque June 19, 2007 1:43 PM  

Trima kasih Azhari,

I wasn't sure about the question, but I think you're refering to how I get a snapshot of my template and put it as JPG, am I right?

To do this, I use a graphic viewer software (I'm using the free IrfanView). Open the page that you want to copy, then open the IrfanView. Go to Option and choose Capture Screenshot and follow the direction. You'll then get a picture of your full screen including the picture of your blog page. Crop the picture to get rid of the screen picture, leaving just the image of your blog page.

Hope this helps.

Jan February 07, 2008 2:31 AM  

10x 4 wonderful tutorial
lots of info, I found 1/2 of what I was looking for and da other 1/2 is a tutorial about converting WP template to blogger.
will I see any help!!?
Cheers bro

Dzelque February 08, 2008 4:12 PM  

Hi Jan. Thanks for the comment. About WP, I haven't use them and not sure how to convert them. If I were to convert one at this stage, I'd use all my knowledge in Blogger template design and try to imitate the WP template by looking at the features one by one and rewrite the code. I'm not sure how to convert the code directly. Thanks again.

free for all March 08, 2008 2:22 AM  

Great tutorials thank u very mush

Jennifer June 06, 2008 12:21 PM  

These are sooo useful for a novice like myself. Thanks.

saccarrep June 15, 2008 11:21 PM  

Great tutorial with great explanation. Thanks for the tut.

Farah July 21, 2008 6:50 PM  

I have been looking for a tutorial like this for a long time. The tut is great. Specially the layout structure you provided, really helped me understand how can I approach a blogger template on my own.

Abhishek August 26, 2008 5:50 AM  

I just wanna know ! Do you use Dreamweaver for designing the templates !! OR can we use dreamweaver for designing blogger templates OR any other software ?? Please reply

gosi@in.com

Also please design templates with searchbox...

( PLEASE DO NOT SEE MY BLOG>>> ITS IN UNDER SEVERE TESTING OF CUSTOM TEMPLATES >>>

Paddy January 07, 2009 3:47 PM  

It's a wonderful tutorial. But The templates in your website are not working with blogspot.IT gives error.
Can anyone tell how to recifiy that.
Cheers.PN

PING_TM January 10, 2009 2:12 PM  

Hello OurBloggerTemplates!

Just an out of topic question.
Are you a programmer from Google or worked there?
Or did you learn Google's blogger template design yourself?

Your tutorial rocks!

Thanks!^_^

alladin alias double'u' en ai January 23, 2009 11:41 AM  

wonderful!!!
I love it.

you know, I'm only a Newbie, but I wanna enrich my blogging, and finally, I find this address, with an unique tutorial.

Thank You so much for your tutorial, and for available template, too.

Mancini Consulting - Francine February 15, 2009 10:24 AM  

Thanks for posting these tutorials. They're GREAT! I truly appreciate it!

I would like to make a small donation to you for sharing this, yet didn't see a place I could send you a few bucks.

Any ideas?

Thanks!

Jerod April 23, 2009 4:37 AM  

I am currently using The Professional Template. I am trying to add a share button from addthis.com and it says to look for "div class='post-footer" and then past the code after that. But I have yet to find that code. What is the line I need to look for?

tienzyee May 20, 2009 2:29 AM  

Hi Elque,

Thanks for the great work.
I have one question: how do I change the code to display random header/banner images?

I found javascript for doing but it doesn't work when I tried them.

I'm sure that the code data:useImage points to the uploaded image but blogger only allows one image at a time. It is possible to do the random header/banner

b:if cond='data:useImage'

I tried to find your email but failed and I can only hope you see this comment.

Please reply if you see this, thank you for the work again!

ajithrindia May 24, 2009 6:49 PM  

I appreciate the pain yout took to share your knowledge with others... your tutorial was highly enriching. We look forward for more cool stuff from you...

o_chan June 17, 2009 9:13 PM  

great tutorial. I will translate your tutorial to Indonesian language, but I will put your link there.

Would you mind about it???

Shraddha June 19, 2009 5:25 AM  

I cant view the links for tutorials..

Neil June 29, 2009 11:46 PM  

This tutorial will helpful for those who are new and not aware of HTML programing. I think you did a good job to write a post on how to design own blogger templates. Keep it up.
Web Design Quote

subanindro July 05, 2009 10:23 PM  

Thank you for big tutorial. I hope you successfully.

Post a Comment

Subscribe to: Post Comments (Atom)