Sometime I've got some questions: how to set Screensavers from Powerpoint(PPT) file and how to create movie from PPT files that can be uploaded to Youtube or Google video. An this tutorials answers two common questions for you.

To Create Picture Screensaver from PowerPoint Slides.

Create an empty folder in "My Pictures" on your hard-drive. Now open the PPT or PPS file in Microsoft PowerPoint and click File -> Save As. Select "Enhanced Windows Metafile" in the file-type drop-down and click "Every Slide"

Your Powerpoint presentation is now available as EMF file in one folder. Right click the deskop -> Properties -> Screensaver and select the "My Picture Slideshow" screensaver. Browse to the folder where you save the PPT and you're done. [Disable "Use Transition Effects" for best results]

How To Upload PowerPoint to YouTube or Google video.

First you must convert PPT files to movies files or flv files. Then you can upload to YouTube or Google video.

There are two option here - either run the PowerPoint as a full-screen slideshow and capture the desktop using some screen recording software OR make a movie from PowerPoint slide images. We'll use the latter approach though you won't see the animations or transitions in the PowerPoint movie.

Start a new project in Windows Movie Maker and import (Ctrl+I) the entire folder of images in the timeline that we created in the Screensaver hack above. Switch to storyboard in WMM, drag all the image to timeline and click Tools->Options->Advanced. Now change the picture duration and transition duration (keep this to a minimum value). Finally save the movie file - your PowerPoint is now a video.

I mainly use Skype to chat with some friends of mine and can’t honestly say how I ended up using this voice over IP software and not some Instant Messenger. Skype does have some advantages over common Instant Messengers, you can call the “outside” world and have multi-user conferences. Me and two friends used to communicate in Skype when playing World of Warcraft and it did work quite well.

Record recording should be something build in Skype if you ask me. It’s a great way of keeping archives of phone conversations that can be useful in several situations. Unfortunately though there was not a completely free add-on that would record calls in Skype.

This has changed with the release of Call Graph. This Skype add-on records phone conversations as mp3 files. The recorded conversations can be tagged for better identification.

It looks pretty simple and that’s exactly what it is. Additional information about the calls are saved. The name of the user you have spoken to and the date and time. These information in combination with the tags make it easy to find calls of a specific user, date or tag.

I did not try it out but I suppose it is also possible to record Skype calls by using an audio software like Audacity. It’s a bit more complicated and not that automated but it should work fine as well.

Rapidshare is the biggest store online. But when download on rapid, you must buy an account if want to download faster and easier. This tutorials help you how to use rapid easier.

1. Search file on rapid.

On rapidshare there's many many file about ebook, software, film, music, picture. But, we can search on there when rapid hasn't a search box?.
Very easy. We can search on rapid.

2. Tutorials when download on rapid.

If you've an account, you can download easy, no limited when download and more. So, if i haven't an account, can I download easier?

Very easy!!
Step1: Remove time out.
When download a file, if you select free option. You'll lose about 30s and more. If you don't want to wait, you can remove this time.

This time we must wait.. 0.5 minutes
On Address we type: javascript:alert(c=0) then Enter


We can download this file but unwanted wait.

3. Fix limit download proplem.

Click Start -> Run -> Type CMD then Enter.
On Command Promt windows we type ipconfig /flushdns then enter.
We use : ipconfig /release to disconnect Internet and ipconfig /renew to reconnent Internet

We must delete cookies.
If use Firefox:
Tools -> Options ->Privacy tab -> Show Cookies -> Select Remove all Cookies.

If you Internet Explorer
Tools -> Internet Options ->Genaral tab -> Browsing History -> Delete ->Delete Cookies

Now we's just renew IP and we can download another file.

This summary is not available. Please click here to view the post.

What happens when your blog story gets featured on the front page of Yahoo! Get prepared for the highest site traffic ever. As Yahoo! Buzz is getting a revamp , some lucky publishers are getting an opportunity to join as Yahoo! Buzz Publishers and drive huge unbelievable traffic to their sites with pageviews being limited by how much load the web hosting server can handle…

Salon.com announced that it hit over 1 million uniques in one day for the first time in the company’s 12-year history, a traffic milestone reached when Yahoo! linked from its home page. Techcrunch reports that they received their highest traffic day ever with over 1,000 comments on the post, which almost brought the site down.

Yahoo is still ramping up the number of links it puts on the home page from Buzz, and is being careful about the potential to flat out nuke websites with all the traffic they can send. But it’s clear that a link from Yahoo.com blows away anything Digg or any other competitor can offer. That will keep the Buzz publishers, who must be invited into the service, paying attention.

