Your Ad Here

Tutorial 2: The Structure of a Blogger Template Code

Here's what the structure of a Blogger template code looks like, in a simple way of looking at it. I'm using my Generic Blogger template as a reference, but the idea is the same for other templates also. I've separated the code in 3 sections and show only the top lines of each section so you can look for the starting lines later on.

To see more of these codes in detail, download my Generic Blogger Template.

Section 1:

The 'header' of the code. Basically it contains important information about the template code and the title of your blog. Best of all, you don't have to worry about anything in this section. It's a standard header for all templates. The only time you add some codes here is when you want to put some meta tags (additional information about your blog for SEO).

Section 2:

This is the CSS Styling Section. CSS stands for Cascading Style Sheets, a web language used to control the style of a HTML document. This is the section that you want to know the most if you want to modify your existing template or design a new template. Eventhough it is a web programming code, you can still do a lot of things on you template design if you understand the structure of this section without knowing much about HTML and CSS. We'll get to this part in more detail later.

Section 3:

This is the Body or Data of the code - the most important part that fetches all your content from Blogger database and puts it in the right place into your blog when somebody is looking at your blog. This is also the section that tells your blog which part comes first - the Header, Sidebars, Main, Post, Footer, etc. But it doesn't set the appearance of the blog and how it would look like on the internet (because that part is controlled by the CSS styling section).

You basically don't have to worry much about this part too, just like the 1st Section. But you will have to know a little bit about this section if you want to start adding extra widgets that cannot be put using the Add Page Element button, like the social bookmarking buttons - Digg, AddThis, RSS buttons; or if you want to put Adsense codes in special places like in the Post Page; or putting Google Analytics code to track visitors to your blog; and many other things. Most of the time, there are easy instructions already available to help you add these things in your blog. So, again, nothing much to worry about in this section.

Tutorial 1: The Structure of a Blogger Template

Before designing a template, you must have an idea of what the basic structure of a template is. Generally, the actual structure of any templates are not exactly the same. But, by knowing the basic structure, you can easily get the ideas of how to tweak your existing templates, design a template, and how to change it into a different structure.


