How to make Blogger templates like a PRO

How to Make Blogger templates like a PRO

There's a lot of arguments about the importance of a blog design, and how It can help you getting more readers. I will take the side that says "A good Blog design can give a big help catching a first time reader!". So as I am starting out this blog, I am a good example of that.

Some people think that making Blogger templates is the hardest thing in the world. Weel I say it's not, at least if you have the right tools to help you in this task. For your surprise, you don't even need to have THAT knowledge in HTML... CSS... or whatever you think you need. But of course if you have it, making a template is going to be a lot less challenging.

Here I show you the process I use to make my templates, from the beginning, and what tootls I use during the whole process.

1. Get some inspiration:
How to Make Blogger templates like a PRO
There's plenty of CSS galleries, Blogger templates galleries, and tons of great design inspiration blogs. Please make use of them, see what other designers are doing, how the design trends are developing, and try to follow it. The important thing is, never copy the work from anyone, remember: you are getting inspiration, so try to get it, observe the details, get the good things out of it, and use them in your template.

2. Design your template using Photoshop(or another software you're used to):
How to Make Blogger templates like a PRO
Yes, of course you need to design it, specially if you are planning to become a better designer. At least for me, I have the need to see how my template is going to look like when it's done, so I try to make it as real as possible using Photoshop, and this will help me a lot in the further steps.

3. The Minima template:
How to Make Blogger templates like a PRO
Always create a test blog, you don't want to mess up your main blog right? Then choose the Minima template. Why do it all over again? Minima has all the content well organized, in a great minimalistic white background, all ready for tweaking and customizing , waiting to become whatever your creative mind want it to become! Starting a template from scratch, I mean from zero, is waste of precious time.

4. Firebug (God's Hand):

How to Make Blogger templates like a PRO
Reason why I call this great firefox extension "God's Hand": The possiblitity of real time changings in the template, you don't even have to touch the code, just find the section you want to modify, and use the the keyboard arrows to change the values and the options. It can become your main tool (it became to me) when you get use to it. You will be able to fix any bug, or any problem that you have, in front of your eyes! Once you start wroking with itm you won't believe how big will be the increase of your productivity, believe me. So use and abuse it.

5. Mind the details:
How to Make Blogger templates like a PRO
Yes, make it unique, watch for every single detail, change every little icon, put your personality in it, never be lazy. It can be tiring to make a really good template, but once you have finished it, you will feel great to see the good work you've just done. And believe me, the others who will see it, or download it, will notice that you're a good designer when they see you've put a lot of details, like customizing the comments section, the paging buttons, the footer... like none has never done!

6. Publicize it:
How to Make Blogger templates like a PRO
Specially when you are starting as a blog designer, make some great free templates for people download it, submit it to some well known blogger galleries, I'm sure that will get a lot of traffic for your own blog, and people will see the good designer you are.

So there are 6 steps I always take when I am going to design a new template. I am sure they will help you a lot in this interesting task. If you have any questions about this post, or even want to add some new step in the run to become a PRO template designer, don't hesitate to use the comment section below.

57 comments:

Post a Comment
Mark from California

Thank you, Dante, for sharing what you learn with others. I love your 'Paperview' template. Very CLEAN. Great job! I am happy that Klodian put your template on DeluxeTemplates.net--- he is a very nice person.

gumaraes

finally i found!!!

Dante Araújo

@Mark Thank you so much for the feedback!

Dante Araújo

Is there anything else you guys want to know ? Or any post suggestions ? Please use the Contact section!

Claudel

how to rotate the post body ?:) so we can have 100% custom templates :D

Dante Araújo

Can you be more specific please ? What do you mean by rotate the post body ? It could mean lots of things haha.

:)

Claudel

like the main posting area? sorry i ain't that much into coding that's why i'm asking :)

Eduardo GR.

Hello!
I've been reading your post, and I have a question. Maybe it's silly, but I don't know a thing about web design.
I'm actually starting my own blog and I want to design my template from scratch.
My question is, between steps 3 and 5, what happens? How do you transfer your image to web code?
I've already download the firebug, can you give me a little more info. Thanks man.

Dante Araújo

Hi Eduardo, I am sorry but those steps are considering that you have some HTML/CSS knowledge and you should know how to transform a image design into a webpage. Yes, this is too much complicated to explain just here, it would need not just one but a couple of tutorials to go through each step.

All I can give you is a link to some wonderful tutorials that I have used to learn it, it shouldn't be difficult if you work hard.

http://blog.themeforest.net/resources/12-fantastic-psd-to-html-tutorials/

Enjoy it!

Alvaris Falcon

Wow using Firebug is a great tip! I actually never used Firebug before but just installed it for a while, but now I got the strong point to use it!

This post benefits me a lot, thanks for your kind sharing! :)

Dante Araújo

Firebug is my main tool, I think I use it even more than photoshop or any other tool to design a template. It's wonderful!

~Tara

Hi Dante, great post but I was hoping you could answer a question for me? Do I have to create a blog template to get my blog's sidebar buttons to match the blog's look? I'm learning to make blog backgrounds but I'm not sure how to get the buttons to match...does that need to be done as a template? Thanks in advance- you've got a great informative blog here!

Dante Araújo

Hey Tara,

I am sorry but I didn't really get the point of your question. If you want to make the sidebars buttons to match your blog design you will have to design them yourself in order to get a nice result. Is that what you are asking for ? I am sorry, Please try to be more clear, I would love to help you.

Regards,

Dante

0ozz

tanks men is nice you work , peace

Torres