How does Yahoo Buzz send you huge traffic?
Yahoo! Buzz features the most interesting stories and videos on the Web and the content is ranked based on votes, search-term popularity, and what people are reading and emailing that instant. Yahoo Buzz does not use holding story pages on their site, but rather directly links to the story page boosting traffic to your site to read the full story. You can promote the story further by adding a vote button. Selected Top Buzz content may be featured on the Yahoo! homepage too!

Yahoo! informs that the current beta test is limited to a small set of select publishers to ensure they can evolve the program in a way that is most beneficial for a good user experience. They will be accepting new publishers soon and you can join the mailing list for updates.

Can your web server survive 1 million hits?

This is way beyond the number of visitors Digg or Fark can send your way. Most sites hosted on shared webhosting will not be able to handle such traffic even for minutes, so I guess they will be joining in top websites and blogs on dedicated servers initially who can handle the traffic. Do you prefer your few thousand daily visitors, or rather have a crashed site everyday…Thanks to quicktips

“Where do you find images for your blog?” That is a question that I get asked quite often, therefore I decided to write about it.

The interesting thing is that the quality and sophistication of the images that I use grew gradually with my blogging experience. When I started blogging, I would just use Google Image Search. Some of those images were really awful, and some were even copyrighted. I used them nevertheless, thinking that both my readers and the authors would not care that much…

Over the time I discovered better places to find images. Royalty-free ones, which is more important. Below you will find 3 sources that I use often.

iStockphoto

I started using iStockphoto (referral link) only recently because I was reluctant to pay for images. “There are free resources out there, why should I pay then?” That was my reasoning, but I changed my mind after taking a look at the quality and variety of their database.

For most blogs the small format will suffice, and they cost $1 a pop. I think that is a reasonable price, specially if you consider that the quality of the images can separate your blog from the pack.

Stock.Xchng

While I like iStockphoto, I also like to save money. Most of the times before going to their site I will check some free resources to see if I can find a suitable image. My favorite one is Stock.Xchng.

The site has a smaller database, but the quality of the images is good enough. Another benefit is that you don’t need to register up (unless you want special image formats), just right click and “Save image as.”

Yotophoto

Yotophoto is a search engine that will look for royaly-free images on several places around the Internet (including Stock.Xchng, Flickr, Wikipedia, Morguefile and others).

The quality of the images is not so good, but it can be useful if you are looking for something very specific.

It takes a lot of time to copy the files from one source to another.When I copied my data from my 80GB portable Hard Drive to my Laptop it took almost an hour to do so.I searched for a utility that can save my time in doing so.TeraCopy copy and move files at the maximum possible speed, providing the user a lot of features.


•Copy files faster. TeraCopy uses dynamically adjusted buffers to reduce seek times. Asynchronous copy speeds up file transfer between two physical hard drives.

•Pause and resume file transfers. Pause copy process at any time to free up system resources and continue with a single click.

•Error recovery. In case of copy error, TeraCopy will try several times and in the worse case just skips the file, not terminating the entire transfer which is very handy feature when you are copying large set of data.

•Interactive file list. TeraCopy shows failed file transfers and lets you fix the problem and recopy only problem files which saves a lot of time.

•Shell integration. TeraCopy can completely replace Explorer copy and move functions, allowing you work with files as usual.

Learn more about application Teracopy and download it.

Vozme is web based tool that turns any snippet of text into an MP3 audio file that you can either listen online or download to your local hard drive.

You just have to copy the text from a web page or an email and paste it inside the Vozme text box.

While there are tons of solutions that convert text to spoken words, what I liked about Vozme is the clutter free interface and the fact that it runs inside the browser without requiring any downloads.

Bloggers can easily integrate the Vozme feature in the site so visitors can either listen to your full blog posts or they can select a portion of text and have Vozme narrate it like a speech.

Vozme.com - Accepts Spanish, English and Italian languages. Thanks Jane.

In most of the Windows PC users trust on Microsoft Outlook email client for sending and receiving emails. And sometime the Outlook PST file may get corrupted or damaged due to any virus activity or some malware attack or even due to improper shutdown of the PC. And you all know, office mails are very important as they are the key communication channel for your business.



In similar situations we need to have a recovery software specific to Outlook PST file. So you can tryout outlook PST file repair software from stellar Information Systems.

Download Outlook PST file repairing software

Here is a nice addon for Firefox, which will make it look more colorful. With the help of this addon you can add different colors to each tabs in the Firefox web browser. You can do a lot of customization in color schemes for each tabs in Firefox with this addon. This would help you to apply colors to each tabs based on URL, so that you can differentiate each site with specific color.

