Tutorials on Blogger Template Design

>> Browse templates, Money tips,  76 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: ,

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

karthi October 13, 2009 11:46 PM  

Thank you! great job!
HCL ME LAPTOP

moonheart October 16, 2009 7:59 AM  

I am thinking for design my own blogger template, So I will use your tutorial how to design own blog template.

Daniel Siagian November 16, 2009 4:51 PM  

Dear Elque,


Thanks for the tutorial bro! Btw, how to move the right column to the left of posting ? Please help me.

Best regards,
Daniel-Siagian.co.cc

prafangga.com November 23, 2009 9:30 PM  

great tutor, thx dude. I wil learn template blog from here ^.^
Thx u

Ruthi November 29, 2009 1:29 PM  

Thank a lot. I learned a lot from you guys. More power.

f0ld December 03, 2009 7:33 AM  

great great great

University December 27, 2009 10:44 PM  

We have a few college students online and we love your blog postings, so well add your rss or news feed for them, Thanks and please post us and leave a comment back and well link to you. Thanks Jen , Blog Manager learn to blog

Games Database December 29, 2009 3:11 AM  

the tutorial is great...tnx very much





http://games-database.blogspot.com

Online Games January 06, 2010 6:29 AM  

HI, can I add this tips in my blogger site? or my site?

http://www.bestasianpics.blogspot.com
http://www.deregu.blogspot.com

My free ads submitted site:
http://www.tipsiklan.com or
http://www.caraiklan.com

4shared Mp3 January 18, 2010 11:26 PM  

Nice Info..Visit my blog 4shared Mp3

Jenn March 01, 2010 8:18 AM  

I have to say that this is one of the best tutorials I have seen. I do have a background in html but never got into other fancy coding. When I first looked at the html for blogger, it was daunting and settled for pre-made templates couldn't understand the code at all until now. Now, I can not only save my wedges from being deleted everytime I upload a new template but I can actually design my own. Thanks so much

Jennifer

jazzie_tono March 11, 2010 3:56 AM  

This is the best tutors i'va ever see...Thanks a lot!

secblog March 22, 2010 9:23 AM  

Great templates, http://twitter.com/adleer22

Clauie. April 23, 2010 6:16 PM  

