Blogger template - Free template

How to use Roboform for submit your site to directories quickly

noreply@blogger.com (JakF) — Sat, 06 Sep 2008 18:28:49 PDT

You know, submit to directories is very helpful (important) for SEO. Today I help you use roboform to submit directories quickly.
Step1: Go to roboform to download this software

Step1: Download and install this software, when finish you restart your Firefox to complete, your firefox has a new toolbar's name: Roboform

Step3: Create your new Identities
Click Robofrom icon on your toolbar, select Identities -> New

Step4: Fill your field to submit

You fill some field on all tab of your identities, on Custom tab you fill like me
(Remember edit your keyword, Description, title). Then Save and close
Step4: Submit to directories
Go to a free Directory (ex: http://www.submit2us.com/) then choice your categories
Ex your site Free Blogger Template: Computing - Internet -> Internet -> Web Design and Development - > click Submit

Step5: When it go to your Categories, you click to your identities to fill your field
(my identities is name: digi), look, it automatic fill all your field :)

Readmore automatic with thumbnail

noreply@blogger.com (JakF) — Sun, 10 Aug 2008 09:25:07 PDT

There are many way to hack readmore with blogspot (ex search google with keyword: Hack readmore with blogspot), but I think it very complications when you posting.

Today, I recommend hack readmore automatic support thumbnail(demo)

Go to Template - Edit HTML, Expand widget and search:
Replace with code:

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'>Readmore...</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

Search then add this code before:

<script type='text/javascript'>
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script src='http://taolaga.googlepages.com/summary-post-v20-test.js' type='text/javascript'/>

Edit summary_noimg; summary_img; img_thumb_height; img_thumb_width if you want
Save and Finished

Digg template

noreply@blogger.com (JakF) — Mon, 04 Aug 2008 09:19:06 PDT

Today i discovery a new theme that name: Digg template (demo)

You can download here
Before install this template, please read how to config google adsense to blogger

Don't forget to subscribe!

Technology template

noreply@blogger.com (JakF) — Sun, 29 Jun 2008 04:53:03 PDT

Hi all
I said: if more than 15 comments on this post, I'll share the technology template. ( demo)

Okie
Today I share it for all ^_^
I know you love this template and want me share for you, but convert it take me many time...
Hope you understand me.

About this template
It's name: Technology template
Convert from: Software tutorials (or Mobile reviews )
Price: Free
Download: Here
Note:
Do not remove the footer
If you want to say : "Thank you" to me, you can add my blog to your blogrolls
Thanks !!!
Post your comment about this template, you might get more template ^_^

Don't forget to subscribe!

What do you think about pagerank ?

noreply@blogger.com (JakF) — Sun, 18 May 2008 03:07:06 PDT

Yesterday, I read this post about google pagerank .Omar Abid said about hiss blog have PR5 after 2months. I think he true, blogspot or blog build from wordpress easy to get hight pagerank.

But, I don't degree with him if you think:

Don’t link to blog directories, don’t link to much other blogs, don’t link to links so much.
- Don’t try to get a link on other blogs this is not necessary.

What do you thinks about this post!

Blogger To Have Their Own Rating Star Soon

noreply@blogger.com (JakF) — Sat, 17 May 2008 11:50:37 PDT

If you using wordpress platform for your blog, you will easy to make a rating option for your post. But if you using blogger platform, you must use javascript to do that.( relate: Add rating for your blogger post). But now, seem Blogger will support rating tools in the future.

Just go to your blogger template editor, and you will see the codes below:

<b:if cond='data:top.showStars'>
<script src='http://www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>
google.load("annotations", "1");
function initialize() {
google.annotations.createAll();
google.annotations.fetch();
}
google.setOnLoadCallback(initialize);
</script>
</b:if>

Save and go to Page Elements -> Click Edit Blogpost Widet, you will see the rating option. But now, it not work. Let’s just hope they will make it available for us soon.

Tech Blod template

noreply@blogger.com (JakF) — Wed, 14 May 2008 03:25:09 PDT

Hi all friends.
Sorry for your waiting when i convert Technology blog template. I said:

"if more than 15 comments, I'll share this template".

I'm sure !