Some parts of the template structure are obvious from what you can see on most blogs: the headers, footers, and posts sections. But there are some sections (I'll call these sections blocks or containers afterward) that are not visible on the computer screen, but important HTML-wise to build a practical and proper working template.








Going from the biggest to the smallest blocks:

  1. Body: the outer most block is the Body of your template (basically everything that the computer screen covers).

  2. Outer-wrapper: this container covers your whole template (the body is more like the outside of your template). In general, you build a wrapper to place a multiple of smaller blocks inside it. The most common blocks inside this Outer-wrapper is the Header, Content, and Footer.

  3. Header: this block is the top most part of your blog (the name is quite obvious). But inside the Header you will have other sub-blocks too - the Header Title block, the Header Description block, and others such as the Adsense banners, a menu bar, etc. So, to wrap all these sub-blocks inside one large container, the largest container in the Header section is usually a Header-wrapper that wraps everything inside.

  4. Content: below the Header is the Content-wrapper - basically the most important container block of all. Immediately inside this wrapper are the Sidebar containers (1,2 or any number of sidebars) and the Main container (which contains your posts, comments, or some ads).

  5. Footer: is the bottom most container of your template. As in the Header section, you'll also need a Footer-wrapper to contain other sub-blocks in the Footer section.

  6. Main: the Main-wrapper is the outer most container in the Main section which goes inside the Content-wrapper. Inside this Main-wrapper are the Post block, Comment block, Date Header, and other widgets created from the Add Page Element option.

  7. Sidebar: is the block that contains all your side widgets - About Me, Labels, Archive, Text, HTML, Adsense, etc. In a standard Blogger template, you will usually find only 1 sidebar - hence the 2-column template (Main and Sidebar). But it's actually easy to add multiple number of sidebars. The most common ones are 2 sidebars - or the 3-column template. You will see from these tutorial series that once you understand the template structure, it's actually easy to add and move the sidebars to the left or right of your Main container.

  8. Blog Post: this block contains the important stuff - your Posts Titles, Post, Post Author, Labels, etc.


One other way to see this structure is from the hierarchical point of view. Starting from the largest container to its sub-containers, the structure looks like this:




  • Body

  • Outer-wrappe

  • Header-wrapper

  • Blog Title

  • Blog Description

  • Other widgets


  • Content-wrapper


  • Sidebar-wrapper (1,2,3...)


  • Main-wrapper

  • Date Header

  • Posts

  • Post Title

  • Post Content (or called Post Body)

  • Post Footer (Author, Labels, etc)

  • Comments

  • Feed Link

  • Other widgets (mostly ad units)

  • Footer-wrapper

  • Footer text (disclaimer, copyrights, etc)

  • Other widgets


Once you understand this basic structure, it'll be easier to start learning about the structure of the Blogger template code. Learning the code structure is not about learning HTML or CSS, but more about how the template code is organized, which is pretty much like how the container structure is organized. It's surprising that even with little knowledge on web programming, you can customize your template quite a lot just by understanding the basic structure and some CSS language.

Blogger Template Design: Introduction

This tutorial is a very quick guide to teach you how to change or design your own Blogger templates. It's easy to understand and follow, especially to those who has no knowledge in HTML programming.

The tutorial is split into a number of sub-tutorial modules that explain specific parts of Blogger template design in detail. The best way to learn is by going through the module sequence one by one. But if you are familiar with the basics, you can jump into the more advanced modules. The earlier modules are focused on explaining the basic structure of the template design and the template code so that you understand more about a Blogger template in general. The later modules explain each section of a Blogger template in more detail and help you go through the process of coding and designing a template in a step-by-step approach.

n the tutorial, some of the names and terms are based on my own template design, but I'll explain them as general as possible so you get the bigger picture and can adapt to different template designs.

Tutorial Contents

  • Tutorial 1: The Structure of a Blogger Template
  • Tutorial 2: The Structure of a Blogger Template Code
  • Tutorial 3: The Structure of CSS Styling SectionTutorial
  • 4: Setting the Properties of a Container
  • Tutorial 5: Common Containers and Elements in a Blogger Template
  • Tutorial 6: Using the Generic Blogger Template
  • Tutorial 7: Setting the Template Size
  • Tutorial 8: The Body Section of the Blogger Template Code
  • Tutorial 9: More Explanation about the Body Code
  • Tutorial 10: Making a 3-Column Template and More ...
  • Tutorial 11: Starting Your Own Blogger TemplateTutorial
  • 12: How To Embed Images as Background

Rss Feed

Now you have your own website.So you will not be wanting to miss the opportunity to start earn online.But you can start only when your blogger start getting traffic to read your post so for it you have to post very useful articles to it that readers love to read and read it daily by subscribing to your blog, as to start of with getting traffic you have to work hard to bring readers.Join Rss feed to read other blogs and yours blog.Sign up with feedburner.com.Start of from step to step and read my posting regularly to be succesfull as all the best you will be getting from this blog . I promise my all readers to get best from me.Follow my other postings too to earn money online from blogging.

Free traffic for your site

Now i will tell you the secret for free traffic to your site that pays nothing but just as link exchange of link adds to get free traffic.This system works four times.How i will explain you now.If you are new to blog then its good for you to start because you get nothing for free.Register for Adsvert.com they will give you link adds to place on your site just adjust them to your site looking.How it Works?
If you pace one adds lot of 4 adds on your site they will 4 impressions of adds.they will ask you to create an add fr your blog too just make it and submit it to them.Now If your site get 50 visitors you will surely get 50*4 =200 impressions.Now advert will give you 200 targeted visitors to your adds just for free.This system brings 4 times your traffic,it sounds good.So Don't miss an opportunity to try it.Special offer:-Get 2500 free Visitors On sign Up!!!

Generate Traffic from Myspace step 1

Myspace.com is the largest social networking or web 2.0 website with over 1 billion members in their database and their membership is continued to grow steadyly. For people who want to socialize online, it is definitely a great place to make friends, share your content and build your own groups. But for Internet marketers, webmasters and bloggers it is a great tool to.....generate free targeted traffic and make more money online. So, how Myspace can be used as a marketing tool to generate targeted traffic? The below step-by-step instructions will show you how:

Step 1:Obviously the first step is go to Myspace to sign up an account. Once you have set up your Myspace account successfully, you proceed to login and you'll see the following main features:
Edit Profile
Account Settings
Add/Edit Photos
Add/Change Videos
Manage Calender
Manage Blog
Manage Address Book

Edit ProfileProfile is one of the most important myspace marketing tools you can use to promote your website, blog or online business. Clicking the 'edit profile' link will allow you to add details to your profile and make it searchable by the 'friends', e.g. the people or niche group you want to attract on Myspace. Here are the options available to customize your profile:
* Headline
It is the place to add a title to your myspace profile page.
* About Me
This is the section to add details and information to promote your website and blog. It is important not to make your about me section read like a blatant sales page as this against Myspace rules. You can start introducing yourself, What you are doing, your area of expertise, tell about about your website, blog and business, some descriptions about your site and blog, share your knowledge, experience and so on.Myspace allows HTML code in the about me section. So add in some images, graphic, features to make your page look more interesting. You can even change your layout and background using one of the Myspace editors at http://www.strikefile.com/myspace . Keep you Myspace page looks clean and neat.
* I'd Like to Meet
This is the section you tell people who you like to meet. You should focus on finding friends that have interest on your website and blog content, and your products and services.
* Interest, Movie, Music......
Let other know more about you by telling them about your interest and hobbies.
Add/Edit Photo
You need to upload your own photo onto your MYspace page to make friends in Myspace. It will make your Myspace profile a little more interesting and people are more likely to approve your friend requests if they can see your face. Pick the best photo to upload.The rest of the features you can choose not to use. But they can help in your Myspace marketing if you use them.

Generate Traffic from Myspace (Part 2)

Step2

Grow Your Friend List. Your friend list is the key to succeed in Myspace marketing. You need to make as many friends as possible. You are going to look for friends that have interests in your website and blog content, or your product and services. This is the first challenge in your Myspace marketing.

Tips and Tricks for Growing Your Friend List Faster
1) Search for Myspace users in your niche and.....add them as your friends.
There are plenty of groups created in Myspace, look for groups in the categories related to your niche , visit these groups and add them as your friends.