Another feature is that you can control the fading of each tab, depending on whether it is selected or not. I feel its a very cool addon Firefox, and all the Firefox fans must try this atleast.

Install Colorful Tabs addon for Firefox

Microsoft corporation has launched a website for helping people to choose right computer configuration specific to each users need. The web site named myrightpc.com gives a very easy and user friendly interface to help users to choose their best PC configuration satisfying their needs.



In order to choose the best configuration for your needs, user has to visit the myrightpc.com and answer very few questions. After collecting all the inputs from user, the site will give the PC configuration report. The report will have all the details about the different components in the PC that fit best with user's needs.

This site is mainly targeted to promote Windows Vista from Microsoft, thus you cannot expect any other Operating System prescribed in the configuration. Also there is a list of retailers in different cities across India for purchasing the prescribed PC configuration. Although the site targets Indian users, but the PC configuration wizard can be used in other countries like United States, United Kingdom, Singapore, Germany, Japan, Russia and China.

Blogger Template Design: Tutorial 6

• Tutorial 5: Common Containers and Elements in a Blogger Template
• Tutorial 7: Setting the Template Size

Here I'll explain how you can use the Generic Blogger Template to practice on tweaking the codes and modifying your templates. The ultimate goal is surely for you to know how to design your own template, but knowing how to modify the template first (and to get a feel how the template 'react' to your code modification) is an important step that you need to go through before starting to design your own template.

Changing your template is not as simple as changing or adding some codes, hitting the "View Blog" button, and thinking that everything will go as perfect as you plan. Lots of the time you'll see things go off differently from what you've expected. Especially if you're not a web programmer. I'm not one and I did go through a lot of going back and forth between the "Edit HTML" page to the "View Blog" page before getting what I really wanted.

So the best thing to do is really to experiment first with the 'behavior' of the template codes, see how they make your template change, and finally understand (more or less) why they change the way they change: simply put - be ONE with the code!

To make it easier for you, I've created a Generic Blogger Template that you can download to play around with. To be honest, it's an ugly template, but the different container colors will help you see how things actually change. The first thing you need to do is create a Test Blog using your Blogger account. Then upload the Generic Blogger Template into your Test Blog. Put a few posts with lots of text, images, and add some sidebar widgets too so that you can see a more realistic effect.

The next step is just to start playing around. It's best to do things one by one. Say, choose one of the containers, the header-wrapper maybe (look in Tutorial 5 ), and change some of the command codes for that container. Then view the new templates to see if the changes is really what you've expected. As starters, try to play around the most with padding and margin (playing with colors, fonts, or any appearance-setting commands are not as challenging as playing with layout-setting commands). Don't play yet with the template size-setting commands like the width of containers because this involves other containers also and can get really messy. We'll do this later. Once you're confident with how things behave in one container, move on to other containers or do multiple containers in one go.

Within a short time, you'll be confident enough with this Generic Blogger Template that you can start tweaking your own blog template codes. At this point, I won't say that you'll know everything there is to know about tweaking codes, but you'll know enough to do considerable makeover on your template and enough to start learning new things and dealing with new problems on your own. The key point here is your coding skills will grow in time - May the CODE be with you!

Blogger Template Design: Tutorial 5

• Tutorial 4: Setting the Properties of a Container
• Tutorial 6: Using the Generic Blogger Template

Here's a list of all the common containers and elements in a Blogger template and their funtions (elements are basically any object that make a blog funtions and containers are large elements that contains smaller elements or some other contents).

These common elements that I'll show are not necessarily the elements that exist or must exist in all Blogger templates, but are just some common elements that controls a large part of your template style. Knowing these elements will make it a lot easier for you to know where to look for in the template code and how to deal with other new elements that you may find in other templates.

I'm not going to list all the elements, but only enough elements so that you get the ideas and can understand all the other elements on your own. I will refer to the images from the below to CSS Styling Section make things easier to follow.


The symbols # and . show the attributes of the element (sort of a classification of the element type). But you don't have to worry much about this for now. If you want to know more about this, I suggest the W3Schools tutorials.

Global:

• body {.....} - general properties for the whole template.
  
• #outer-wrapper {.....} - the starting and largest container for all your template contents. Inside this is the header-wrapper, content-wrapper, and footer-wrapper.
  
• #content-wrapper {.....} - the wrapper that contains sidebars and main containers.
  
• a {.....} - this sets the overall properties of your link text.
  
• a:visited {.....} - this sets the overall properties of your visited link text.
  
