Saturday, April 12, 2014

How to Create Your Own Blogger Template - Basic Blog Structure


      I had a great research on understanding XML tags used in blogger/blogspot. I searched through the internet to find a single and informative article, book, website or any forum which has complete explanation and guide to blogger/blogspot coding. But all in-vain. So I decided to study whole blogger help provided by google in several different pages. It had taken a lot of time of me, but I succeeded. Now after a great study I'm giving you the few most informative and important snippets for blogger design. It covers approximately all essential training for blogger/blogspot design.

WHAT YOU SHOULD ALREADY KNOW



  • HTML
  • XML
  • CSS
      As you already know that blogger/blogspot is A very big platform powered by google. Since it supports XML(eXtensible Markup Language), so all of your coding will be according to XML formatting or syntax with addition to some new tags supported by google.

BASIC STRUCTURE (Sketch)


      Please pay attention to this sketch. It explains the basic structure of blogger page. Don't be panic. Further explanations are given just below the sketch.



Yellow: It is the body of your blog
Grey: It is the outer wrapper of your blog
Light Blue (Top): It is the header of your blog
Pink: It is content wrapper of your blog
Red: It is the post area of your blog
Green: It is sidebar of your blog
Blue: It is footer of your blog

      I'm not a good graphic designer. But hope I can explain this trash to you.

BODY

      As you can see Yellow Colored Box is behind all other boxes. This is the main body of your blog and all contents, widgets and section are laid on it. Simply body is the whole screen which covers everything.

OUTER WRAPPER:

      Did you noticed there is also a box colored GREY? Yes there is a box of Grey color. It is the outer wrapper of your blog. It is the starting point of your blog. You can start creating sections (blogger support section tags) in this outer wrapper. Mostly HEADER, POST AREA, SIDEBAR AND FOOTER are wrapped by this box.

      Ø  Outer Wrapper
ü  Header
ü  Content Wrapper
ü  Footer


HEADER:

      Header is the most important part of your blog as you can take numerous advantages from this.

"Have you ever wanted to add sliding images to your blog"

      Yes you can use your header to add sliding images to your blog. Adding image slider is well practice. You can catch the attention of you visitors to you special posts or even you can use adds instead of images and mentally force visitor to click on the slider image (ads) to earn more and more bucks.

CONTENT WRAPPER

      Oooppss!!! Again something tricky in this sketch. Where the content wrapper comes from? Actually I want to you to pay attention on it. There is another box colored pink, which is behind the Post Area and Sidebar. Don't worry, it is just another wrapper to keep your post area and sidebar separated from Header and Footer.

      Ø  Content Wrapper
ü  Post Area
ü  Sidebars

FOOTER:

      At the bottom of your page you have your footer area. You can add widgets in this footer e.g (About, Contact Us and Credit Links).

      You have understood the basic structure of blogger page. Now it would be easy to you to create your own blogger page with your own customization.

No comments:

Post a Comment