Starting Your Own Blogger Template

Now that you've gone through all the tutorials, you're pretty much ready to start designing your own template. In this guide, I'll show you the big steps that you have to go through to make a template the fast and easy way.

The first thing you need to understand about designing a template is that the technique of designing is unique and different between individuals. In the end, it's entirely up to you how you want to do it - if and only if you're familiar and have made a few templates yourself. But if you're just beginning, it's best to follow a step-by-step guide to expedite the process and so that you won't get lost.


Step 1 - Choose an already-made template as a starting point:

For beginners, the easiest and fastest way to start designing is by starting from an existing template. But don't do it with the intention of plagiarizing it! Read more in the sub-post Start Designing from an Existing Template.

Step 2 - Setting the number and location of your sidebar columns:

If you're a beginner, make sure you start with a template that closely resembles the template that you have in mind. For example, if you want to do a 3-column template, don't start with an existing 2-column template. Or, if you want to change or add more sidebars yourself, read more about how to do it in Tutorial 10: Making a 3-Column Template and More ...

Step 3 - Setting the width of your template:

The first thing you need to do after getting a starting template is to set the width of your template. To do this, you need to set the width in the CSS Style code. It's all explained in detail in Tutorial 7: Setting the Template Size. The common containers to set the widths are:

• body
• outer-wrapper
• content-wrapper
• header-wrapper
• main-wrapper
• sidebar-wrapper (or sidebar1, sidebar2, and so on)
• footer-wrapper
  

You can either set the width to be fluid (changes its width accordingly with the browser or screen size) or set the width to be fixed. Note that setting the width inside the container-wrapper can be a bit tricky because you have the Main and Sidebar containers in it. If the width is not set well, the Sidebars can fall below the Main container.

Step 4 - Build test objects:

If you're designing a new template, how do you know that what you're tweaking is right if you can't see the changes? So, what you need to do here is build some test objects - for example post 3 or more test posts that have a quote, a numbered list, un-numbered list, make lots of widgets to see how the sidebars look like, make sure you have some Labels to show up in your Labels widget, make some test comments to see how they look, and so on.

Step 5 - Tweaking the CSS code to customize your blog's appearance:

Here is where you start tweaking the CSS code to customize the basic layout of your blog and slowly refining it until you have the template that you want. It's a process that keeps you going back and forth re-tweaking codes because you won't usually get things perfect the first time. Read more detail in the sub-post Tweaking the CSS Code.

Step 6 - Testing in other browsers:

This step can get really annoying, but like they say, you've got to do what you've got to do. Read more in the sub-post Testing and Viewing in Other Browsers.

Step 7 - Using images as background:

If you're bored of using plain color, you can use nicer images as the background of the whole blog or the background of some of the containers (e.g. the Post, Sidebar, Footer, Header, etc). To learn how to do this, click on Tutorial 12: How to Embed Images as Background.

Step 8 (The Final Step) - Finalizing your template:

This step is like the proof-reading stage of your writing. You just need to go through one last step to double check that everything works fine and okay. Look at your blog carefully and see if some minor tweaking will make it look better.

Read more...

More Explanation about the Body Code

In this tutorial I'll explain a bit more about some special commands that you'll see in the Body section of the code. Here's the sample code again below:

skip to main |
skip to sidebar

By default, each container has to be wrapped with the div tag and a b:section tag. Each div and b:section is 'named' with an identifier using the id command. The can be further classified into a 'class' using the class command. This identification and classification are useful as a reference when you want to style it later using CSS. In the CSS code, the id command is referred to using the # symbol and the class command is referred to using the . symbol. For example, in the CSS code, you might see #main-wrapper {...} or .sidebar {...} which are the codes to style the main-wrapper and sidebar. You can read further about these identification and classification in w3schools.com

