This blog has moved here: woorkup.com | FOLLOW ME ON TWITTER @woork
Friday, September 5, 2008

7 Tips to design professional blog layout using Blogger

Blogger it's a very powerful platform to publish your blog. It's free and with some features which you can customize how you prefer, without limits.

In this post I want to illustrate some tips which can help you to improve your Blogger template to design a professional layout for your blog.


1. Start creating a custom template
A nice template is important for the success of your blog in terms of visits and return of money using AdSense. Before to start your custom template, writing code from zero, I suggest you to download a simple basic Blogger template, for example "Minima": so, copy and past on your preferred HTML editor HTML source (remeber to check "expand widget models" option) and remove everything is contained within b:skin tag. This is the only code which have to remain:

<b:skin> /*</b:skin>

...and, below the previous line, add this code into the <head> tag to create your custom CSS style. I suggest you to use the following CSS structure:

<style type="text/css">
/* -- 1. Standard HTML elements reset --*/
/* -- 2. Custom Page Elements --*/
/* -- 3. Redefine blogger standard elements --*/
/* -- 4. Other custom classes --*/
</style>


In this way CSS code will be simpler to manage and update. This is a screenshot of a part of CSS code I used to design my blog:



At this point you can start writing HTML code, adding layer, sections and other elements to your template. When your template is ready, copy the code and paste it on Blogger Layout editor and save it. If you need more info about Blogger customization, I suggest you to take a look at BloggerBuster a "Blogger-dedicated" site mantained for my friend Amanda which provides useful templates, tips and tricks for Blogger users.


2. Create single custom pages on Blogger
Using Blogger you can create single custom pages like on WordPress. How do you do it? Simply creating a post which you will use like a web page for example adding links or in general contents organized for category. On my blog I created some pages (Tutorials, Showcases, Freebies) and, for each page, I added a link on navigation bar:



...and each page contains links organized for topic (take a look at the page Tutorials). When you have to modify the content of the pages you have simply modify the related post directly from Blogger Post editor.


3. Display some HTML elements only on home page
Sometimes it's usefult to display some page elements only on home page and not on each single post. To do it, you have to use Blogger <b:if> statement, adding the following code on your Blogger template:

<b:if cond='data:blog.pageType != "item"'>
<!-- ... HTML code if you want to display only on home page here... -->
</b:if&gt


In this way, if the current page isn't an "item" page (but for example it's your home page) , will be displayed all code within <b:if> tag.


5. Page title and meta tag description
For a better indexing of your blog on Google I suggest you to make these simple changes on your template. Change this line (blog title):

<title><data:blog.pageTitle/></title>

...with the following code:

<b:if cond='data:blog.pageType != "item"'>
<title>My site | This is a short description</title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>


...and add Meta tag description below the previous <b:if> statement.

<b:if cond='data:blog.pageType != "item"'>
<meta name="Description" content="Add here a short description of your site" />
</b:if>

For example on my template I added: "Woork is a popular tech blog mantained by from Antonio Lupetti. Topics focus on web design, tutorials, resources and inspiration", so when someone looking for my blog on Google, search results display the following description:





4. Design custom categories section
By default, categories on Blogger are displayed on one column. If you want to modify the default layout showing labels on two columns instead one column, you have manage manually your labels using this simple trick: adding on your template, for each labels, a link like this:

<a href="http://yoursite.blogspot.com/search/label/Category Name?max-results=max numbers of posts to display">Category Name</a>

For example, to design my categories section I used this code:

<a href="http://woork.blogspot.com/search/label/ajax?max-results=2">Ajax</a>
<a href="http://woork.blogspot.com/search/label/blogger?max-results=2">Blogger</a>
<a href="http://woork.blogspot.com/search/label/coldfusion?max-results=2">Coldfusion</a>
...

...and how you can see on my sidebar the result is:



I know, the process is not automatic and each time you add new categories, you have to udate your template manually... but this solutions renders more flexible template design.


5. Republish Feed RSS to manage recent entries and comments
Personally I don't like Blogger default archive widget. So, on my template I used FeedBurner BuzzBoost service to add a section with recent entries and recent comments. If you have a FeedBurner account login, clik on "Publicize" tab and select "BuzzBoost" service:




Follow instructions on the page and copy and paste BuzzBoost code on your Blogger template, within a new layer with class property = "recentPost" (you can insert this layer, for example, within sidebar):

