How to Change the Width of Blogger Blogs

Modifying the Width of Your Blogger Blog

Here is a quick step by step tutorial on how to change the width of your Blogger Blog.

I have provided screenshots of each step - just follow along and you shouldn't have any problems.

Before you start create a backup of your current blog just in case there is a problem.

I will show you how to change the standard template so that the width is the same as this blog. This basically entails 4 things. First you increase the width of the Outer Wrapper and then you increase the width of the Header and then the two columns inside the outer wrapper. This would be the Post column and then the Sidebar column. Lastly you increase the width of your Footer.

You can click on all images to enlarge them.

Step One

Open "Layout" and choose the "Edit HTML" option.



Note: I am using the Minima Template for this demonstration - if you have a different template just find the appropriate section - the steps are the same.

Step Two


Scroll down to the Header section and change the Header Wrapper width to 820px



Step Three

Scroll down to the Outer Wrapper section and change the width to 850px



Step Four

Change the Outer Wrapper "Text-Align" to "left"



Step Five

Change the Main Wrapper width to 550px - this is located right below the Outer Wrapper section. The Main Wrapper is your Post Column.



Step Six

Change the Main Wrapper "float" to "left".



Step Seven

Change the Sidebar Wrapper width to 270px. The Sidebar Wrapper is located right below the Main Wrapper.



Step Eight

Change the Sidebar Wrapper "float" to "right".



Step Nine

Scroll down to the Footer section and change the width to 850px.



Click "Save Template" and you are done.

This is what you have just done;

You widened the size of your usable blog space to 850px. ( The Outer Wrapper )

Inside the Outer Wrapper you have changed the width of the Three Sections that make up your blog.

1) The Header section - 820px

2) The Main Wrapper section which consists of your two columns;

- The Post Column - 550px
- The Sidebar column - 270px

3) The Footer section - 850px

You will notice the Header section is 30px less than the Outer Wrapper.

The two columns add up to 820px - also 30px less than the Outer Wrapper.

I have made the Footer the same size as the Outer Wrapper.

You can play with different widths but be sure that none of the other wrappers add up to more pixels than what you set the Outer Wrapper at. Your two columns should be at least 30px less than the Outer Wrapper so that they have a space between the two columns. The Header should be a little less as you don't want it bleeding right to the edge. (It just looks better) The Footer can be the same width as the Outer Wrapper.

Cheers,

Griz

New Version of WordPress 2.5 is Released!

There are good news came to the WordPress Blogging Platform fans. New software WordPress 2.5 has been released today, marking significant improvements and bringing new functional features to the bloggers. Among the obvious software enhanced features are multi-file uploading, one-click plug-in upgrades, built-in galleries, customizable dashboard, salted passwords and cookie encryption, media library, a WYSIWYG that doesn’t mess with your code, concurrent post editing protection, full-screen writing, and search that covers posts and pages. One of the biggest changes is related to better appearance of the administration backend, which is described as being a “Cleaner, faster, less cluttered dashboard.” It is now widget friendly, and users can include items such as stats, matching the functionality of MovableType Blogging Platform.

Some User Features Details:

Dashboard Widgets- the dashboard home page includes different widgets, showing fun stats about your posting, latest comments, people linking to you, new and popular plug-ins, and WordPress news. All the widgets are customizable for the administrator’s convenience.

Multi-file upload with progress bar - in the previous software release, uploading large files or multiple files was a long and unreliable process. User could upload just one image at a time. Now you can select a whole of folder images or music or videos at once and software will monitor the progress of each upload.

EXIF extraction - if you upload JPEG files with EXIF metadata (like camera make and model, aperture, shutter speed, ISO, et al.) software will record all the data into custom fields you can use in your template.

Search posts and pages - in the previous version search used to cover just posts, now it includes pages as well, and new themes can style or sort pages differently in presented results.

Tag management - you can now add, rename, delete, and managed your tags from inside WordPress, with no additional plug-ins.

Password strength meter - software reports the strength of your password, helping you to pick a secure one.

Concurrent editing protection - a big improvement achieved in the editing abilities for multi-author blogs. Now if you open a post at the moment when someone else is editing, WordPress locks it and prevents you from saving your changes until the other person is done.

Plug-in upgrades - automatic downloading and installing the upgrade for plug-ins you use. Depending on your host setup, you may, however, be asked for your FTP password.

