How To Download and Setup a Blogger Layout

The problem with Blogger blogs is that Blogspot does not host layout images for you. This means that you must find a place to host the layout images and then edit the code in the layout to reflect the new locations of the images. This is a straight-forward process, yet it may seem a bit scary to some since it involves code. Here is how you do it, start to finish:

1. Before you start, create a folder that you will use to store your template files. Also, make sure you have a tool for unzipping files, like Winzip or free PKWare. Generally, new computers have this type of tool pre-installed.
2. Download the layout you want to use. For example, I downloaded the Sunset #3 Layout at this link.
3. Click on OK, as shown (using Winzip) below.
   
4. Extract the files to the folder you created, as shown below (using Winzip).
   
5. Now, you need to find a place to host your images. There are many free image hosts. Photobucket is a good one and it is the one I will use in this demo. Join the service. Then upload your layout images by browsing the images folder, as shown below (using Photobucket). I used their bulk upload tool and browsed to the images folder and was able to select and upload them all at once! Note that if you upload images from more than 1 layout, you need to create a separate location (folder) on Photobucket or images from one layout will overwrite images from another.
   

   CLICK ON IMAGE FOR ENLARGED VIEW

6. Now you will need to open and view any one of the images you just uploaded. To do this, click on Save nd get Links, as shown below. Then copy the Direct Link code, also as shown below.

   

7. Paste the direct link code into a browser URL window. Then copy the URL. You especially want the portion of the URL that precedes the image name. See below.
   
8. Now open the file in your saved folder called “main”. You can open this file with the program Notepad by right clicking on it, as shown below.
   
9. Once in notepad, you have to do a find and replace of the word images every place where it precedes the name of an image file. Image files have .jpg, .png, and .gif extensions. The image URL must match your photo hosting URL. The second time I tried this I did a Replace All and it worked as well! Remember: The easy way to do this is to only grab the part of the URL from your hosted image that precedes your file name and do a find and replace. See below.
   
   
10. All should work right?  Well after I uploaded my main.xml file, as shown in  Step 3 of the page for changing Blogger Layouts and Settings., I found I was missing my header image. After some snooping around, I discovered that Photobucket renamed one of my files called Header.jpg to Header-1.jpg. They do this so there are not two files of the same name – there is another file called Header.png. To fix this, I opened my main.xml file, did a Find search for Header and then edited the file name, as shown below. Then I uploaded my main.xml file again and all was fine. With some other image host, you may not have to do this – I would still recommend Photobucket as its bulk upload feature is nice.

    
    Note that these instructions will apply to most any blogger template or layout you download – tell your friends!

Since hostgator allows unlimited additional websites, it only costs me $9/year to put up a whole new site on its own domain! That comes to about 80 cents a month!
Get Hostgator and Unlimited Domains! Click Here.

---

---

Need Help? Have Questions? Email Me!