Most people would like to use their own domain (e.g. MyBlog.com) for the URL of their Blogger blog website (i.e. http://www.MyBlog.com). You can now get very cheap and affordable domains from some hosting. Let’s set up your custom domain step by step:

Step 1. Login your Domain Control Panel to Setup DNS Record.

The Domain Control Panel may looks different with different hosting or registrar. However the process is the same.

Create a ‘CNAME’ record and four ‘A’ records as shown in the following table:

If you register domains through the above link, the Domain Control Panel will look like the picture shown below:

If you do not know how to configure the ‘CNAME’ record and ‘A’ record, there is a very good website with a lot of video tutorials. Please check the domain and hosting video tutorials here.

If you are planning to register some domains to set up some blogs, you may consider to sign up a Domain Reseller Account at an affordable price.

Now the DNS records have been set up. When your visitors enter the URL in their browsers (e.g. http://www.YourDomain.com), the browsers will go to Google server to find your blog.

Please note that the new DNS records may take up to 24 hours to take into effect. Therefore be patient.

Step 2: Update the Setting of your Blogger

As we mentioned before that the browser will go to Google servers to find your blog when visitors enter the URL. However how can the browser find your blog as there are millions of blog hosting in Google servers? Therefore we have to let the browser know which blog is linking with the domain. Let’s link the domain with your blog.

Login Your Blogger Account:

Go to Setting -> Publishing screen. Click on the Custom Domain link as shown in the picture below:

If the domain has been registered, click on the ‘Switch to advanced settings’ link as shown:

The Advanced Settings screen appear. Fill in the domain information and other information as shown below. Then click on the SAVE SETTINGS button to save the changes.

The Advanced Settings screen appear again. Check on the “Redirect” box as shown below, fill in the “Word Verification” code. Click on the SAVE SETTINGS button to save the changes.

Done! That’s all.

This Blogger article shows how to set up a custom domain for your Blogger blog.

This Blogger article shows how to create a Horizontal Navigation Menu for your Blogger website. The horizontal menu is shown as below:

Step 1: Go to Layout >> Edit HTML window

Copy the following codes before the “</b:skin>” code or “]]></b:skin>“.

/* Header Horizontal Navigation Menu CSS Start Here */

.basictab{
padding: 3px 0;
margin-left: 0;
font: bold 12px Verdana;
border-bottom: 1px solid gray; /* set the bottom border to zero if not like */
list-style-type: none;
text-align: left; /*position of menu – left, center, or right*/
}

.basictab li{
display: inline; /* arrange in horizontal */
margin: 0;
}

.basictab li a{
text-decoration: none;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid gray;
border-bottom: none;
background-color: #99b2db; /* light blue */
color: #f3f3fb; /* this is font color */
}

.basictab li a:visited{
color: #f3f3fb; /* this is font color */
}

.basictab li a:hover{
background-color: #576fb5; /* dark blue */
color: black;
}

.basictab li a:active{
color: black;
}

.basictab li.selected a{ /*selected tab effect*/
position: relative;
top: 1px;
padding-top: 4px;
background-color: #576fb5; /* also dark blue */
color: black;

/* Header Horizontal Navigation Menu CSS END Here */

Please see the following two diagrams. It shows where is the “</b:skin>” code:

Step 2. Go to Layout >> Page Elements window

Since we wish to add the horizontal navigation menu directly under the Header, click on the “Add a Gadget” link as shown in below picture:

The Add a Gadget window pop up. Select the “HTML/JavaScript Gadget” as shown:

Copy the following codes to the Content field of “Configure HTML/JavaScript” window as shown:

<ul>
<li><a href=”http://YourBlogURL.com/”>Home</a></li>
<li><a href=”http://YourBlogURL.com/about-our-authors.html”>About Our Authors</a></li>
<li><a href=”http://YourBlogURL.com/my-websites.html”>My Favorite Websites</a></li>
</ul>

Click on the SAVE button to save the changes.

Result of Adding Horizontal Navigation Menu:

Click on the View Blog link. The horizontal navigation menu should appear under the Header Section:

This Blogger article shows how to add a Horizontal Navigation Menu under the Header.

The width of the original Blogger Minima Template is 660 pixels. This is a browser safe dimension until the year of 2009 when over 85% of monitors are using the resolution of 1024 x 768 and over. Therefore there is really no need to linger on such “browser safe” width dimension of webpages. A wider webpages means that you can hold more information on a single page rather than splitting on several webpages.

Before we start changing the width of Blogge Minima Template, let’s recall once again the original template.

As we can see, the following CSS selectors are required to modify if we wish to change the width of the Blogger Minima Layout. The CSS selectors are:

#outer-wrapper
#header-wrapper
#main-wrapper
#sidebar-wrapper
#footer

In this turorial, we are going to change the width of Blogger Minima Template to 900. Based on this criteria, we can design the following new layout easily.

New Blogger Minima Template No.1

This is actually also a browser safe layout but a little wider than the original layout.

This layout is good for Google AdSense as you can put the popular 300×250 Medium Rectangle and 160×600 Wide Skyscraper in the Sidebar. While the most popular 300×250 Medium Rectangle and 336×280 Large Rectangle Google AdSense can be put in the Blog Posts section.

Change the width property of the following CSS selectors according to the above table:

#outer-wrapper
width: 770

#header-wrapper
width: 770

#main-wrapper
width: 440

#sidebar-wrapper
width: 300

#footer
width: 770

New Blogger Minima Template No. 2

This layout is good for Google AdSense as you can put the popular 300×250 Medium Rectangle and 160×600 Wide Skyscraper in the Sidebar. While the most popular 336×280 Large Rectangle and 300×250 Medium Rectangle Google AdSense can be put in the Blog Posts section.

Change the width property of the following CSS selectors according to the above table:

#outer-wrapper
width: 880

#header-wrapper
width: 880

#main-wrapper
width: 550

#sidebar-wrapper
width: 300

#footer
width: 880

New Blogger Minima Template No. 3

This layout is good for Google AdSense as you can put the popular 300×250 Medium Rectangle and 160×600 Wide Skyscraper in the Sidebar. While the most popular 336×280 Large Rectangle Google AdSense can be put in the Blog Posts section.

Change the width property of the following CSS selectors according to the above table:

#outer-wrapper
width: 900

#header-wrapper
width: 900

#main-wrapper
width: 570

#sidebar-wrapper
width: 300

#footer
width: 900

New Blogger Minima Template No. 4

This layout is good for Google AdSense as you can put the popular 300×250 Medium Rectangle, 336×280 Large Rectangle and 160×600 Wide Skyscraper in the Sidebar. While the most popular 336×280 Large Rectangle Google AdSense can be put in the Blog Posts section.

Change the width property of the following CSS selectors according to the above table:

#outer-wrapper
width: 900

#header-wrapper
width: 900

#main-wrapper
width: 534

#sidebar-wrapper
width: 336

#footer
width: 900

This Blogger article shows how to customize or change the width of Minima template.