<div class="recentPost">
/* FeedBurner BuzzBoost Code*/
<script src="http://feeds.feedburner.com/your feed here?format=sigpro" type="text/javascript" ></script><noscript><p>Subscribe to RSS headline updates from: <a href="http://feeds.feedburner.com/Woork"></a><br/>Powered by FeedBurner</p> </noscript>
</div>

To customize recent entries section add a CSS class (recentPost) using, for example, the following code:

.recentPost li{background:url(arrow image URL) no-repeat left top;
padding-left:14px;}

Final result is something like this:



You can repeat the same process to add a new section which contains links to recent comments, simply changing the feed URL.


6. Add custom subtitle to your posts
If you want to add a subtitle to your Blogger post you can use a simple "trick" using CSS. On your Blogger template, create a custom class ".subtitle" (for example, I used this code for Woork's subtitles style):

.subtitle{
font-family:Georgia, "Times New Roman", Times, serif;
font-size:20px;
color:#555555;
line-height:28px;
}

Now, when you add a new post, to add a subtitle, add a div layer with class property = "subtitle" before the post content:

<div class="subtitle">This is a subtitle</div>

This is a screenshot of Blogger Post Editor:




So, add the rest of your post below the div layer and the result is:




7. Add social web buttons
Social web buttons are a extraordinary solution to share and make popular content you write on your blog. Delicious, StumbleUpon and Digg are my preferred social network which drive on my site a lot of traffic but also Mixx, Reddit, Yahoo Buzz!, DZone can help you to increase your visitors. For more info about how to add social buttons on your site take a look at this post for the full list.


Related content
Some Blogger Tips you probably don't know
Blogger Hack: add social buttons to increase your traffic

blog comments powered by Disqus
deineshd said...

This is very Useful Post.I will try this once.

Fede777 | Geekspot said...

Nice article.
When will it be available for purchase?

Anonymous said...

Even though I liked your old page design much more ... and I do not use Blogger ... this is an excellent post!

Antonio said...

@fede777 | geekspot: soon!

ARTIKEL PENDIDIKAN INDONESIA said...

most of this post are new for me. thanks

Ray The Money Man said...

Great Post. So much of this is new to me and I surely appreciate it.
Thanks!



http://thealternativeenergyinvestor.blogspot.com

Jagan said...

Dugg the post.
That's a great help.

Hey.. can you please help me out. I have a problem with my template i guess.

Few particular links in my blogger label section are not working.
The page opens for 2seconds but reloads a blank white page.
What could be the problem..? Help me out.. please.

e.g: http://jagan123.blogspot.com/search/label/jntu-online-papers

Thank You. I know this is off topic. sorry.. :)

Vin said...

Great article! I wish I came upon this when I was using blogger. Now I am using wordpress, and I doubt I could go back.

Very good stuff though!

Tarih Online said...

Harbiden de Great Post ! Thank You Antonio Lupetti !

Fede777 said...

Any word on price or WordPress version???

Cory from Dental Heroes said...

Hi Antonio,

Great write-up. I don't use Blogger, however. Just curious why you chose Blogger over Wordpress. They're not really in the same league. Wordpress is much more robust and the third-party application/plugin developers go on for days. I respect your opinion, so I'd love to hear it.

ERsin HAN said...

Here is an another usefull article for webloggers. I tried to blog description for Google.

By the way i saw that you change your RSS style. I prefer to see your article fully on my RSS reader.

Lam Duy Nguyen said...

greate tutorial from you. i have one blogger layout from yours tutorial.
Thanks !

Imeily said...

Very useful tips.
Thank you for sharing.

Sueblimely said...

Thanks Antonio, I either did not know or had not thought of any of the points you write about here - really useful. I am adding this to my regular 'news' post.

stfalx said...

Thank you, Antonio, you finally made the tutorial i requested. Have a nice day.

Bibin said...

great post. I am using flock browser and your content in main section is overlapping towards sidebar. Is it a problem with the browser. In mozilla also the same problem. May be something wrong with my computer. Whatever, I always like your posts. I have to admit I used to love ur earlier template more than this. Maybe because human minds are not so enthusiastic of changes.

MEDICINEFEED said...

great post
although all the comments thing on blogger quite annoying with going to a different page.