But now, I've some problem about this template, and I think i need more time to convert it, While wait me, I think Tech Bold template's so cool.
Demo (blackberry Review) | Download
Note:
If you visit demo blog, you can see Google adsense in blogger post body. You can change it with your account.
Step1: Login yo your account, select Ads you want.
Step2: Go to http://blogcrowds.com/resources/parse_html.php
Paste your script into this form and click parse, copy new code that you see.
Step3: Find on this Blod template ( Before find, click Expand Widget Templates)
Find and change your code after this code:

Change your ads code and save.

Hope you successful

I try to convert Technology Blogger template quickly.
Please understand me !
Thank friends
Regard !

Don't forget to subscribe!

Do you like this Template

noreply@blogger.com (JakF) — Wed, 30 Apr 2008 05:56:28 PDT

This template I used for another blog: Software Tutorials, and I'm using Classic Template

Do you like this template, please leave your comment. I'll convert it to layout template ( xml template) for you.

I'll share if more than 15 comments for me !!!

We come back !!!

noreply@blogger.com (JakF) — Thu, 17 Apr 2008 10:28:59 PDT

Hi all.
Last month, I intended remove all database to other blog ( it's name: Technology blog) but somebody mailed to me keep this Blogger template and i think a should do that. But I've a poll for all.

What do you want of this blog ?
A. I want more template
B. I want more make money online
C. I want more traffic ( SEO tutorials)
D. Other ( please comment)
You can lodge your vote at the sidebar. Thanks

I'm sorry

noreply@blogger.com (JakF) — Thu, 06 Mar 2008 03:33:22 PST

Hi every body!
During 3month, I don't update more post for this blog so many people don't visit again.
Today, I've just designed a Technology blog and I move all database of this blog to Technology blog. Please visit to get more SEO tips, Blogger template, and software tutorials.

This Link : Technology Blog
Thanks !!!

How to configure AdSense sidebar

noreply@blogger.com (JakF) — Mon, 21 Apr 2008 04:27:16 PDT

If you use layout blogger template you must add Google ads to make money online with blogspot but sometimes, google ads not show. So, how to config Google ads ?

Go to HTML convert
In Parse HTML you paste your Google ads code and click Parse.
Then copy new code and add into your blogger template

Dog template

noreply@blogger.com (Blogtip) — Thu, 20 Dec 2007 00:27:07 PST

Hi all. Another blogger/blogspot template for you today.
This template's name: Dog home ^_^
It like suitable for blog that talk about dog or animal

Demo | Download

Merry Christmas Template

noreply@blogger.com (JakF) — Sat, 08 Dec 2007 10:08:30 PST

Merry christmas for all ^_^
Another cool template for all.
Hope you have a nice christmas days.

Demo | Download

But before install please read this article(how to create a blog)

Simple Stock blogger template

noreply@blogger.com (JakF) — Sun, 02 Dec 2007 21:19:37 PST

This beautiful and elegant template is based on "sIMPRESS v2.0"

Demo | Download

If you want get more template please click here
But please read this article before install this template

Photo template

noreply@blogger.com (JakF) — Tue, 06 Nov 2007 20:20:55 PST

A template today very cool. It's designed for a photo blog.

Before install template. Please read this article:
How to creat a blog
Install a template for your blog
And how to design a blog more beautiful
=====
Demo this template: Click here
Download this template : Click here
Source: Blogandweb[dot]com

Add Ratings To Your Blog Posts for Instant Feedback from Readers

noreply@blogger.com (JakF) — Thu, 25 Oct 2007 01:20:50 PDT

Blogs that are on Blogger, WordPress or TypePad can now add the wonderful outbrain star ratings widget to their blog posts.

This ratings widget has been under a closed beta for some time but they finally made a public release today.

It's light, requires no registration and very intuitive - visitors can hover the mouse over the five stars and click any of them to rate your current blog post.

Even if you have a regular website that's not a blog, this ratings widget can be installed on your site as well.

You need such a rating widget to get feedback from all those reader who are subscribed to your blog aren't contributing to the discussion because they are probably too lazy to write a comment.

Give them a system like this ratings widget that requires no effort and they'll be happy to say if enjoyed or disliked reading your blog post.

Get Ratings Widget here. Developer Blog is here. If you are using Windows Live Writer to insert ratings in your blog posts, make sure you remove the link breaks from javascript else this may not work.

Blogger Template: Domain

noreply@blogger.com (JakF) — Wed, 17 Oct 2007 11:21:36 PDT

Download | Demo

This template is another variation of the original template Basyc. The major change is that the Post column is placed in the middle. Plus, I made some minor code tweaking to make it a little bit different from the original template.

As usual, you need to upload a header image (900 x 200 pixels) and hide the default Blog Title and Blog Description texts. I saw some blogs that use my templates forgot to hide the Blog Title and Description texts; the header would have been much nicer if they hide these texts and made their own Title and Description texts as part of the header image graphic.

Blogger Template: Sempoi

noreply@blogger.com (JakF) — Wed, 17 Oct 2007 11:19:22 PDT

Download | Demo

This one is pretty neat, I think. Neat and simple. You can put up a large horizontal banner as you can see in the demo page. And like the previous template I've just made, Bannr, there're flexible number of columns - either 3 or 4 columns - and you can customize each one of them easily.

If you want to upload a header image of your own, the size is 860 x 120 pixels.

Overall, i think this one is really one of the nicest one I've made, in terms of its simplicity. If you've used one of my templates before, you'll know how darn easy it is to change the whole thing into how you want it to look like.

Free Methods to Get Traffic for New Blogs

noreply@blogger.com (JakF) — Mon, 15 Oct 2007 14:13:15 PDT

Blog is the one of the most popular medium that enables publishers to start earning money with Adsense. Content is the very first thing that you need to have. After that, driving traffic to your blog is also a very difficult part. Questions on driving traffic to the blog are always the most popular question to be raised in Adsense Help Discussion Group. Joing PPC advertising program can be one effecive way, but not every blog publisher can affor to pay to join such program. In this post, I am going to discuss three quickest yet free method that drive the first stream of traffic to your blog.

1. Post messages and leave signature on related forums/ groups

Just like what I normally do in Adsense Group. Leaving the URL of your blog as the signature is quite effective in driving traffic to your site. All you have to do is find some forums or groups that are related to your area of interest. Just like my blog, who is talking about making money with Adsense, I choose the Adsense Help Group as my primary forum to leave messages. Of course, if you have time, you can find out more related forums by searching through various Search Engines.

Go to a few that you find informative and read around a bit. Join a couple of the forums, that you find interesting and are of value to you, as a member. However, one thing to remind you is that you should check out two things before joining any forum after doing searching.

- A forum must be indexed by the search engines, particularly by Google. If it's indexed, your posts will appear as backlinks to your site, raising your blog's PR (PageRank) in the search engines. You can gain search engine traffic as a result.

- A forum must also permit the use of a signature file. By creating a signature, that includes your blog URL, you have a link that brings forum members back to your blog.

In your member profile, be sure to use a "signature" that includes a link back to your blog. Make certain the signature appears on all of your postings. Without that link, no new traffic can find you.

2. Tell everyone you know about your blog

This offline networking technique will bring a fresh batch of visitors to your blog. As you become more comfortable with talking to people about your blog, your traffic numbers will take a jump. Many of them will surf to your blog, to read what you have to say.

But remember, only ask your friend or relative to visit your blog, but do not mention or request them to click the ads for you. Encouragement or providing incentives to click your ads is highly prohibited under Google’s TOS. Bear that in mind!

3. Put your links on your e-mails

When you send out any e-mails, either personal or business, be sure to add a link to your blog to each and every one of them.

With a quick and easy to click hot link back to your blog, many of your e-mail recipients will drop by for a look. While not everyone will check out your blogging activities, a few will. Another source of new visitors has been added, with minimum effort.

These three free and quickest methods are, after trial, quite effective to drive traffic to a new blog. You should make a try on them now and start earning big bucks through Adsense!

Deepblue template for blogspot.

noreply@blogger.com (JakF) — Mon, 15 Oct 2007 11:14:35 PDT

Today i see a template for you.
Demo: http://smile-laught.blogspot.com/
You can download here
Read this article before use this template

Language Translation Flags and Script

noreply@blogger.com (Blogtip) — Mon, 08 Oct 2007 10:11:14 PDT

This tutorial explains how you can add a script to allow readers to view your English site in other foreign languages. As you can see on the right of this page, a reader needs only to click the relevant country flag to read this site contents in his preferred language.

English is not the most popular language in the world. In fact, according to many reports, the Chinese language (Mandarin) is certainly the most widely spoken language. In the internet community, the other popular language platforms are arguably Spanish, Russian, Arabic, Portuguese, Malay, Italian, French, Japanese, and Korean.

Translation from English to other languages

If you have a blog written in English, it therefore makes much sense to be able to reach out to the non-English speaking population as well. There are several online translation tools, the popular free tools being AltaVista's Babel Fish translation and Google's Language Translator. WorldLingo is no longer a recommended tool, as the website translator has a translation limit of 500 words, beyond which you have to pay a monthly fee for their service.

For this site, I have used the Google Language Translator. Google is able to translate English website contents into Arabic, Chinese, French, German, Italian, Japanese, Korean, Portuguese, Russian, and Spanish. The JavaScript used here can be applied to most of the blogging sites like Blogspot, Typepad and Wordpress. Copy the following script and paste it at the part of the template where you want your language translator to appear.

Code

<!--

document.write ("<input name=u value="+location.href+"
type=hidden>")

// -->

</script>

</form>

Points to note:-

1. For those using Blogspot, once you have logged into your Dashboard, go to Template-> Page Elements. Add a “Page Element” and select “HTML/JavaScript”.

2. Copy the above JavaScript. Under the “value” (in red), you will see the URL of this website. Please change that to the URL of your own website. Save and refresh the page.

3. If you want a slightly bigger flag, you can increase the width of the images, for example, from “30” to “36” and the height from “20” to “24”.

4. Should you come across a translation that doesn't look right, you can always suggest to Google a better translation to help them improve their translation quality.

Demo : http://cool-template.blogspot.com

Social networks (Social Bookmarking) in Blogger

noreply@blogger.com (Blogtip) — Sun, 07 Oct 2007 01:25:50 PDT

They ask me like putting the icon of social networks or social bookmarking in each one of ours post, so that yes some of our users uses one of them, has the Link to add it to its favorites of fast form.
There is no necessity to have subscribed blog to no of these services, rather, the connections are indeed so that the user subscribes it and has at the hand your Link yes considers it of utility.

Now we are going to see like putting them:
1.Go to Template -> Edit HTML -> Tick into Expand Widget Templates

2. We looked for the following code:

<p class='post-footer-line
post-footer-line-3'/>

3. That line with the following code replaces:


<div class='rsociales'>
Share this post with:
<ul>
<li><a expr:href='"http://www.technorati.com/faves?add=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Technorati' class='rsociales-sobre' src='http://2.bp.blogspot.com/_Zuzii37VUO4/Rjl62eMBQ0I/AAAAAAAAAto/zkas68GmVFk/s1600/technorati.gif'/></a></li>
<li><a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Del.icio.us' class='rsociales-sobre' src='http://4.bp.blogspot.com/_Zuzii37VUO4/Rjl68-MBQ1I/AAAAAAAAAtw/Mftx1_Bi_oY/s1600/delicious.gif'/></a></li>
<li><a expr:href='"http://digg.com/submit?phase=2&amp;amp;url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a DiggIt!' class='rsociales-sobre' src='http://3.bp.blogspot.com/_Zuzii37VUO4/RjlY7uMBQrI/AAAAAAAAAsg/ov73dLSsrtA/s1600/digg.png'/></a></li>
<li><a expr:href='"http://myweb2.search.yahoo.com/myresults/bookmarklet?u=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Yahoo!' class='rsociales-sobre' src='http://2.bp.blogspot.com/_Zuzii37VUO4/RjlZLeMBQtI/AAAAAAAAAsw/bNmkgSj_jj0/s1600/yahoo.png'/></a></li>
<li><a expr:href='"http://www.google.com/bookmarks/mark?op=edit&amp;output=popup&amp;bkmk=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Google' class='rsociales-sobre' src='http://4.bp.blogspot.com/_Zuzii37VUO4/Rjl6z-MBQzI/AAAAAAAAAtg/-13NieAS3J8/s1600/google.gif'/></a></li>
<li><a expr:href='"http://meneame.net/submit.php?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Meneame' class='rsociales-sobre' src='http://4.bp.blogspot.com/_Zuzii37VUO4/Rjlct-MBQyI/AAAAAAAAAtY/UtGxUlBA7mc/s1600/meneame.png'/></a></li>
<li><a expr:href='"http://www.furl.net/storeIt.jsp?u=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Furl' class='rsociales-sobre' src='http://4.bp.blogspot.com/_Zuzii37VUO4/Rjlaa-MBQuI/AAAAAAAAAs4/7hoQkbJNkUw/s1600/furl.png'/></a></li>
<li><a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Reddit' class='rsociales-sobre' src='http://3.bp.blogspot.com/_Zuzii37VUO4/RjlbHuMBQvI/AAAAAAAAAtA/L0TsC3OUUyI/s1600/reddit.gif '/></a></li>
<li><a expr:href='"http://ma.gnolia.com/beta/bookmarklet/add?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Magnolia' class='rsociales-sobre' src='http://3.bp.blogspot.com/_Zuzii37VUO4/RjlbWuMBQwI/AAAAAAAAAtI/Vy_xjt3iY80/s1600/magnolia.gif'/></a></li>
<li><a expr:href='"http://www.blinklist.com/index.php?Action=Blink/addblink.php&amp;Description=&amp;Url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Blinklist' class='rsociales-sobre' src='http://3.bp.blogspot.com/_Zuzii37VUO4/RjlbjuMBQxI/AAAAAAAAAtQ/WDlHSsaO_m4/s1600/blinklists.gif'/></a></li>
<li><a expr:href='"http://blogmarks.net/my/new.php?mini=1&amp;simple=1&amp;url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Blogmarks' class='rsociales-sobre' src='http://1.bp.blogspot.com/_Zuzii37VUO4/RjlQzOMBQoI/AAAAAAAAAsI/qt5x09fQvNo/s1600/blogmarks.gif'/></a></li>
</ul>
</div>

</p>

4. Now it looks for the code:

]]></b:skin>

