How do I start creating a Blogger template?

Labels:

Prologue

As long as I could remember, I always wanted to have a blog designed by myself. So I tried multiple solution such as Wordpress, Drupal, Blogger, etc. The manuals were wrether too long or... really hard to find. I got really attracted by the simplicity of Blogger's interface and the fact it can serve as a host. So I decided to go on with this tool!

Thanks to TK who wrote the main article couldn't have dont it without his kind, open, contribution.
This post is based on a another one written by TK. What I wrote is more condensed and simplified.

    Before you start getting too excited, it has to be clear to you that this kind of manipulation requires a certain amount of understanding, so patience isn't an option. You must be quite confident in your HTML skills and CSS. I can surely answer your questions but I am no teacher. I am here to relax, not to stress out!
  1. Preparations
    2. You cannot 'tweak' a subject if it does not exist. So, You will have to create it. Create a Google account, if you haven't yet and keep it simple: choose the 'Simple Template'. The instructions are self-explanatory enough so don't worry. Once all that is done, congratulations! Your blog is ready to be tweaked.
  2. Strip it
    3. If it looks bland, get ready for more! Before we start remodeling this website in your image, you will have to move all the distractions away! It's a long way to go, but I am here, so don't panic. On the Blogger Dashboard, click on the blog concerned. Now you are your blog's Dashboard. On the left you can find a series of sections. Go on Template and click "Edit d HTML". Once you are there you will be submerged by Bloggers' generated HTML. Replace all of the code by this new one: 
    
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
  <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
  <b:if cond='data:blog.isMobile'>
    <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
  <b:else/>
    <meta content='width=1100' name='viewport'/>
  </b:if>
  <b:include data='blog' name='all-head-content'/>
  <title><data:blog.pageTitle/></title>
  <b:skin>
  </b:skin>
</head>

<body>
  
  <b:section id='header' class='header' maxwidgets='' showaddelement='yes'>
  </b:section>

</body>
</html>
    This may be the most simple Blogger template EVER. You may have already noticed but you can preview your blog's appearance with the orange button above the text area where your are editing. Now we have both witnessed the most bland Blogger template EVER - A blank page-. Let's take a small study break.
  3. Basic Blogger anatomy
    4. Now, we have a plain white page. How do we add the content? Well, we will have to add gadgets and sections. What are these? Well, this section will condensly talk about that.
    Blogger manages your content. If you are here thinking you can program blogger like a PHP dynamic website, well you can't. That's Blogger's job. Not yours. The magic of this is that you will have more time on posting than coding. The only tricky part (in my opinion) is the cutomization.
    TK explains in his article that there are two main things: sections and widgets. Take a look at this:
    By TK
    TK here shows us what are sections and widgets. He shows us that sections just wrap around the widgets to organize the blog. Like a book shelf. Then what are widgets? Widgets are modules, like puzzle pieces. For example, if you want to display your list of labels ( a.k.a topics, like in here). What you do is simply put the labels widgets in the concerned section of your blog. And voilà!... Well not totally. But first insert this code here in the body tag:
      <b:section id='header' class='header' maxwidgets='1' showaddelement='yes'>
    <b:widget id='Header1' locked='true' title='Testground (Header)' type='Header'/>
  </b:section>

  <b:section id='main' class="main" maxwidgets='' showaddelements='yes'>
    <b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>
  </b:section>
    This code actually adds the widgets HEADER and BLOG. Now, Your blog will display the HEADER and BLOG posts.
  4. Adding widgets
    5. You can add widgets by HTML (just like in the previous section) or with interface:
    Your blog's Dashboard/Layout/(in the interface)Add widget.
    As simple as that.
  5. The adventure starts and tips
    6. This is where I stop but I am not abandonning you! You now have something wonderful! You have a blank page on which you can extend your personality. You can easily apply your CSS and structure your blog with HTML. Before you run off and code HTML/CSS, I advise to not over-tweak what Blogger printed in the HEAD tag. Mind your business in the BODY tag and just add what you need in the HEAD tag. Don't hesitate in adding DIV tags to arrange your blog the way you want to (but don't over-do it). If you are a good coder you will name your classes correctly and give those names a meaning:

    [class="potatoChocolate"] != [class="myNotificationWrapper"]
    also
    [class="potatoChocolate"] < [class="myNotificationWrapper"]
    You code the way you want but there is no way that editing your CSS will be easy if you don't name your classes/id carefully.

References

No comments:

Post a Comment

Subscribe to: Post Comments ( Atom )