olá dante,
gostava de saber como colocar esse widget que tens no final do post. o das redes sociais.
seria possível dizeres-me?

muito obrigado.
um abraço,
antónio

Dante Araújo

Procure por "Sexy Bookmarks for Blogger" no google que você encontrará um tutorial.

gasosa

obrigado dante!
um abraço desde Portugal

manS

nice tips.. tq for the great tip..

I Appreciate it

Mia the Rainwatcher

Muito obrigado!

Sorry, this is all I know unless you speak Spanish or Italian too.

Gabbie AKA MissEvilKitty

whats the standard size for the blog template/layout ?

Dante Araújo

The same as a webpage... I generally make layouts with 960px wide.

BestofBlogger

HOw can i create blogger blogspot template. İs there any phptoshop or dreamweaver tutorial?

Ps help me

Dante Araújo

I am making a detailed tutorial that will have more than one part explaining how to create a blogger template. I will post it as soon as I finish!

The first part is about creating the photoshop design.

TRIMATRA

owhhh...gitu toh genahe ki..hmmmmm, faham akuh

Mia

Great Post Master Dante :) You are not only a good designer, coder , and WRITER - but more importantly , you love sharing what you know . This makes you a good, giving human being . Youre a great guy Dante ! Does your mom know what a good kid she has ? :)

Catch you in cyberspace D .

M

Dante Araújo

Hey Mia,

Thanks a lot, I love this kind of feedback.I really love to help people here, as you can tell I always reply to my comments no matter how simple the question is. My blog is like a community of beloved users now ;) And you guys helped me making it.

Best Regards,

Dante Araujo

Elyong

Whooah! I have been looking for this tutorial for ages... thanks! I will have to try this... thank you so much!

Anonymous

Thanks for this post!

I plan on selling my templates online and I'm hoping that I don't have to start from scratch. Is it legal for me to use the Minima template as a starter for my own works?

Thanks again!

TheGreatRat

You are my "mini-god"!!!!!!!!!!!!!!!!

bath mateus

I impressed for your posting.

Bathmate

NGTHFONG - 阮・青・風

Thanks for the post. I'm trying Artisteer 2.3, it's so wonderful but ... could not activate, need some help.

Nick Matyas

Looks so good in the website. It's really helpful. Thanks for your posting.

http://www.webroyalty.com

pupung

Two thumbs up

Anonymous

A post that just to get links.

adel ghaly

can you make another lesson for more datails

daveskaren

Hi, nice tip thanks, i’ll use it on my site.

regards,
www.itemplatez.com web templates easy to download.

gold

hi nice tips on ur blog.

Madyam Technologies, India based web company offering affordable web

design services to its clients, serves an eye-catching and crispy layouts. Also offer

flash animation and logo designing and SEO,Shopping Cart Development,ERP,CMS,CRM

Services etc.

7on7

I think step 2 is most difficult :), using PS as a pro designer is not simple.
Your post is very useful :)
Thanks for share.

FreeThemes4all Staff

Thank you so much for this blogger Tips...
You can get a Nice Blogger Templates From Free Blogger Templates Download and Free Website Templates That gona be helpful!!

Anonymous

Collection of Free Website templates, CSS Templates, joomla Templates, Wordpress themes, Flash Templates and Other Free Web Templates With high Quality Design.

template4all is a place to download a free website templates, wordpress themes, blogger templates, css templates, flash templates and other free templates with high quality design

If you look for a Free Templates to build your website, template4all provide more than 1500 free website templates with high quality design and for all kind of business, you can find also a wordpress themes, blogger templates, joomla templates and other free cms templates.

Mariel

Great minimalistic template, clean and fresh! Yet another great piece of work! I have converted the template using php to work with typolight a web CMS. It’s on my site.

premium web templates

Mariel

Great round up, thanks for sharing the helpful resources. They all look like they could be a great addition for development and design.
buy web templates

sathish

Thanks for the sharing of such information.This is a great stuff of reading.CRM Services .

deviatemedia

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

Free Premium Templates

Download free premium templates from www.indiworldweb.com

Steffi

Really well done for the blog.these are so sweet and pretty!
Flash Design

shankar

Hi dante,

I have a pretty decent knowledge of HTML/CSS.. Is it advisable for me to directly go and do the editing work in firebug or should i go thro PSD to html conversion?

flash animation design

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

hgfan

this article is very useful . thank you

JeeShen Lee

You may also hire blogger template designer to do it. Check these guys out - www.blogmakeover.net

kathy

Find it! This is what exactly I was looking for. I'm a beginner here. Newbie in creating a website and I was thinking how will my website will look like pro, as if I was an expert. Thank you so much for this. The search is over!

star hotels

nice article thanks for sharing it

mAn ĐiezEl

thnks posst full

Chankey Pathak

A step by step method to do that would be of great help. Thanks BTW.

The psychiatrist

First of all thnx for the post brother...i have a couple of questions..
1.can i create a blogspot template with any canvas size(when creating in photoshop)?or does a blogspot have a fixed canvas for creating a template?

2.does a template once created and uploaded remains same for the whole website(blog) or does it change with every post?

The psychiatrist

First of all thnx for the post brother...i have a couple of questions..
1.can i create a blogspot template with any canvas size(when creating in photoshop)?or does a blogspot have a fixed canvas for creating a template?

2.does a template once created and uploaded remains same for the whole website(blog) or does it change with every post?

Pradeep's ♥

Can you give a tutorial how to upload a blogger template created with photoshop to blogger ?

Post a Comment

Grab the feed for followup comments!