Thank you so much for this tutorial! I`ll be crediting you in my blogger templates site in the future and in every blog template I make!

Transcend April 27, 2010 11:10 AM  

Thanks for the tips.. i was i need of doing some research on how to design with blogger. we are currently building a new blog database for our site Broadway Seo

ELLA May 04, 2010 5:47 AM  

Hello, I am a fan of your works. Would it be possible to ask help from you in solving minor changes in your older templates? Your template on my blog seem to have been affected by Blogger's recent update.

http://eclectidelic.blogspot.com

4im May 05, 2010 8:40 AM  

I think this tutorial is great contribution from you.
I very like it, because it's have a simple description about designing and coding of blogger template.
I can learn more from you.

Thanks

4im

胥传奇 June 24, 2010 10:41 PM  

Lace wigs are not only worn by those who are suffering hair loss, baldness or thinning hair, full lace wigs,lace wigs,lace front wigs and lace wigs are now a fashion accessory sported by many top name celebrities like Tyra Banks and Paris Hilton to name a few.Custom made, top quality full lace wigs and lace front wigs made with human hair have been around for many years, but up until fairly recently they were mainly used by movie stars to change their appearance and get into character.

Desi Master July 02, 2010 1:49 PM  

Please see this image and provide solution. thanks
http://www.picscrazy.com/image/Clipboard02Td.jpg
email me ur solution on
urdudesifantasy@gmail.com

madhyamtechnology August 18, 2010 5:07 AM  

Madhyam Technologies, India based web company offering affordable Web Services to its clients, serves an eye-catching and crispy layouts. Also offer flash animation and logo designing, SEO, Shopping Cart Development, ERP, CMS, CRM Services,Web Designing in India etc.

N.T.L September 17, 2010 4:26 AM  

How can i add a profile comment to blog?

Mariel October 29, 2010 1:14 AM  

This is a great roundup of information. Great website and great article. You have yourself a new subscriber as of today.
flash cms templates

Peter Young November 03, 2010 7:51 PM  

Cool tutorial, a nice way to learn all the basics of a blog templates and maybe I can do this myself.

Sylvester November 16, 2010 8:39 PM  

Great tutorial with great explanation. Thanks for the useful information.I have always wanted to know what such things meant.Specially the layout structure you provided, really helped me understand how can I approach a blogger template on my own.

virginia foreclosures

mentrenk November 22, 2010 7:13 AM  

some really good tips! Thanks for sharing!

sathish November 24, 2010 8:44 AM  

Thanks for the sharing of such information.This is a great stuff of reading. I will pass it on to our audience. Thanking you,CRM Services

ven December 08, 2010 11:55 PM  

This is a wonderful tutorial, I have always wanted to know what such things meant.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.

Grocery List

ben December 15, 2010 8:40 PM  

Thank's for your templates, very good and very nich.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.

Toronto debt consolidation

sathish December 17, 2010 10:04 AM  

Thanks for the sharing of such information.This is a great stuff of reading.Custom Web design .

johnplayer December 23, 2010 9:42 AM  

i would like to thanking you for these tutorials.its so useful & helpful to us.this blog is awesome.

Benivolent January 11, 2011 9:15 PM  

This is an amazing tutorial; I have for all time required recognizing what such equipment meant. The color oblique outline is a brilliant technique to learn Blogger Template modifying. Thanks for the huge post.
cms website development

viaam January 19, 2011 12:40 AM  

I appreciate your post, I have book marked this internet site so ideally I’ll see much more on this subject in the foreseeable future!

http://www.viaam.com

madhu February 07, 2011 5:54 AM  

it's a very interesting blog... and your work!!! no words to describe it. I am very new to the whole thing and thank you for your advises and tutorials!!

Job Description Template

Internet Marketing Freedom March 22, 2011 11:52 PM  

thanks for sharing , it's simple, to the point and easily understand... and most importantly it's free of charge. thanks again.

Internet Marketing Freedom March 22, 2011 11:52 PM  

thanks for sharing , it's simple, to the point and easily understand... and most importantly it's free of charge. thanks again.

Md. Saiful Alam March 28, 2011 12:57 AM  

This is obviously nice article and it is very helpful to us.

Kang Niam April 01, 2011 9:54 AM  

thanks for templates

Moh. Azis Wijaya April 13, 2011 9:51 PM  

thanks 4 tutorial
vansuprut.tk

sandy April 25, 2011 5:23 AM  

Hi,
Great post. I appreciate it. Thanks for sharing this post. Keep posting updates.

flash animation design

Blogs April 29, 2011 2:35 AM  

thats fine post the template is good thanks for sharing

Dilipan May 06, 2011 12:30 AM  
This comment has been removed by the author.
Evan May 06, 2011 12:32 AM  

Great tutorial! I opened up for the first time and was able to follow through to the end with little difficulty.
web development company

un-covering May 06, 2011 5:02 AM  

amazing
wanderfull
awesome and great tutotial, so usefull
thanks a lot

Dunia-Ary June 10, 2011 9:35 PM  

Thanks for your info, this the best toturial.
Cara Memulai Bisnis Online
Glass Bottle Manufacturers
bali cooking class
pemasaran online
cooking classes bali
lovina cooking class
bali recipes
lovina bali
lovina property
lovina reservation

www.adjanibali.com June 11, 2011 1:38 AM  

very nice tutorial,, the colour is wounderfull
lovina cooking class

Nichole September 11, 2011 11:28 PM  

It is education that makes a man rational. And as the technology developed so as the way of educating human. Today, more and more computer training are created to have an easy access to education.

Nichole September 11, 2011 11:28 PM  
This comment has been removed by the author.
Dietrich September 30, 2011 4:42 PM  

Swell blog you have here, interesting tricyclic antidepressants points you arise here

Ardi Wijaya November 11, 2011 7:51 AM  

very interesting post. and i ask yu to support me on Century 21 Broker Properti Jual Beli Sewa Rumah Indonesia contest.

Bharti Sharma December 07, 2011 2:51 AM  

Thanks for an idea, you sparked at thought from a angle I hadn’t given thoguht to yet. Now lets see if I can do one thing with it.
Web tutorials

logodesignrus December 07, 2011 4:29 AM  

Impressive informative tutorials,good template collections really appreciative .

Janvi December 24, 2011 3:01 AM  

This is really an intersting blog. Thanks for sharing with us...Flash Design Agentur Wien

Concept an Idea January 24, 2012 10:58 AM  

Great Blog!! That was amazing. Your thought processing is wonderful. The way
you tell the thing is awesome. You are really a master.

Outsourcing web design to India

Post a Comment

Subscribe to: Post Comments (Atom)