And right above it sticks the following thing:

.rsociales ul {
display:inline;
margin:0pt !important;
padding:0pt !important;
}
.rsociales li {
background:transparent none repeat scroll 0%;
display:inline;
list-style-type:none;
margin:0pt;
padding:2px;
}
.rsociales img {
border:0pt none;
float:none;
margin:0pt;
padding:0pt;
}
.rsociales-sobre {
opacity:0.4;
}
.rsociales-sobre:hover {
opacity:1;
}

Hot 62 Free Directory Finds of the Week

noreply@blogger.com (Blogtip) — Mon, 01 Oct 2007 20:13:27 PDT

Well it is actually 62 this week. This new list of 62 free directories for your to submit your site(s) is gathered from all over (forums, suggestions, submissions to my directories, etc.). Many of these directories are new, some are new finds and some are older, but offering free submissions for a limited time.

** Please note that free submission offerings, PR rank and Yahoo back links were valid on 9/16/07 and may change without notice.

Please read this articles before submitting...
Sincrona Directory – PR6
Submit Directory – PR 6
Web 1 Directory – PR5
InfraSec-Conf.org – PR5
Topsites Directory – PR4
SampleTec Web Directory – PR4
UStac.org – PR4
Karmania.Net – PR3
5 Star Directory – PR2
Maxi23 – PR1
FreeWebsDirectory.com – PR0
9Y6.NET – PR0
Directory for rank – PR0
Dabfeed – PR0
SEO: Project Web Directory – PR0
Yooley Directory – PR0
A Free Directory – PR0
Mix Directory – PR0
Gathjod Directory – PR0
CMEP Intl Directory – PRO
Free 1 Free Directory – PR0
EastLink Directory – PR0
Link Holes – PR0
Any Websites – PR0
Free Web Directory – PR0
Link Drip – PR0
Links Pedia – PR0
Ferret Seek – PR0
Link 1 Directory – PR0
Directorme – PR0