2) Visit other Myspace users profiles that also market the same niche as your. They should have built a friend list, add their friends as your friends too.

3) Use Myspace trains like makeatrain.com and Myspacetrains.com to grow your friend list faster. If you have never heard about Myspace trains, they are websites with a specific program code allowing people to add their profile to a chain which will be seen in all bulletin board on the different Myspace communities.

4) Whoring. What is whoring? Here's an explanation how it works:- You partner with a Myspace marketer in your niche, request the marketer to send a bulletin message encouraging his/her friends to add you as friend.- In exchange, you'll do the same for the Myspace marketer.

Step 3

Drive traffic to your site or blog from Myspace and make money. Once you have got a lot of friends, you can start sending your promotional message using bulletin. Your bulletin message shouldn't directly promote your site or blog as it will not work.

You can post bulletin to notify your friends when you have written a new blog post, posted an interesting news on your blog, added new helpful tips and articles on website, organized a contest and ask them to visit your site or blog to find out more about the contest and any other ideas you can think of. This ways your traffic will increase and so as your AdSense revenue.

Tips
- Make you bulletin message interesting and fun to read.
- Don't just make your bulletin message about marketing. Occationally you can send something fun such as a joke or a brain teaser.
- If you want to sell your own or affiliate products to your targeted friends, you need to figure out ways to draw your friends to your sales page using bulletin.

Free Ways to Increase Your Blog Traffic

1) Comment on BlogsLook for large traffic Blogs in your niche, visit them and leave your comments on their blogs posts. You may use blog search engine like www.blogsearchengine.com, www.google.com/blogsearch and www.searchengineblog.com to find blogs in your niche.

2) Submit ArticlesWrite articles that are related to your blog and submit them to popular article directories such as..... ezinearticles.com, Isnare.com, Articledashboard.com, Articlealley.com and goarticle.com. Quality articles may drive you a lot of free targeted traffic.

3) Participate in Community ForumsUse google to search for forums that are related to your blog. Look for forums that has over 10,000 members and read the rules of the forums to see whether you can promote your blogs and websites in your signature. Join forums that allow you to add a link to your blog in the signature and start participating in discussion. You can ask questions, answer other members questions and post your articles, ideas and thought in the forums.

4) Submit Your Blog to DirectoriesThis isn't working to me but some bloggers claim that they gain a good amount of traffic from their listings in directories.

5) Post OftenYou can lose traffic if you seldom update you blog, try to make it at least 5 posts per week. This not only will maintain your traffic but possibly attract more readers.

6) Write about BloggingWrite helpful and quality articles related to blogging can attract other bloggers link to your articles and gain may be truckload of free traffic.

