Blogger has officially announced that it would be shutting down the FTP publishing feature on March 26 2010. So the existing FTP publishers are advised to move onto Blogger Custom Domains.If you are not currently using the FTP publishing option, you can just skip this tutorial :)
Blogger has already posted about the advantages of custom domains.

Where do you currently publish your FTP blogger blog ?

1.If you are publishing at a root level domain or sub-domain, then the things are pretty easy. (eg. www.yourblog.com or blog.yourdomain.com).

2.If you are publishing your blog at some subfolder within your domain or subdomain(www.yourdomain.com/blog), then you can no longer host your blog at that address, because Custom Domains can be setup at root domain or sub-domains only.Blogger will soon release a migration tool which will help you in properly redirecting such blogs.

Can i get rid of my web-host?
If you are hosting your blog at a root level domain or sub-domain and not inside a directory and if you are have not published any images via FTP(images are hosted on other sites like flickr), then you no longer need a web-host.

Migrating www.yourblog.com (FTP) to www.yourblog.com  (Custom Domain)

Note:- The following steps can also be used to migrate a sub-domain from FTP to Custom domain(ie blog.yourdomain.com from FTP to Custom Domain).  This method cant be used for migration of a blog located at www.yourdomain.com/blog or subdomain.yourdomain.com/blog
1. When you move your blog to a custom domain, you will have to  move all the images to a different sub-domain on your server
2.Create a new sub-domain like files.yourblog.com and move all your images to this sub-domain (For example www.yourblog.com/uploaded_images/image1.jpg should now be accessible at files.yourblog.com/uploaded_images/image2.jpg)
3.If you are using a shared hosting service, ask your host to create a Canonical Name(CNAME) record for www with value ghs.google.com
(DNS changes are cached  at many levels and your ISPs may take time to get in sync with the 13  root level domain name servers. So the changes may take time :)
4.Once your host is done with it, Log in at your Blogger Dashboard and navigate to Settings > Publishing
5.Opt For Switch to:  Custom Domain (Point your own registered domain name to your blog)    and switch to advanced settings
6.Type your new domain/subdomain there and in the missing file host option type in files


type the captcha and save the settings. If everything goes right, your blog has now been successfully moved to the custom domain.

What does the Missing files host do?

When blogger is not able to find a file like www.bloggerplugins.org/uploaded_images/image1.jpg , it will try to find it at files.bloggerplugins.org/uploaded_images/image1.jpg [Click on the link to see it in action]
If you are hosting your blogger blog on a sub-directory, then wait for the Blogger FTP migration tool(it will be out in a couple of weeks). Once you are done with the migration tool, just follow the steps 4-6.You wouldn't need to use a missing files host in that case.

If you have any questions about the migration, leave your questions in the comments section.

Like SEO, SEM plays a major role in promoting the website to make revenues on the basis of ROI. The online business battle will be waged over conversion rates and return on investment (ROI), not traffic acquisition. The Landing page is the key factor inorder to make conversions rather than investing in an normal page.

Successful landing page
Your landing page should look like

1) Clear informative layout
2) Use Catchy Headlines, catchy titles are a plus.
3) Using contextual internal links
4) Should focus on What's the offer?
5) Who's interested?
6) Why are they interested, and why should they take further action?
7) How do they get started?

When visitors landed on the common home page, they stayed longer and visited more pages. Yet a larger percentage left without converting. When visitors landed on custom pages, they stayed for less time and viewed fewer pages. But these visitors converted two to three times more than the visitors to generic landing pages.

Make sure that you use your design part most in the header section to attract the audience. And don't use images which ever you want to convey to the audience (the important note) which will be useful for seo section. Don't forget to have an Action Button near to your conveying message. Always keep in mind that most of the visiter would be using 800X600 resolutions, so keep your design with in that screen resolutions.

Optimize your web page when you are using high quality graphic images which will save your loading time.

Many of them are asking me, how to write html css code for emailers? Do it have any formates? On my view, i say yes it has a format to write. Now a days emailers are playing a majore role to promote their products or web pages in order to increase their conversion rate. Report says that a neat simple text mailers are making lots of conversions.

There are two types of mailers. One is text mailer and another one is image based mailer. Text mailers are given most important than image mailer, coz text mail can have the users glance that what he wants. But in image mailer unless the user clicks the display images he cannot view the mail. Most of the mail engine's like Google, Yahoo will not show the images until the user click the display images. This may get user get irritated and without opening the mail he will delete it. Make sure that your mailer will not fall in their Junk box.

