Search This Blog

Loading...

Wednesday, April 19, 2006

Blogger template tutorial

Update: Blogger has updated their default template which uses LAYOUT. However, this post is still relevant for those using the old classic Blogger template.

Blogger template

A template is a set of HTML files which define the appearance and functionality of the blog. You can use the templates that are provide by Blogger, customize the provided template or write your own.

To access Blogger template, log into the Dashboard, select the blog, click TEMPLATE tab. You will see the template displayed in the edit template window. If you have already done some customization, it is a highly advisable to always backup your template. To backup the template, highlight ALL the text of the template, right-click and copy (or ctrl+C), paste into Notepad and save under a suitable title like dummies17april06. Saving a template has saved the woes of many a blogger.

The Blogger template has 3 main components - HTML (Hyper Text Markup Language), CSS (Cascading Stylesheet) and Blogger tags. HTML tags tell a web browser how to display the page. It is a good idea to have some knowledge of HTML and a good place to learn is the online W3schools. CSS control the style and layout of the webpage. You can also learn about CSS in W3schools. When you submit a post to Blogger, it is saved to their database. When you publish something, the Blogger tags tell Blogger publishing program which information to fetch from their database and put it on the webpage.

HTML

Here are some examples of HTML tags to give you an idea of what it is all about. The heading of this section was coded as <h3>HTML</h3>. HTML tags occur in pairs - opening tags like <h3> and closing tags like </h3>. If you look in the template you will see this block of codes:

<h2 class="sidebar-title">Links</h2>
<ul>
<li><a href="http://news.google.com/">Google News</a></li>
<li><a href="http://help.blogger.com/bin/answer.py?answer=110">Edit-Me</a></li>
<li><a href="http://help.blogger.com/bin/answer.py?answer=110">Edit-Me</a></li>
</ul>


<ul> and </ul> are the opening and closing tags for an unordered list, while <li> and </li> define a line of the list. This block of codes was put in the Blogger tag so that you can conveniently edit it to suit your wishes. You can easily replace http://news.google.com/ and Google News with an URL and description of your own. Similarly for http://help.blogger.com.... and Edit-Me.

You may want to customize your blog by adding stuff like HTML, etc, to the template. For more information on this, go to Blogger template tutorial Part 2.

CSS (Cascading Style Sheet)

The cascading style sheet is placed at the beginning of Blogger's template and surrounded by the <style> and </style> tags and it will look like something like this:

<style type="text/css">
/*
-----------------------------------------------
Blogger Template Style
Name: Minima
Designer: Douglas Bowman
URL: www.stopdesign.com
Date: 26 Feb 2004
----------------------------------------------- */


body {
background:#fff;
margin:0;
padding:40px 20px;
font:x-small Georgia,Serif;
text-align:center;
color:#333;
font-size/* */:/**/small;
font-size: /**/small;
}
.
.
.
</style>