7) Post Breaking NewsIf your found a breaking news of your niche very earlier, post it to your blog. It may give your blog's traffic a boost.

8) Social BookmarkingBookmark you blog posts in the large social bookmarking sites like Netscape.com, Digg.com, Simply and Reddit.com.

9) Run a ContestStart a contest on your blog. Think about the prizes that people really want. It will create a viral effect and bring in new visitors.

10) On-page OptimizationMake sure your blog's title tag and description tag contain your targeted keywords. When you have posted plenty of quality blog post and done a lot of blog promotion, don't be surprise to see your blog ranks top 10 in Google and get free search engine traffic daily.

Grow Your E-mail List

The greater your opt-in email list, the more sales you will generate and the more money you will make online. Below are some of the ways you can use to grow your list effectively:

1) Offer freebies. Mention in your opt-in form that your visitors will receive free e-books, report or tools if they subscribe your newsletters or e-zine. The subject of your e-book or report should be related to your targeted visitors.

2) Create a series of e-courses of your visitors interest and invite them to sign up the e-cources by filling out a web form in your website.....

3) Run a contest or sweeptakes on your website. Request your visitors to provide their name and email addresses to participate.

4) If you have a membership site, you can offer your visitors a free access to your membership site if they sign up your newsletter or ezine.

5) Offer free ads. You can set up a free classified section on your site. Anyone want to post free ads must give their contact information to you first. Or offer your visitors free advertisement in your ezine if they subscribe your newsletter.

6) Publish testimonials from your current subscriber to encourage more people to join your newsletters or e-zine. You don't need to publish the testimonials in your home page. What you can do is add a text link like "Click Here to Read the Testimonials of Our Current Subscribers" just below your opt-in form in your home page. When your visitors click the text link, they will be sent to a page that contains all you subscribers testimonials.

Get Video Traffic

Just want to share with you a free online video marketing tool called Video Traffic Assistant. As you know, videos are getting more useful in Internet marketing. They can be uploaded to video sharing sites and generating free traffic for your e-commerce sites and blogs. Traffic video assistance is a video submission tool that will make your video marketing campaign easier. The tool can submit your videos to 9 most popular visited video sharing sites by clicking a few buttons, save your a lot of hard works on typing and video sites navigating.

Increase Your Website or Blog Revenue with Online Videos

Are you using a website or blog to earn money on the net? If you are, you will be spending most of your time and effort on promoting you website or blog to get as much traffic or visitors as possible in order to generate online sales and advertisement revenue. Whenever there is a new traffic generating techniques, you will want to learn about it to find out whether it can increase your web traffic.

Speaking of new traffic technique, online video marketing is one of the newest techniques you can apply to explode your web traffic. Online video marketing is where you upload promotional videos to online video sharing sites to send the visitors who watch your videos in the videos sites to your blog and website.

Online video sharing sites are growing rapidly and very popular that their growth and popularity may be able to help you make your site or blog a success. Some of the most visited video sharing sites that host a huge collection of different videos are Youtube, Metacafe and Google Video. Many of these videos are considered homemade as they are made by people just like you.

When marketing your blog and website using online video sharing sites, there is one important thing that you need to know. Most internet users don't enjoy watching videos that appear as spam. So you need to try you best to make your promotional videos not to be too pushy.

Increase product sales with videos

If you are promoting or selling a product or service through a website or blog, you may think about showcasing that product or service. This can be done by showing samples of your work. Another idea is to tell people how long you have been creating the product or offering the services that you currently offer. This is to keep your video as general as possible and avoid your video viewers think that the goal of your video is only to sell your product. The only opportunity to promote your business is at the end of your video. Make sure you include your business, product or service information at the end of all your videos.

Increase advertisement and affiliate revenue with video

Video sharing sites aren't just benefiting to those who sell products and services on the Internet. For websites and blogs that make money with online advertisements (Google AdSense, YPN, etc) or affiliate programs, it is likely that the websites and blogs are content driven. Often these sites and blogs focus on a particular topic with a collection of articles related to their topics. So, if you have a content based site or blog, it may be a good idea to make a video providing information and even interactive displays on the topic that your site or blog covers, whether that topic is traveling related, weight loss, or something similar. At the end of your video, adding your blog and website address will help to gain more web visitors and increase your AdSense earning or affiliate commission.