Format for writing E mailers
A basic html and css code writing is enough for writing E mailers. Like tables and inline style is needed. You cannot apply any css file to the emailer. While writing html code, make sure that you should not use positions, backgrounds, negative margins and also padding (in cases). You must reset your css before starting an element.

Email Compatibility
Most of the companies are looking for email compatibility for all emailers just like browser compatibility. Most of them are Gmail, Yahoo, Sify, Microsoft Outlook express, Hotmail etc.. Make sure that your code is compatible for the above mentioned email services. So please use basic html and css tags in order to render properly in all these services.

Note:
Make sure that you add a link on the top of the emailers saying that cannot view, please view it in an html format. So that they can view to page in a browser, if they have problem in opening in email. And also add disclaimers like unsubscribe(if needed) at the end of the footer.

Rounded border
HTML Code:

CSS Code:
.b1, .b2, .b3, .b4{font-size:1px; overflow:hidden; display:block;}
.b1 {height:1px; background:#888; margin:0 5px;}
.b2 {height:1px; background:#fff; border-right:2px solid #888; border-left:2px solid #888; margin:0 3px;}
.b3 {height:1px; background:#fff; border-right:1px solid #888; border-left:1px solid #888; margin:0 2px;}
.b4 {height:2px; background:#fff; border-right:1px solid #888; border-left:1px solid #888; margin:0 1px;}
.contentb {background: #fff; border-right:1px solid #888; border-left:1px solid #888;}
.contentb div {margin-left: 5px;}

Rounded Fill
HTML Code:

Css Code:
.b1f, .b2f, .b3f, .b4f{font-size:1px; overflow:hidden; display:block;}
.b1f {height:1px; background:#ddd; margin:0 5px;}
.b2f {height:1px; background:#ddd; margin:0 3px;}
.b3f {height:1px; background:#ddd; margin:0 2px;}
.b4f {height:2px; background:#ddd; margin:0 1px;}
.contentf {background: #ddd;}
.contentf div {margin-left: 5px;}

The first example will give you a rounded corner with border, simply copy the html and css code. The secound example will give you rounded corner with fill but will not have any border. You can custome the code by changing the border or background color.

If you have any doubts or queries, please feel free to contact me.

Do you know how to vertically align a text in a floating div? When a content is dynamically generated and you want to align it automatically according to it?

Today i was experimenting about this for a long time and finally i have got a solution which will work in all the browsers including ie6. There are many ways of doing it, but i would like to work the code in all the majore browsers inculding ie6.

So here is the code...

HTML:

It works! Vertically Center Align!

CSS:
.contentdiv{ width: 135px; height: 84px; display: table; border:2px solid red;}
.contentdiv p{ display: table-cell; vertical-align: middle; text-align: center;}

Hack for ie:
.contentdiv p{*margin-top: expression(this.offsetHeight < this.parentNode.offsetHeight ? parseInt((this.parentNode.offsetHeight - this.offsetHeight) / 2) + "px" : "0");}

According to the height you increase, the content will get vertically aligned center. My only worry is iam using expression. We must try to avoid using more expression. But it looks very simple. Fine, any other method of handle this will be a great help!

Image optimization, plays a majore role inorder to load your page faster. There are many good image editing tools that allow us to get the best visual result for a certain file size, but they lack in quality. Saving bytes has never been so easy.
 
Smushit! is a service that goes beyond the limitations of Photoshop, Fireworks & Co. It uses image format specific non-lossy image optimization tools to squeeze the last bytes out of your images - without changing their look or visual quality. This tool now is also recommended by YAHOO and GOOGLE.

How it Works
You can give any format image like gif, jpeg or even png. Smushit will convert your given format file into png8 format. PNG true colors such as png24 will not support by ie6, but png8 will be supported by all leading browsers.

I also recommend this. for more optimization info also visit Page Speed by google

Now a days CSS Sprite plays a major role in developing a web page. One of the techniques developed, sprites being plugged into a master grid, then later pulled out as needed by code that mapped the position of each individual graphic and displayed it on the screen. First of all you need to know how to make a transparent gif image with positions using Photoshop.

Sprites were displayed over a static or dynamic background image, and the positioning of the sprite was controlled simply by the css background positions. To display a single image from the master image, one would use the background-position property in CSS, defining the exact position of the image to be displayed. Any hover, active or focus effects would be implemented using the simple definition of the background-position property for the displayed element.

When a page is loaded, it will load as a single images which is highly useful in reducing the request time of the server. YAHOO, GOOGLE, DIGG, SULEKHA etc... are also using sprite images inorder to load their pages faster.

For example:

You can see the GOOGLE sprite images, how it was created and called using css bacground.








.logo {background:transparent url(/images/sprite.gif) no-repeat scroll -190px -236px;}