please add a print option to your posts. (-:

thanks fot the post, dugg it.

andres moreno nail said...

belllísssimo...!

Christyawan said...

Good tutorial. and Love you blog design, It's great.

genny said...

thanks for the tips it really works thanks a lot...

Matt Thompson | Mattheosis said...

I appreciate this article and was referred to it through a recent article placed on Entrecard. Excellent stuff. I will have to implement what I am lacking.

Respectfully, Matt Thompson | Mattheosis

Editor, The SciTech Journal said...

God! I'm learning a lot of things from you. Title and meta descriptions idea is really great. I have implemented it and have received good inclusion of description like yours on Google too... cool!

Andra said...

Thanks for your blog. I stumbled upon it while looking for blogger tips and there are so many here!

I've just created a link and posted a credit to you on my blog andragy.com.

Please keep up the hard work so that I can reap the benefits, regards, Andra

Antonio said...

Hello Antonio!
really nice your site. I'm triyng to create my personal template but if I heck "expand widget models" option, when I put my code in to blogger, my template not work. Where is my errors? Sorry but i'm a newbie of blogger.

Ti volevo dire se posso tradurre qualche tuo tutorial e pubblicarlo nel mio sito, in italiano, naturalmente citando autore, link dell'articolo e link del tuo sito.
Se ti va fammi sapere, ti ho anche come amico in facebook.
Ciaoo e ancora complimenti per l'ottimo sito e i tuoi ottimi tutorial!
Bye

Shafar said...

Very nice tips

Open door to everyone... said...

Super tricks I've seen. Anyway, m a bit disappointed to not see some of your blogger templates for downloads. If this happens, your template will be the most dynamic in the Blogger world.

PS: And the comment form as well should be under the post :)
Thx for the tips

Helga said...

Ciao. Sarei interessata a realizzare il tuo tutorial per disegnare un blog usando Blogger; hai la versione in italiano per favore? Grazie. Helga

punyaNEWBIE said...

wow, great post. thanks, please visit my blog then give a comment :)

Down To Earth said...

Hello Woork,would you plz describe how to design custom categories more clear? Your way will make it look like more professional,but I really don't know where to start to add those codes,to add to a web elements?or add to the CSS code of Blogger? and how could it become 2 columns and how to add the arrow and underline bofore each category?I really wanna to use this design...plz teach us more clear to make it...thanks lots!

Ikmal Ezzani said...

i always wonder about that subtitle. Thanks a lot Antonio.

You're the best blogspot blogger ever. Good job.

bloggerstop.net said...

These tips are realy great...thanks for sharing them !

Marce said...

Nice article !!

Thanks!

Anonymous said...

Hi,

great post as usual..

I have one question for you:
how can I get the post number in a page? is it possible?

Thanks

Anonymous said...

Thankyou very much. Just what I needed. 8~)

Anonymous said...

I aim to use Blogger because I can't figure out Wordpress...so this is very useful info. Many thanks.

Author said...

Hello.
Could anyone tell me how to add a comment feed to blogger?
I follow the tip on putting recent post, but can't find out how to do it for recent comments. I don't have comment on my blog yet since I am building it right now. By the way I can seem to make the post a comment work at this time. Any sujection about that?
thanks.

Arribadown Teatro said...

antonio, para mi estaria más comprensible en castellano. mi ingles no es muy bueno. ¿puedes ayudarme?
Gracias.

ProfessionalLab said...

Hi! I am having a problem whenever I add this div class="subtitle" to my post.
Extra division border appears.. Check out this post, see above 2 division border http://professionallab.blogspot.com/2008/12/professional-blogger-makes-over-5000.html
Need your help.

Anonymous said...

Thankyou! This one is a saver.

COMPUTING UNLEASHED said...

This is one of The best Post that we could get. Excellent work!!!.

ZePernawacTeam said...

Thank you very much for your blog and your great tutorials !

ShadowS

web development said...

great post. thanks for the post.

Manish Ahuja said...

Excellent is an understatement. I just visit your blog once and I'm a fan already. I hope my blog impresses my readers the way your blog impressed me. Thanks for some really helpful suggestions in this post.

basu said...

Useful info

DEEPITH JAIN said...

Hey, could you help me in SEO ?
Actually, you have different meta contents and different meta tags for keywords for each of your post pages.How is that possible with blogger ?COuld you guide me in this.I'm in your need please help me

$UG@R said...

this is very useful post
millennium2k.blogspot.com

NAJWA said...

NICE BLOG...THANK YOU FOR THE INFORMATION

Dat Tai said...

Useful post
Thanks

  • Twitter Follow woork on Twitter
  • RSS Feed Subscribe to stay up to date
  • Podcast Coming soon...
  • 0 delicious lovers save
Share your links. Do you want to suggest any interesting link about web design or tech news? Submit your link.
Submit a News