Saturday, November 24, 2012

Blogger How 2 - Structure of a Blogger Template

Blogger How is Blogger Tutorial Series from How We Blog. In this series, I will guide you step by step building your first blog with Blogger, spread it to the world, and then you can earn money from it.

 Part 2 of this series:

Blogger How 2 - Structure of a Blogger Template


In this article, you will learn how to recognize each section of a blogger template. You will need that when edit html and arrange your widget.

Blogger Template and Its Components

Home page structure:

Look at picture below, this is basic layout for a 2 columns blogger template, every section is marked by a number.
A Blogger template layout
  1. Primary Menu: this menu is often used Link List widget to display link.
  2. Header: contain banner of blog name and description (if banner is not available).
  3. Secondary Menu: to change this menu you must edit in template html.
  4. Main wrapper: display post content. See Post Structure below.
  5. Sidebar: contain Blogger Widget. Each Widget is separate and you can edit/move/delete in Blogger Dashboard > Layout.
  6. Footer widget: similar with sidebar widget but different design.
  7. Footer: contains copyright information, author or other minor things.
  8. Floating widget (additional script)

A Post Page Structure:

There is something about Post page structure you need to know.
Structure of a Blogger Post Page
Structure of a Blogger Post Page
  1. Breadcrumbs: contain all labels that were added to the post. This is addition script from this hack.
  2. Post title.
  3. Post meta, include information about author, post date, categories (label), amount of comment etc.
  4. Post body (Entry content).
  5. Post footer.
  6. Blog Pager: include 3 links, Newer Post, Home and Older Post.
  7. Comment section.


1 comment:

  1. thank you so much for sharing i have a request plz can you share with good blogger template plz like you use in this blog i will be appreciate

    http://www.idealweiight.blogspot.com/

    ReplyDelete