*/ and /* surround things meant as comments (information). It is only meant for the person reading the template and is not taken into consideration by the browser.

body {
.
.
.
}

means that whatever is surrounded by { and } are properties of the body of the blog. For example, background:#fff; means that the background of the blog is white in color. You may change it by changing background:#fff; to, say, background:red;

To learn more about CSS, go to W3Schools.

Blogger tags

When you submit a post to Blogger, it gets saved into their database, and this is where Blogger tags come into play. Blogger tags tell their blog publishing program which information to fetch from the database and put on the webpage.

There are 2 main types of Blogger tags: item-level tags and page-level tags. Item-level tags are those tags that have the $ sign in them, such as <$BlogItemAuthor$>. The tags get the actual information from Blogger's database and put it on the web. <$BlogItemAuthor$>, for example, display the blog author's name.

Page-level Blogger tags deal with the design and structure of a page. They tell item-level tags when and where they have to perform. For example,

<BloggerArchives>
<$BloggerArchiveURL$>
<$BloggerArchiveName$>
</BloggerArchives>

commands that this is where the browser have to display Archive URL and the Archive Name.

To see an example of the placing of Blogger tags when the information from Blogger database is not fetched from the servers, see example

For more on templates, go to Blogger template tutorial Part 2.

Books from Amazon

Blogging: Genius Stragies for Instant Web Content by Biz Stone, former Senior Specialist on the Google Blogger team

Book: Blogging for Dummies

29 comments:

  1. Panda Gal7:36 AM

    wow! what a blog. highly impressed.

    ReplyDelete
  2. This is so helpful, I'll be adding your site to my list of links.

    I'm trying various of the advice here to sort out my side-bar slipping-to-the-bottom problem. Its a bit difficult as I use a Mac - my blog looks fine on firefox and safari (which I usually use) - the only version of IE I have is 5.2, which is obviously too out of date for getting a real idea of what other IE users are seeing - so I can try changes, but have to rely on friends elsewhere checking to see whether or not it has worked!!

    Any suggestions would be appreciated.

    (I've reduced the size of lots of pictures, have just tried increasing content width and main width, and will go back again to check for missing code tags, extra long titles etc.)

    ReplyDelete
  3. I have added some things to my sidebar and things were fine. Recently, I have found little lines looking like notebook paper in my sidebar. I have no idea how this happened (my fault, I'm sure.)
    I've googled this and no one seems to have an answer.
    Incidentally, very good advice.

    ReplyDelete
  4. This is really helpful, Peter. I will have to revisit this page when I remodel my website. Thank you so much for helping us out!

    ReplyDelete
  5. Please, where may I find instruction for adding my email address as a link in my blog's side bar?

    Thank you so much for any direction, much appreciated, Shelley Noble

    http://notesfromhalfland.blogspot.com

    ReplyDelete
  6. Hello,

    I am having some trouble with my blogger template. If you look at the top of the title bar there is a ">" that I cannot seem to get rid of. I was wondering if you had any suggestions? My site
    pisceslibrariana.com


    Thanks

    ReplyDelete
  7. Paste this eMail Me into the sidebar section of your template.

    ReplyDelete
  8. I have been trying to change the Blogger Template I have for a while but had no help. My knowlegde and experience is mostly related to html code and Frontpage. NOW I think I can make the next step...!

    THNX A LOT. YOU'RE AMAZING!!!

    ReplyDelete
  9. This is great thanks!

    I have just started yesterday. I am trying to figure out why I can't create an individual link to my second post - it has named it the same as my first! If you have a comment that would be most kind.
    Thanks again!

    http://withoutthef.blogspot.com

    ReplyDelete
  10. That's right yes! I am living within the confines of the template. I am trying to figure out the framework of the blog - that is - how it is presented; the colours, the shape, etc.

    ReplyDelete
  11. That's right yes! I am living within the confines of the template. I am trying to figure out the framework of the blog - that is - how it is presented; the colours, the shape, etc.

    ReplyDelete
  12. There're so many new things to learn from your blog! Wow, thanks a lot for these useful tips and tricks! I've made a link to your blog at my blog already. Hope it's fine for you. Have a good day and keep up the best works :D

    ReplyDelete
  13. Anonymous9:37 PM

    Peter,

    Thanks for the info on the image editor! That program is really easy to use.

    I have another question for you, and it should be an easy one. A lot of people have a list on the side of their blog called "previous posts". this is different from archives because it just lists posts by name. you have one on your site as well. it's not on the new blogger as a widget, and i can't figure out the html or whatever to insert! any help would be greatly appreciated... again!

    Thanks!

    Ryan Spies
    http://talesfromacardboardfort.blogspot.com

    ReplyDelete
  14. Have a look at this post and see if it does what you want: How to add a link list to your posts.

    Peter a.k.a. Enviroman
    Enviroman Says

    ReplyDelete
  15. Thanks so much for this tutorial! I've been looking for something like this for ages. I have a great handle on html/css, but the blogger codes confound me.

    Great work!

    ReplyDelete
  16. Hi! great help session provided by you.
    How to create a about me or other landing page which can link in the top navigation link?

    ReplyDelete
  17. Anyone knows what Michael wants?

    ReplyDelete
  18. Great! This is helping me make my blog the way I want it made.

    Thanks
    Jay
    whataboutphoto.blogspot.com

    ReplyDelete
  19. thank for your information. It's very helpful. I want to try it now on my My Blog

    ReplyDelete
  20. I think this tutorial helpful for the newbies because their are lots of information available to learn more about the blogger template. I hope you will be share more information in the future like this.
    Web Design Quote

    ReplyDelete
  21. I do exactly with just you wrote, and now my blog's looks is make me satisfied. Thanks man!! You can visit my blog. Well, what can I say? I'm a newbie blogger.

    Regards,

    ReplyDelete
  22. i've been looking for a tutorial to make my own blogger templates for a long time.i hope i may get it here.i have been using other free templates that did not satisfy my will for a long time.thx for tutorial.

    ReplyDelete
  23. This is an old post which may still be applicable to those using old classic Blogger template. I would suggest you go download a copy of Amanda's Blogger template eBook

    ReplyDelete
  24. Awesome! Man!!
    Check out my blog too..

    ReplyDelete
  25. can you do me a personalized blogger template? =)

    ReplyDelete
  26. Hi Gypsy Queen,

    I don't offer personalize template design but you can try Berries and Cream blog design which offers custom blog design.

    ReplyDelete
  27. your blog post is very useful for me.can you give me details how can i design a blogger template?
    i have a blog
    http://hollywood-qe.blogspot.com/
    HOLLYWOOD LATEST UPDATE

    ReplyDelete


Find topics by using the Google custom search box above which can search multiple blogs, or the SEARCH BLOG in the left corner of navbar. You can also find topics in the Label List and Categrories in the right sidebar.

For more information and special deals related to any of the issues on this page, place your cursor over the double-underlined links. All information supplied by Kontera.com.

Disclaimer: This blog has no relation with Wiley Publications