• a:hover {.....} - this sets the overall properties of your link text when the mouse hovers over it.
  

Because all element codes must be contained within the {.....}, I'll just write the element titles after this.

Header:

• #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:

• #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).
  

Sidebar:

• .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.
  

Miscellaneous:

Technically, the Profile (About Me) container is placed inside a sidebar, but I'm putting it in the Miscellaneous section because there are many smaller elements that belong together with the Profile container and putting it in the Miscellaneous reduces the mess.

• #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.
• 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.

Comment:

• #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:

• #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.

Now that you know these containers and elements, you'll know where to look for in the template code whenever you want to change something about your template (fonts, text colors, background colors, padding, etc). What you do then is simply modify the codes inside the {.....} for that container or element only.

Blogger Template Design: Tutorial 4

• Tutorial 3: The Structure of CSS Styling Section
• Tutorial 5: Common Containers and Elements in a Blogger Template

In this tutorial, you'll know the basics of what code sets the properties of a container. To make things simple, we'll look at 2 container blocks only - Main and Post. Once you know these, the basic ideas for all the other containers are pretty much the same.

Here is a sample code for the 2 containers:

#main {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
min-width: 400px;
max-width: 400px;
background: $mainbgColor;
color: #111111;
font: $textFont;
}

.post {
margin: 0px 20px 10px 0px;
padding: 10px 20px 10px 2px;
line-height: 1.5em;
text-align: left;
background: $postbgColor;
}

The #main and .post are the titles of each containers. Each container codes must be contained within {...}. For the explanation below, we'll focus on the codes inside the post block, especially for the explanation on the margin and padding (the codes colored in red).

• Margin - sets the distance between the border of the container to the border of a parent (larger) container outside it. There are 4 numbers defining the Margin property. The 1st number sets the top margin, the 2nd sets the right margin, the 3rd number sets the bottom margin, and the 4th number sets the left margin. It basically sets the whole margin in a clock-wise fashion starting from the top. In the case above, the parent container for the post container is the main container. See how the dashed border for the blue (post) container is placed inside the green (main) container following the post block's margin command (the codes in red). If the post's margins are all set to zero, then the post container would be exactly the same size as the main container. Think of the Margin as a command that moves its border away from a parent border. Another thing, Margin can have a negative value, which means that it moves toward the parent border and may overlap it (not away from it).
  
• Padding - sets the distance between the border of the container to the border of a child (smaller) container inside it. In the case of the post container, the child container is the post-body. The 4 numbers defining the padding sets the padding in a clock-wise fashion also, just like the Margin property. See how the post's padding puts the post-body inside the post container, away from the dashed border. Unlike the Margin, think of the Padding as a command that moves a child border away from its border. Padding values cannot be negative.
  
• Min-width and Max-width - sets the width of the container. Usually, it's enough to write it as width = 400px (for example), but it's becoming more of my habit to set the width as strict as possible, because I sometimes saw that if it's not written strictly, the container width might shrink and expand freely on some situations and in some different browsers. So by setting the width strictly, I made sure that it looks exactly like I want at all times in all browsers (basically getting rid of alignment bugs). If you look at my newer templates, I even set the width redundantly, say in Main-wrapper and then in Main containers eventhough they are pretty much the same. Doing it this way solves some alignment bugs that I saw (eventhough I don't really understand why it solves it by writing it redundantly).
• Background - sets the background color of the container. It uses the hexadecimal code for colors. See here for all the color values. You can also set a background image that repeats itself to cover the whole container block. The way to do this is by pointing to the URL of an image. For details on how to do this, see W3Schools tutorials. You can also set the value to be $samplevariable, where the variable is the one that you define in Subsection 1 in CSS Styling Structure.
• Color - sets the color of your text using the hexadecimal color code, or the variable defined earlier in Subsection 1.
• Font - sets the font of your text. You can use the variables set in Subsection 1 also. See W3Schools tutorials for more details on setting the font properties.
• Text-align - sets the alignment of your text. The 3 options are either left, center, or right.
• Line-height - sets the distance, or height, between two text lines.
  

My tutorial just gives the basic idea on some of the codes in the Blogger templates. I'd say the most important ones for a basic understanding are the margin and padding commands. If you want a more detailed explanation on CSS styling language, I recommend w3Schools CSS Tutorial as a quick and easy resource center.

Blogger Template Design: Tutorial 3

• Tutorial 2: The Structure of a Blogger Template Code
• Tutorial 4: Setting the Properties of a Container

