Adjusting Blog Widths

To adjust the width of your blog, there are two options. The blog widths can be adjusted by navigating to the "Template" menu.  From here, the two options are "Customize", or "Edit HTML".

1. Some newer Blogger templates can be customized using the "Customize" menu.  From here, there are many options to adjust the overall width, as well as the sidebar width. Use of this menu depends on the template that has been selected for the blog.  Some older templates are not configured to allow changes to blog width. This is the easier version of the two. As you increase the sidebar, or main post, the overall width will be adjusted as well to keep the blog aligned properly.

2. Most templates can be adjusted using the "Edit HTML" menu.  However, this is the more advanced option of the two. Typically when adjusting blog widths, there will be three. You have:

1. Overall Blog Width
2. Main Post Width
3. Sidebar Width

This is where math will come in quite handy. First, locate all three widths and write them down. In some cases, the main post width, and sidebar width will not add up exactly to the overall blog width. This may be because of padding in between the main post section, and the sidebar. For simplicity, it is best to keep note of the difference in widths.

From here, the default blog width can be changed to any desired width. As an example, if 30 pixels are added to the sidebar, and 50 pixels are added to the main post section, 80 pixels must be added to the overall blog width. Before the blog is saved, it is always advisable to check the "Preview" option first. This will tell right away if a mistake has been made in calculating the width.

---

Changing blog width can allow for more room for posts as well as more room for content on the sidebar. Always keep in mind that if the blog width changes, the header will likely need to be redesigned as well in order to keep continuity with the rest of the blog. Also, if there is a custom background, that will need to be changed as well.

Creating the Blog Header

Most every blog (or website for that matter) will have a good header.  The header usually contains the name of the blog or website and some artistic design.  I usually find the header as the starting point for any web project.  I start with a header and then design my site around the header.  One of my favorite "styles" to use for designing a header is to start with a photo that relates to the site and fade it in the background and then use artistic font to type the blog or website name in the forefront using a shadow to make the site name stand out.  There are many different ways to go about designing a header, but that would surely be my favorite.

---

Finding the Blog Width

To create a header, start with any graphics program such as Photoshop, Fireworks, MS Paint, among others.  A good suggestion would be to check first the width of the blog.  In most cases, it works best to create the header using the same pixel width as the blog.  This can be done by one of two ways.

1. Navigate to "Template" > "Customize".  One of the options is "Adjust widths".  This should give you the overall blog width.

2. Navigate to "Template" > "Edit HTML" (using the new format you'll need to click "Proceed").  Finding the blog width can vary from template to template, but to start scroll down to "Body" or "Page Structure".  There should be a section of code listed as "#outer-wrapper".  Again, this may be labeled differently from template to template, but usually, it will be the largest width listed in the template, and using CSS structure, it will almost certainly be listed near the top.

Designing the Header

Using a graphics program, design the header according to your style.  The header can be any height although it would be advisable not to design to tall of a header as it will hide more of the blog content. The header should be saved as a JPG or GIF file format.

Uploading the Header

To upload the finished artwork, navigate to "Layout" and select the header widget at the top of the blog layout screen.

The available options for the blog header are Blog Title, Blog Description, and the image. To upload your image, click "Browse" and locate the file from the hard drive. Make sure to check the options below. If you have included the title of your Blog in the header, than you can probably choose "Instead of title and description".  This is the cleanest way to post the header.  Also, you will probably want to un-check the "Shrink to fit" box. If the blog header has been designed to the correct width, there is no need for this option.  Click "Save" and your blog header should be in place.

Adding the Facebook Social Plugin

With a couple easy steps, it is possible to add one of the many Facebook plug-ins to your blog or website.

1. The first step is to visit the Facebook Developer page.  There are many different options to choose from depending on what exactly you want to display on your blog from Facebook.  Once you choose the type of plug-in, you will need to customize the plug-in.

2. Facebook will also give many options of size, button names, border colors, etc...  These settings can be adjusted later if necessary.

3. After the plug-in has been chosen and customized, click the "Get Code" button.  This will bring up a window that provides the proper code to complete the installation your blog or website.

Installing the code

To install the code provided by Facebook, you'll first need to locate the tag.  The top code needs to be installed in it's entirety just below the body tag.  The second box of code will need to be pasted in the section of the website where the plug-in is to be displayed.  If the code, is being used for Blogger, you'll need to select "Layout", and then "Add a Gadget".  The proper Gadget for this code is HTML/Javascript.  Paste the code, save your work, and publish the updated page, and your Facebook plug-in should show according to the settings you chose.

---

Going a step further....

The Facebook plug-in can be customized more by using CSS. For example, we added a simple background color to our Facebook plug-in by adding the following code within our DIV tags.

style="background:#EDEDED;"

This code gave our plug-in a different colored background and you can add this in addition to other styles to enhance the plug-in to your liking.

Creating a Favicon

On all web browsers, next to the website address, there is a spot for a small icon. Some websites will have custom icons, while others will have none.  These custom icons are known as favicon. They are used for display next to the web address, and will also be displayed in the bookmark listing with all browsers. This icon can be a nice "add-on" for any website.

Steps for Creating a Favicon

1. To create a favicon, open up any graphics editor such as Macromedia Fireworks, Photoshop Elements, etc. Favicon icons are square and should have a resolution 16x16, 32x32 or 64x64 so the template you start with should be one of those sizes. Resolution can also be 128x128, but the file limit size for a favicon is 1MB.

2. Once the design is completed, the image will need to be saved as "favicon.ico".  The "ico" stands for the icon file type.  If the graphics program cannot save the image as an ICO image, save the file as either GIF or JPG. Once the file has been save, you will need to locate the file, and rename the file to "favicon.ico".

3a. To use the custom favicon with Blogger, go to the Layout menu option, and there is a box at the top of the template labeled "Favicon". Click on "edit" and the pop-up window will open.  Click "Browse" and locate your icon image file that was just created. Click "Save" to save the icon file in the Blogger layout.

3b. To use the custom favicon with a custom website, the favicon.ico file will need to be uploaded to the root directory on the website's web server using an FTP program.

4. Your custom favicon should show up immediately in your browser window after you reload your blog or custom website. If it does not show up, try refreshing your browser's cache and that should do the trick.

Adding META tags to Blogger

Meta Tags are the HTML tags that can be added to a website to provide additional information to search engines and the end users.  The two most popular Meta tags to add are the description and a list of keywords.  Along with the Title of your website, these are important pieces of information for search engines to rank your website (SEO), and also for users when your blog is pulled up by Google.

Adding Meta tags can be done by accessing the "Edit HTML" feature within the "Template" menu option.  Near the top of the HTML coding you will need to add these two lines of code below the <head> tag:

<meta content='' name='description'/>
<meta content='' name='keywords'/>

Within the quotes under the "content" attributes, you can add both a description, and also keywords.  To finish, click "Save Template".