How to Move Blogger Blog CSS to an External File

A link to an external CSS file can make your blog download faster. Use a link like this in Section 2, Step 5.

If you have a regular website or server space where you can store files, you can make your Blogger blog download faster by moving the stylesheet to your external server.

Difficulty:

Moderately Challenging

Instructions

Things You'll Need

• A web site (not your Blogger blog) where you have space to store a stylesheet.
• A Blogger blog
• A basic text editor
• An FTP tool

Copy and Save the Styles

1. Sign in to Blogger

2. Go to the Template tab and select the Edit HTML link.

3. Start copying right after the first style tag.

   Find the beginning of the styles in the template. You'll see the opening style tag. (See arrow in image.) Place your cursor at the beginning of the first line AFTER the opening style tag.

4. Stop copying right before the ending style tag.

   Drag your cursor down the page until you reach the line right BEFORE the closing style tag to select all the styles. (See arrow in image for ending style tag.)

   Copy the highlighted material.

   Leave everything highlighted in the template. You'll need it again later.

5. Go to a basic text editor. You can also use HTML editing software such as Dreamweaver, but that isn't required. Paste the styles you copied into a new document.

6. Save the document with a name such as mystyles.css or blogstyles.css. Save it in the root folder of the web site where you plan to upload it.

Upload the Styles to Your Server

1. Open your FTP (File Transfer Protocol) application and connect to your web server.

2. Upload the mystyles.css file to your server.

3. In a browser, find the stylesheet and display it in the browser. Copy the entire URL, including the http. Since the stylesheet is not on Blogger, you'll need the complete URL to link it to your blog. The URL should be something like http://www.mysite.com/mystyles.css.

4. Go back to the template on Blogger. If the styles are not still highlighted, select them again. Delete them.

   Also delete the opening and closing style tags. Leave your cursor in the spot where they were.

5. In the place where the deleted styles used to be, write a link to the new stylesheet on your external server. See the image at the very top of the article to see how to write the link. Of course, the URL should be customized for your server.

6. Click Save Template Changes. Use Preview to make sure the new link to the external stylesheet is working properly. When you're sure everything is working right, republish your entire blog.

Tips & Warnings

• An external stylesheet with a CSS file extension does not need opening and closing style tags.

• If things go horribly wrong, check the link you wrote to the external stylesheet. Every part of it should be exactly like the example link image at the beginning of the article, except with your personalize web address.

• If things go horribly wrong, you can paste the stylesheet back into the template. Just remember to add the opening and closing style tags, too. And, remember to remove the link to the external stylesheet.

Resources

• Blogger