nicksyear - PR5 - 461 Yahoo back links

Mvzr Directory - PR3 - 1,160 Yahoo back links

Digitnext Directory - PR3 - 4,680 Yahoo back links

EastLink - PR3 - 45 Yahoo back links

The Web Directory - PR3 - 18,300 Yahoo back links

Voda Web Directory - PR0 - 40 Yahoo back links

0q6 SEO Directory - PR0 - 17 Yahoo back links

INDUSTRY FACTORY - PR0 - 5 Yahoo back links

OHXK - PR0 - 0 Yahoo back links

Great Directory - PR0 - 1,930 Yahoo back links

The Big Web Directory of US - PR0 - 135 Yahoo back links

Find Good - PR0 - 577 Yahoo back links

Sitemoz - PR0 - 227 Yahoo back links

z0p Directory - PR0 - 0 Yahoo back links

Internet Stromer Directory - PR0 - 4,280 Yahoo back links

Internet Ahead - PR0 - 3,620 Yahoo back links

Link Professor - PR0 - 4,910 Yahoo back links

MassiveNet Links - PRO - 4,560 Yahoo back links

Wow Internet Directory - PR0 - 4,600 Yahoo back links

Find Turtle Directory - PR0 - 4,160 Yahoo back links

Net Category - PR0 - 3,290 Yahoo back links