Everything wrapped inside the b:section are the widgets (also called the Page Element). For example, inside the Header is a widget named Header1. Note that this widget contains the code maxwidgets='1' showaddelement='no'. The maxwidgets='1' means that the maximum widget the header-wrapper can have is 1 only. That means you can't drag a Page Element and place it below or above the Header. The showaddelement='no' means that the Add a Page Element button will not appear in the Header section.

In the main-wrapper, you only have the showaddelement='no' code which means that you won't have the Add a Page Element button there, but you can still drag other widgets and place it above or below the Blog Posts inside the main-wrapper.

In the sidebar-wrapper, you have the preferred='yes' code. This command will create the Add a Page Element button for you to add widgets. Plus, you won't have any limitations on how many widgets you want to add. As you already know, you can always drag the widget to any other wrapper as long as they don't limit the amount of widgets to be displayed in that wrapper.

In the footer-wrapper, there's no code following the id command. This means that you won't have the Add a Page Element button but you can drag any widgets into the Footer section.

Read more...

TO INCREASE TRAFFIC

To make money from blogging demands you to have large traffic, and to have large traffic demands you to work on promoting your blog early on. Here are some pointers on promoting your blog.

1. Search Engines Take Time
New blogs will take a few months to get significant traffic from search engines. Doing SEO is one way to improve on this. Other traffic sources, such as networking or social media, can boost up your visitor numbers quickly if you have the right strategy – so don’t focus on search engines only.

2. All Traffic Are Not Equal
Responses from visitors to your blog in terms of time spent, depth of pages, interest in content are best if they found what they’re looking for. Generally, these kinds of visitors arrive at your blog from either search engines, subscribers, and from recommendation from other blogs with similar niche. Traffic from social media has been commented to be less responsive and even unlikely to return back to their blogs. Try to consider what type of traffic is best for you when promoting your blog.

3. Post Consistently
Most successful bloggers post consistently and regularly even when they already have large search engines traffic drawn to their older posts. The reasons for posting new content consistently are to grow the number of subscribers, get new pages in search engines, and keep the blog fresh to get votes in social media. So why stop when you can get more?

4. Traffics Are Inconsistent
There are days that traffic goes up, and at times down. It’s natural. Be ready for anything or you might get upset. The most important thing is to get your mindset focused and not let down by a few hurdles.

5. Get More Repeat Visitors
The heart of successful blogs is repeat visitors. Unique visitors are great too, but nothing can guarantee they’ll be back. So, it’s good to really focus on getting more subscribers. They are also the most responsive in terms of giving comments, votes, etc.

6. Get Inbound Links
Having other blogs link to you helps in many ways. They bring visitors in, expose your blog more, and boost your search engine rankings. These links also signify that your content is valuable, trusted, and worthy to pay a visit to. Not only they help with search engine traffic but also build your credibility.

7. Get Traffic from Multiple Sources
Getting huge traffic from one type of traffic, say search engines, doesn’t guarantee it will always stay that way. For example, Google penalizes blogs that violated their guidelines. Likewise, other types of traffic can’t guarantee giving you consistent traffic all the time. So, diversify your traffic sources.

8. Don’t Ignore Small Traffic
Traffics that come from resources such as your comment or forum links are relatively small. But most of the time those visitors find your blog to be very relevant to what they’re searching for and are likely to become loyal readers. So, keep them coming.

9. Build Your Network
To be successful in blogging, you must have strong network. People in your network can provide you valuable advice, link to you, vote for your posts, inspire and encourage you, and even become partners in future projects. To build a strong network you must first be proactive and willing to meet and help others.

10. You Can Buy Traffic
You can buy advertisement to drive traffic to your blog quickly. PPC ads can be efficient and inexpensive if you bid on the right keywords. StumbleUpon also offers an advertising option where you buy traffic at $0.05 per visitor. Running these ads for a few months will drive significant traffic and give you good exposure at low costs.

Read more...

The Body Section of the Blogger Template Code

