How to Add CSS Code in Classic Blogger

Using New Blogger? We provide step-by-step instructons on adding CSS code in our post Adding CSS Code to Eliminate Image Borders. Just follow the directions right to the end and enter your CSS code instead of ours and you'll be all set!

---

Classic Blogger went away in 2020. We'll keep this blog post around for a while in case some folks still have access to it.

Step 1

From the Blogger dashboard click Theme on the left sidebar.

Step 2

Next, click the Customize button. The Blogger Theme Designer window should display as seen in the image.

Step 3

At the bottom of the left column click Advanced. The right side of the window displays a list of customizable items. Scroll to the bottom of the list and click Add CSS as shown in the image below.

Step 4

After clicking Add CSS, a blank area opens up to the right. Type the CSS code you want to add, or copy and paste into this area.

Step 4

When finished, don't forget to save your changes by clicking the SAVE button.

How to Make Your Blog Template Wider

Many mainstream websites now default to a width of about 940px - a safe width for 19" monitors. Since a limited number of web users have monitors of a smaller width, this is something you may wish to consider. Setup your Layout, widgets, and create at least one blog post before proceeding so you can see the changes you are making.

If your XML template has background images, changing widths may cause these images to no longer fit. You may have to disable some background images if increasing the width of your blog is important to you. As you make each change and Preview the result, make a note of which object was changed when a background image is no longer usable. See more at the bottom of this post.

Also, always type a comment on the line of code you changed that includes the original value. This not only helps if you want to start over, but it’s good to know which lines of HTML code you have changed. To change the width of your blog, follow these instructions. Only change the "width" or "min-width" line of code and ignore the other lines of code.

Get into your blog Layout and click Edit HTML. Click Download Full Template to save a fresh copy of your template to disk.

Press Ctrl-F to open the "find" box, and with your cursor in the "find" box, press the space bar and then type width. Press Next.

Changing Entire Blog Width to 940px

Your first stop should be the header-wrapper code and/or the body code. Both are shown below. If they have a width or min-width specified, it will be 660px or another large number. Change the value to 940px as shown below. Click Preview.


#header-wrapper {
width:940px; /* changed; value was 660px */
margin:0 auto 10px;
}

body {
margin: 0;
text-align: center;
min-width:940px; /* changed; value was 660px */
background: #4386ce url(http://whatever/image.gif) repeat-x $startSide top;
color: $textColor;
font-size: small;
}


Press Next again by the "find box" and you should see the outer-wrapper. The outer-wrapper also contains the entire blog width. Make the change as shown below, and preview your blog.


#outer-wrapper {
width:940px; /* changed; value was 660px */
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}


If you find a DIV called #content-wrapper which has the wide width, change it as well, and Preview.


#content-wrapper {
position: relative;
width:940px; /* changed; value was 660px */
background: #4386ce url(http://whatever/image.gif) repeat-y $startSide top;
}


Changing Main Area and Sidebar Widths

Now we must tell Blogger how to divvy up the width between the main portion of the blog (main-wrapper) and the sidebar (sidebar-wrapper). From the "find" box, press Next until you find the main-wrapper. The code for side-wrapper will probably be 4 or 5 items further down. The sum of the widths of main-wrapper and side-wrapper must be less than 940px or overlapping will occur due to margins.

My main-wrapper is 675px and my sidebar is 256px - for a total of 931px. Enter your desired width values for main-wrapper and side-wrapper and then Preview your blog for overlapping. When no more overlapping occurs, tweak the width values to suit.


#main-wrapper {
width: 675px; /* changed; value was 410px */
float: $startSide;
overflow: hidden;
}

#sidebar-wrapper {
width: 256px; /* changed; value was 220px */
float: $endSide;
overflow: hidden;
}


You may find other IDs and classes that have a width, such as #header .description. If your blog looks fine on Preview, do NOT change any other widths.

Disabling Background Images

Some XML Blogger templates include a footer in order to present a decorative image for the bottom of the blog. As mentioned above, increasing the width of the blog will mess up these background images and you will have to disable them.

When disabling background images, don't delete any code but just disable the image from displaying by adding several XXXXX immediately after ".gif" in the code. As you customize your template, you may not be sure which background image is which. Hopefully you took notes as you changed widths. In any case, disable one at a time and then Preview. If your change did not disable one of the unusable background images, remove the XXXXX and go to the next background image. For the Thisaway template, I had to disable background images for the following DIVs:

#content-wrapper, #main, #sidebar, #sidebar-wrapper, #footer-wrapper

How to Add a Website / Blog to Existing Google Analytics Account

If you have previously established a Google Analytics account for one or more blogs or websites and want to add another, it can be difficult because Google continues to change the interface and "hide" this option.

The instructions below assume that you have already established a Google Analytics account for one or more websites or blogs and now wish to ADD another website or blog in order to track its performance. HINT: Before proceeding, first add and verify the website or blog in your Google Webmaster Tools account before proceeding!

Also, if this website has an old Google Analytics snippet in the code, i.e. urchin, remove it first.

To add a new property:

• Log into your Google account and select Google Analytics from the list of products. The Account Home page will display. Now click the gear icon in the upper right corner. The Account Administration page will display.
• All of your accounts will be listed on the Account Administration page. Click the account to which you want to add a new website or blog to track. The next window will display a list of websites for that account.
• To add a new website, from the Properties tab (which should display first by default), click "+ New Property" and the Create New Property window will display.
• Enter a name for the website and select the appropriate http setting from the dropdown menu under Website's URL. Then, when the new box appears, enter the complete URL or domain name for the website. Select your time zone and click "Create property."
• Google Analytics will return to the page that lists the properties for your account. The new property you just created is displayed at the bottom. Click on it.
• If you have already verified the website in Webmaster Tools, before getting the tracking code, first click the "Property Settings" tab. At the bottom of the window under Webmaster Tools Settings, click "Apply. If successful, at the top of the window you will see a small, bright green "Success" flash for a moment or two.
• Now click the Tracking Code tab. Select what you are tracking and then copy the code provided. Google says to paste the code in the head of your code. (See note below). Leave this window open and go paste the code in your website code. When you have done this, return to this window and click "Save" at the bottom of the window. If Google Analytics is happy, another little bring green "Success" will flash at the top of the window.

If this post has been helpful, please consider linking to our blog or sharing!