Directory Spider - PR0 - 4,220 Yahoo back links

My Group Directory - PR0 - 4,290 Yahoo back links

Hit Boss - PR0 - 1,060 Yahoo back links

Agii.net Directory - PR0 - 11 Yahoo back links

OJRJ Directory - PR0 - 4 Yahoo back links

Yellow Pages - PR0 - 19 Yahoo back links

ZTDN Directory Network - PR0 - 923 Yahoo back links

EKWK Directory - PR0 - 1,060 Yahoo back links

Holiday Dir - PR1 - 653 Yahoo back links

Your-Bids Link Directory - PR0 - 3,450 Yahoo back links

KlickNa Link Directory - PR0 - 7 Yahoo back links

Tweaking the CSS Code

noreply@blogger.com (Blogtip) — Mon, 01 Oct 2007 06:22:00 PDT

(This is a sub-post for Step 5 from Tutorial 11: Starting Your Own Blogger Template)

This is the crucial part of designing - setting how your blog looks like. By this time the widths of all the containers inside the CSS code should have been set. What you need to know about tweaking the CSS code is that it's a recursive process - it's a process of refining that always repeats back and forth until you're 'happy' with the end result.

There are so many things to tweak and so many containers to customize. So how do you do this and where do you start? The easiest approach is to start from the top. Assuming that you're starting from an existing template, at this point you don't have to worry much about customizing the body, outer-wrapper, and content-wrapper, except the width. You can tweak these containers later (or let the existing code as default, unless you want to tweak them later). If you want to use an image as a background image of the whole template, you can also do this later.