In this tutorial, I'll explain the basic structure of the Body of the code so that you get the idea on how it works with the rest of your code. The code is located in Section 3 of the Blogger Template Code Structure. This is the main part of the Blogger template code that retrieves the data to be displayed on your blog. It's basically the core part that makes your whole blog functions. The code that sets how it appears on your blog is the CSS Styling code.

Refering back to the tutorial Blogger Template Code Structure, the Body code is in Section 3 as shown in the image below.


Shown below is the Body code copied exactly from the Blogger Edit HTML page with the 'Expand Widget Button' unchecked. I do not want to include the complete code by checking the 'Expand Widget Button' for 2 reasons. First, it's not necessary to do this. You actually don't even have to know what goes on inside the complete code to be able to design a properly working Blogger template. That's all been done 'automatically' by Blogger, which is the beauty of using this new Blogger template as oppose to the old classic ones. Second, by looking at this simpler version of the code, you'll be able to grasp easier the main idea of how all the containers in the template are laid out.





skip to main |
skip to sidebar

For simplicity, ignore the code in light grey. They are either comments or 'default' codes to make things work properly that doesn't need to be tampered with. The core part of the codes can be sectioned into 4 parts:

1. Header (in red)
2. Main (in green)
3. Sidebar (in red)
4. Footer (in brown)

You'll see in the above that all the codes are first wrapped in the body tag, followed by the outer-wrapper tag, then the wrap2 tag. These wrappers are used to group the containers together so that they can be easily editted together. Using wrappers also make placing the containers much easier especially if you want to use additional sidebars or extra containers (such as a banner or linkbar containers as in most of my templates). In the explanation below, I'll only refer to the outer-wrapper as the larger wrapper without referring at all to the wrap2 wrapper. They're just the same (I'm not even sure why the wrap2 is there in the first place).

Inside this large container, you'll see 3 wrappers - header-wrapper, content-wrapper, and footer-wrapper. They are positioned vertically with the header-wrapper being at top and the footer-wrapper being at the bottom. It's simply because in the code, the header-wrapper is called first, followed by the content-wrapper, and finally the footer-wrapper. At this point, you don't even have to know what's inside the content-wrapper - this makes it much cleaner and easier as oppose to not having the content-wrapper and having to deal with the main-wrapper and sidebar-wrapper together all at once. It'll be a big mess then.

Because the outer-wrapper is the largest wrapper, you have to make sure that the widths of all the other wrappers inside it is less or at least equal to the outer-wrapper's width. But, if you add borders, that'll add extra pixels to whichever wrapper that you're adding the borders too. So be careful when adding borders!

Adding a new wrapper (container) in between any of these wrappers is easy. Just paste in a wrapper code (see below for example) and rename it with a new name, say a banner-wrapper. The preferred='yes' command will make an 'Add Page Element' button that'll allow you to create new widgets.

Adding a wrapper only creates a new container, or block, in your blog. In doesn't set how it's going to look or where it's going to be located. To customize how it looks and where it's located in the blog, you NEED to tweak the CSS codes.

Inside the content-wrapper, you have the main-wrapper and sidebar-wrapper. To have these two wrappers side-by-side as commonly seen in blogs, you have to set the widths of these 2 wrappers such that it's equal or less than the width of the content-wrapper. Plus, you have to add certain commands in the CSS Styling code so that they'll sit next to each other. Otherwise, they'll just fall vertically on top of one another. Typically, you need to use the 'float:left' command for this. See some template examples to check more on this. If you want to add more sidebars, say a 3-column template, you simply need to add more sidebar-wrapper code (in blue). Read more in Tutorial 10 to know how to add or change sidebars.

Once you've understood the basic idea behind the Body code, it's easy to see now why the common structure of the Blogger template code looks the way it is (see below for a 3-column example). If you want to rearrange or add new containers or wrappers, what you simply need to do is to modify the Body of the code. It's that easy! But then, you have to tweak the CSS code to set how it's gonna look in the blog.

Read more...