Visual post editor- Authors express the improvement to the editor by the statement “it doesn’t mess with your code anymore.” Software is now using version 3.0 of TinyMCE, which ensures a better compatibility with Safari, and improves integration and interaction with complex HTML.

Built-in galleries- when you take advantage of multi-file upload to upload a bunch of photos, you can much easier embed picture galleries into your page. It will display all your thumbnails and captions linking each picture to a page where people can comment on the individual photos.

The software downloading link: http://wordpress.org/download/

A brief video tutorial for some of the features:

Brief Overview of WordPress 2.5

Sources and Additional Reading:

http://wordpress.org/development/2008/03/wordpress-25-brecker/

http://blog.wired.com/monkeybites/2008/03/catch-a-sneak-p.html

Attract traffic using Blog TopSites

Joining Blog TopSites are one of the ways to bring traffic(Free!) to your blog. It takes just a bit of effort on your part to get going. Generally, you will need to register with the site and get your blog approved. Once approved you get your personalized code block that you need to add to your blog. This code will help visitors of your blog to vote for your blog. The more votes you get, the higher you climb on the list and are more likely to get more visitors.

Here's a small list of Blog Topsites where you can register your blog :

http://topsites.blogflux.com/
http://www.topbloglists.com/
http://www.blogelites.com/
http://blog505.com/
http://topblogsites.net/
http://www.topblog.ws/
http://www.blogista.net/
http://topsites.technoized.com/blog
http://blogsites.in/
http://www.stateyourblog.com/
http://www.blogranking.us/
http://www.blogsontop.com/
http://www.topblogarea.com/
http://www.blogrankings.com/
http://www.top100bloggers.com/

Technorati Widget for Blogger

Technorati.com is a collection of large number of blogs and is visited by people all over the world looking for blogs to browse. Your objective should be to get visitors from Technorati.com to visit your blog.

The first step in this process would be to join Technorati and go through the "Claiming your Blog" process. You are more likely to attract more visitors, if your blog is ranked high on Technorati. So get the Technorati Widget and request your visitors to vote for your blog.

Here's how you get your widget. Sign into http://www.technorati.com/signup [Opens in a New Window] with your user id and password.

In your account area, Click on the link labelled "Favorites" on the Technorati navigation bar. On the next screen, Under the sidebar heading "Ins and Outs", find the link to your favorite button, where it says :

"Buttons: Help Technorati members favorite your blog with a button."

If you have added multiple blogs to Technorati, you will have to select a blog from the combo box to generate the code for that blog. The page generates three different code blocks. choose the one that suits your page and copy the code and paste into your template(Classic Templates users). XML blogger users read the post on How to add HTML or JavaScript into blogger.

Feedjit Widget for Blogger

Feedjit.com offers 4 widgets for bloggers and webmasters.

The most popular feedjit widget(which you may have seen on other blogs already) is the "Live Traffic Feed" Widget.

If you are a Blogger Layouts(XML Blogger) or TypePad user, the readymade widget on the site will install the code on your blog in a few clicks. Other blogs and websites will have to copy-paste the code from the site into their template.

Creative Commons License for Blogger

Creative Commons provides free tools that let authors, scientists, artists, and educators easily mark their creative work with the freedoms they want it to carry. You can use CC to change your copyright terms from "All Rights Reserved" to "Some Rights Reserved."

To get the creative commons license for your blog go to http://creativecommons.org [ Opens in a New Window ]. On the top of the page, click "License you work" link to continue. On the next screen you can select the licensing options for your blog.

After you select your license you can choose a graphic for the license and the HTML code will be generated on the page.

Classic templates users of blogger can copy-paste the HTML code into their template. XML Blogger users see this post on How to add HTML/JavaScript to Blogger.

ShoutBox for Blogger

What is cooler than a guestbook, chat and bulletin board? It's a Shoutbox from MyShoutBox.com

This is a feature packed free service for blogs and websites. Here's a list of features that MyShoutBox.com offers

You can add this shoutbox to your blogger blogs after an easy and fast registration process. After Registration you are given a ID/Password, with which you have to login to access your shoutbox management area. Select the link "Code Generation" and set the options for your shoutbox( or leave the default settings, you can always change that later! ) and click "Generate Code".

Classic templates users of blogger can copy-paste the HTML code into their template. XML Blogger users see this post on How to add HTML/JavaScript to Blogger.