Blogger team tried to make their product easier to use and custom for all users with Template Design function. If you want small changes in fonts, background, layout..., this function can help. But if you want more to make your blog look like a professional website? It's time you need to learn structure of blogger template, APIs, javascripts ... to make a custom template. This serie: “How to make a Blogger template” will take you step by step to creating your own. I will try to make it short, simple and easy to understand, hope it helpful for you .
----------------------------------------------------------------------

Chapter 1   Blogger Template Structure

Chapter 2   Template Header

Chapter 3   Template body and API's

Chapter 4   Inside widget - "Includable"

Chapter 5   Blogger data tags 1

Chapter 6   Blogger data tags 2

Chapter 7   How Blogger widget work

Chapter 8   General steps of making a Blogger template

----------------------------------------------------------------------

CHAPTER 8:   GENERAL STEPS OF MAKING A BLOGGER TEMPLATE


This is the last chapter of series 'How to make a blogspot template'. In this chapter, as a blogger user, I want to share my experience in making Simplex's templates: working order, tools, tips. I won't focus on HTML/CSS /Javascript because you can find documents on these issues easily. I do not tends to go further on Blogger template structures/sections/widgets/data tags/API, because they are mentioned in previous chapters.

Unlike other platforms such as Wordpress or Joomla which a template comes with many files, blogger template is in one file xml only .
As we know, Blogger template contain sections. Here is the order of these sections:

  • Header
  • Blogpost
  • Sidebar
  • Footer

All we need to do when making a template:

  • Place sections and widgets in right order. Add/remove sections /widgets
  • Add HTML arround these sections, and use CSS to decorating them.
  • Add javascript/jquery for special effects, get the feeds and mashup homepage.

1, Place sections and widgets in right order

Blogspot is made up with sections, widgets... so you have to place them in right order, add more sections /widget for the function you want and remove unnecessary sections/widgets .
For example, in Simplex Blognews template, I add more sections for page list ( in the top of page ), sections for advertising banner ...remove default sections and widgets in sidebar.
I also use conditional statement <b:if> to hide sections/widget in some specific cases. For example ,we all know blogpost widget show the post list /single post (see chapter on blogpost widget here), but in the homepage, I don't want it to show up, so I use a conditional statement to cover all blogpost widget:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
homepage content
<b:else/>
blogpost widget .....
</b:if>

In the code above, if the current page is homepage, it will show homepage content, if the current page is a category page or single post, it will call blogpost widget for processing content.
Or if we want to hide all the blog content when go to a specific page, we can use a conditional statement like that:

<b:if cond='data:blog.url == &quot;page url&quot;'>
.....
<b:else/>
other content here
</b:if>
By add/remove widgets and place them in right order, we have the frame of a template.

2, Add HTML and CSS around sections/widgets

We have a template's frame with sections and widgets, now we need to add more HTML tags around and decorate these HTML tags with CSS to make it display as we want: images, text, fonts  ....You can do all in this step.
Firebugs is the best tool for this work, you can find the post on how to use this tool here. It will reduce your time on working with CSS and HTML. You can use this tool to inspect elements on websites which has design you love and find out which HTML/CSS their designer used. CSS tags information and cheatsheet can be found in this post.
To get some inspirations, you can go to template galleries, collections, or go to famous blogs on design. Sometimes, combining the elements which you love from different templates can give you an unique design.

3, Add Javascripts/jquery

Because blogger doesn't allow server side programing, Javascript/Jquery give us the solution for mashing up a homepage. By using Javascript to get feeds from categories in blog, split the feed into post titles, post summaries ...and then display them, we have a good homepage, as you see in Simplex' templates.
Javascript/Jquery is also used to make special effects, for example, sliders, hover buttons, menu ...
You can find out more post on using Jquery/Javascript in SimplexDesign blog.

That's all steps I applied when making a template and it works for me. I can't tell you how to make a specific template, because it's very long and take times. I hope with series 'How to make a blogspot template' you can:

  • Understand the basic of a blogspot template, structure,what it contain.
  • Functions of sections /widgets,how they work. Meaning of data tags/Api and statements.
  • General steps to make a template,what we have to do ,what we have to search in google for making an elements ....

By reading all 8 chapters,I hope every time you see the code of Simplex templates, you can understand what I did, and then make your own customization or apply in making your own template.
It take time to search, read and then apply to make a template. It's not easy. But if you want, you can do it. Thanks for your time.

Share this post

Advertisement

19 comments

  1. Good job, thanks for sharing this

    ReplyDelete
  2. I like your post since I came in here. Thanks

    ReplyDelete
  3. Dear Nhamngahanh,

    I've got some problem with The Simplex Transcript, some part of my site doesn't work, I think 110mb.com is getting mad again, I read your post on Facebook: I can download javascript files in your blog and uploading in my host, but under the link (http://simplexdesign.blogspot.com/2010/09/important-annoucement-update-javascript.html) I don't find the Javascript files of Simplex Transcript. Can you help me? My site is: www.endre.info
    Thank you

    ReplyDelete
  4. Great idea!

    Pls. visit this classied site and post free ads!
    http://adsclassified.biz/

    ReplyDelete
  5. I always comes back on this site. Thanks for this very helpful post! Hope you make a post that how to create a blogger template step by step on header, blogspost, sidebar, footer and more. Thank you so much! :)

    ReplyDelete
  6. Hi... you can see your template on http://share2vn.blogspot.com
    Hi... thanks for share

    ReplyDelete
  7. Blog bác có mấy cái Template mà em cực kết :) (cái nguoiaolam.net)

    ReplyDelete
  8. hi u r tooo cool men
    and your templates r coolest

    Q. how to make tab you have made in http://simplextranscript.blogspot.com/-[priBotTab]

    how to convert it like tabs in this theme{http://demo.theme-junkie.com/forester/}
    on home page at mid of theme

    ReplyDelete
  9. HOW TO INTEGRATE BLOGGER DEFAULT LIGHTBOX IN YOUR TEMPLATES

    With your templates google default lightbox effcts are not working

    ReplyDelete
  10. thanks..! i dont think any other blog has ever posted something like this

    ReplyDelete
  11. Thanks for the information you have provided so as to assist me in editing the template on my blogspot. I hope you always give very useful information for bloggers

    ReplyDelete
  12. Can you make tutorial (explain) how to make automatic "Rss/feed" Featured slideshow .. ??

    ReplyDelete
  13. I love your template,,, so simple and white,,,,

    ReplyDelete
  14. nice post, thanks fo sharing it with me

    ReplyDelete
  15. thanks for the post. I was wondering how to create a template of fixed headings since I rarely post pics. but i guess your links(haven't read them yet) will provide more on that. I'll check out it later when I have time to tackle CSS(not so keen on that).


    Waletbet Promo Bonus 100% Sportsbook dan Casino Online

    ReplyDelete
  16. thanx a lot for your nice blog templates feel free to visit my blog:http://kaplanmedicine.blogspot.com/

    ReplyDelete
  17. Very good tips admin,thanks a lot for creating post like this,i want to create template for my blog called QUIZVOOK using with this trick.

    ReplyDelete

Here are some rules for commenting on Simplex Design blog :
1, Search first ,then ask question. You will get the answer faster
2, All comments except spams are welcome.
3, Please make all requests in English.
4, Do not use generic titles such as Admin or Mod. This confuses readers