In this tutorial, I'll show you the structure of CSS Styling Section, which is the 2nd Section in the Blogger Template Code Structure. Again, not all templates have the same structure. It basically comes down to the personal style of a designer. But I've found out the structure that I'll show you is quite logical and makes things a lot easier when coding, debugging, and customizing your template. Once you've understood this tutorial, you can later change the style and structure any way you want. But first you have to understand them and I've put out here a very easy structure to understand and use.

I've cut down the CSS Styling Section into 9 smaller subsections. For now, I'll describe the subsections in general. We'll get to the details on the coding inside these subsections later in the following tutorials. Always refer to the Structure of a Blogger Template to help you understand better the subsections and containers that I explain here.
Subsection 1 - Variable:
This subsection contains the declaration (the introduction) of the font and color variables that appear in the Fonts and Colors tab in the Layout page. For example, the Text Color or the Text Font variables that you can choose and modify using the Fonts and Colors tab. In my templates, I've added a lot of variables (close to 40+) compared to some of the standard Blogger templates to make it easy for you to customize a lot of things on the template.

Subsection 2 - Global:
This part contains the code to control the general appearance and layout. If you look at the green bar above, you'll see the code "body {.....}". This means that every code that goes inside the {.....} will control the general properties (size, layout, & appearance) of the body of the template (everything that the computer screen covers). For example, it controls the width of your whole template and the background color or image. But it doesn't control the detailed properties of the whole template (that is done by all the other subsections). Or, if you do set the detailed properties inside the body container, say the Text Font, and then reset the same properties inside a smaller sub-container, the properties set in the body container will be overridden, or canceled.

Inside this subsection, you will also find other important large containers - the Outer-wrapper and the Content-wrapper - so this subsection is where you want to look for if you want to tweak those containers.

Subsection 3 - Header:
This part controls the properties of everything inside your Header-wrapper container. The most common ones are the Blog Title and the Blog Description. In most of my templates, I've added an extra object in the Header-wrapper - the Linkbar (or the horizontal menubar). Typically, you can't add extra object in the Header because you can't use the Add Page Element tab. To add the Linkbar, I had to change the 3rd Section of the template code structure (which is the Data section). In my own blog (dzelque.blogspot.com), I added something else, which is the Google Search Bar. Ideally, you can add just about anything you want there, if you know how to deal with the 3rd Section. We'll get to this later.



Subsection 4 - Main:
This part controls the properties (size, layout, and appearance) of everything that the Main-wrapper block contains - the Date Header, the Post, the Comment, the Feed Link, and any widgets that you drag into the Main section using the Add Page Element tab.

Subsection 5 - Sidebar:
This part controls the properties of everything inside your Sidebar-wrapper - for example the Labels, Blog Archive, Adsense units, Link Lists, etc. But, it doesn't set how many sidebars you have or their locations on the blog (example Sidebar-Main-Sidebar or Main-Sidebar-Sidebar). That part is done in the Section 3 of the Blogger Template Code Structure- the Data Section.

Subsection 6 - Miscellaneous:
This part controls the properties of additional elements in your blog that's not controlled by all the above subsections. These elements are the Profile (or the About Me block), the Blogquote, and the Code. It means if you want to, say, change the color of the quoted text or the font of your nickname in the About Me block, this is where you want to look for to tweak it.



Subsection 7 - Post-Footer:
In my Generic Template, this part controls the properties of 3 things:

1. The Post-Footer - the texts below your post body. This is the part that contains information about your post, or the texts that say "Posted by YourNickname, Labels: ....., 5 Comments, etc.
   
2. The Blog-Pager - the links at the bottom of your blog posts that say "Newer Posts, Home, or Older Posts".
3. The Feed-Link - the link that says "Subscribe to: Posts (Atom)".

Subsection 8 - Comment:
This part controls all the properties of the Comments section in your blog.

Subsection 9 - Footer:
This part controls all the properties in the Footer section. Generally, the Footer section contains some text explaining the ownership or copyright of a blog. In some other blogs, they also put extra stuff in the Footer section, like the Recent Posts or Popular Posts in 2 or more columns. Basically, you can just put about anything in the Footer as in the Sidebar. But if you want to add more than 1 column to your Footer, you have to tweak the 3rd section of your Blogger Template Code Structure.

Blogger Template Design: Tutorial 2

• Tutorial 1: The Structure of a Blogger Template
• Tutorial 3: The Structure of CSS Styling Section

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.
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.

Blogger Template Design: Tutorial 1

• Introduction: Tutorials on Blogger Template Design
  
• Tutorial 2: The Structure of a Blogger Template Code

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.

To start off, a template structure basically contains blocks of containers that looks like this:
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-wrapper
• 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.

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.

In 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.