Read Tutorial 3: The Structure of CSS Styling Section first if you're not familiar with the basics of the CSS Styling part of the code. Also remember that you should not expect your design to be perfect the first time you do it. It's a process that takes time. To know the basics of tweaking the CSS code, read Tutorial 4: Setting the Properties of a Container. And, if you don't know what containers to customize, read Tutorial 5: Common Containers and Elements in a Blogger Template .

Header:

I'd suggest you start with the Header section. What you commonly need to do here is to set the background color, set how the Blog Title and Blog Description looks like - the font, colors, font-size, etc. If you want to set a large background image as the header image, set it using the Edit Header button in the Page Elements page. The list below is from Tutorial 5 .

#header-wrapper - the container that wraps your Blog Title and Blog Description.
#header - the container just inside the header-wrapper.
#header h1 - the command inside this containers controls the appearance and layout of your Blog Title.
#header h1 a - controls the properties of the Blog Title as a link text.
#header .description - the properties of your Blog Description.
#header a img - controls the properties of an image inside your header container.

Main and Post:

The next container to tweak is the Main and Post containers (including the Post-Footer). This one will take most of your time because there's a lot of subcontainers inside it. Infact, Post is a subcontainer of Main. It's usually easiest if you tweak the subcontainers following a certain order. My suggestion is to follow the order below. The list below is from Tutorial 5 .

Main:

#main-wrapper - the container that wraps your Date Header, Blog Posts, Comments, Feed Link, and any widgets that you drag above or below the Blog Posts.
#main - the container just inside the main-wrapper.
#main .widget - controls the properties of all widgets inside the main container.
h2.date-header - sets the properties of your Date Header (just above your Post Title).
.post - sets the properties of your Blog Posts container.
.post h3 - sets the properties of your Post Title.
.post-body p - sets the properties of the body or content of your post.
.post ul - sets the properties of an unordered list (a list that is not numbered).
.post ol - controls the properties of an ordered list (a numbered list).
.post li - controls the properties of the individual list inside an unordered list or an ordered list.
a img - controls the general properties of an image (the a refers to a link; and an image is by itself a link).
blockquote - sets the quoted text in your posts.
code - sets the text contained within the code tags in your posts.

Post-Footer:

.post-footer - sets the overall properties of the post-footer container.
.post-footer-line - sets the properties for each new lines in the post-footer.
.post-footer a - sets the link text properties inside the post-footer.
.post-footer .post-comment-link a - sets the "comment" link inside the post-footer.
#blog-pager - controls the properties of the "newer posts", "home", and "older posts" links.
#blog-pager-newer-link - controls the properties of the "newer posts" link.
#blog-pager-older-link - controls the properties of the "older posts" link.
.feed-links - controls the "Subscribe to: Posts (Atom)" link.

Sidebars:

Once you're done with the above, customize the sidebar. If you have more than 1 sidebar, you may want to customize each sidebar differently. You'll also need to customize the Profile container and the Blog Archive if you want them to be different from other sidebar widgets. The list of container elements from Tutorial 5 are:

.sidebar-wrapper - the container that wraps all elements and contents in a sidebar.
.sidebar - the container just inside the sidebar-wrapper.
#sidebar1 - sets the properties inside sidebar1.
#sidebar2 - sets the properties inside sidebar2. If you want the properties inside sidebar1 and sidebar2 to be the same, than you can just the properties inside .sidebar and don't have to even write down the #sidebar1 and #sidebar2 in your CSS code.
.sidebar .widget - controls the properties of all the widgets (the Added Page Element) in your sidebar.
#sidebar1 .widget - only sets the widgets in sidebar1.
.sidebar .BlogArchive - sets the Blog Archive properties. Technically, this is a sidebar widget too, but I'm not sure why setting the properties for sidebar widgets doesn't change any properties for the Blog Archive. That's why I have to write down the .BlogArchive command to set its properties.
.sidebar h2 - sets the title/header properties of a sidebar widget.
.sidebar #BlogArchive1 h2 -sets the properties of the Blog Archive's title.
#Profile1 - sets the properties for the About Me block.
#Profile1 h2 - sets the title/header for the About Me block.
.profile-img a img - sets the image in the About Me block.
.profile-textblock - sets the author description About Me block.
.profile-data - sets the author's data in the About Me block.
.profile-datablock - sets the overall blocks of data in the About Me block.

Comments:

After the sidebars are done, customize the Comments container next. Post a few test comments to see how they will appear after tweaking. The list of container elements from Tutorial 5 are:

#comments - sets the overall comment container's properties.
#comments a - sets the link text properties inside a comment container.
#comments h4 - sets the header of the comment container.
.deleted-comment - sets the properties of the deleted comment.
.comment-author - sets the properties of the comment author.
.comment-body p - sets the comment body properties.
#comments ul - controls the unordered list inside a comment container.
#comments li - controls the individual list inside a comment container.

Footer:

The last container to be customized is the Footer. The list of container elements from Tutorial 5 are:

#footer-wrapper - the container that wraps all elements and contents inside a footer section.
#footer - the container just inside the footer-wrapper.
#footer h2 - sets the properties of the footer title/header.
#footer .widget - controls the footer widget properties.
.footer a - controls any footer link texts.

Refining Touch:

Now that you're done customizing all the containers, what you need to do is go back and take a look at your blog as a whole and do some minor tweakings. What I suggest here is you might want to change some font or background colors, font size, margins and paddings, adding borders or changing the borders colors, and so on. But when adding borders, be careful that it might change the width of the container that you're adding the borders on. If there are problems (say that the Sidebar is pushed below the Blog Post), you'll need to increase the width of the parent container that it's in.

The best way to change background and font colors is to have them as variables so that you can use the Fonts and Colors tab in the Layout page. If you're not sure how to do this, just use my Generic Blogger Template as you're starting template. It has plenty of color and font variables to start with.