Follow these simple steps to customize and install your new design on the Blogger Platform (no knowledge of HTML or CSS required)!
Step #1. Set Up your accounts. (If you already have a blogger and Photo Bucket account, you may skip this step.)
- Set up a free blog account at www.blogger.com, select the "Simple" Template as your design.
- Set up a free photo hosting account at www.photobucket.com.
- Save the header of your choice to your computer. Click HERE to view our header photo gallery! *Backgrounds are not visible on these headers, but after you add your background to your blog, it will show up behind you header image, as the sage stripes do in this example.
- Open your saved header image file in any photo editing program and add text to your header. (blog title, tag line, etc.) *If you don't own photo editing software, no problem! You can download a free trial of Photo Shop Elements HERE. You can also use Paint, Gimp, and many other free programs available on the web!
- After you have saved your header, you must save it as a PNG file and upload it to your Photo Bucket account.
- Choose a Background. View all available backgrounds HERE. Hover over the background image of your choice and copy the Direct Link to that image from the image box. Paste that link into Note Pad or any type of text document. You will need to add this code to your blog later.
- Choose a Footer. View all available footers HERE. Find the footer image that matches the color of your header image. Copy and paste the Direct Link in to your text document, just as you did for the background image.
- Pick your Title Background color from the list below. You will also want to copy and paste the color code (including the # sign!) onto your text document, as you did for your background image and your footer. *The color used in this example is Sage.
|Robins Egg||Color Code: #9BE1DE|
|Watermelon||Color Code: #FA5E86|
|Red||Color Code: #B5181E|
|Baby Pink||Color Code: #FDACBD|
|Coffee||Color Code: #C5A98B|
|Lavender||Color Code: #CCB9D6|
|Gray||Color Code: #999596|
|Blush||Color Code: #D57161|
|Black||Color Code: #000000|
|Sage||Color Code: #dbdda9|
Step #5. Customize and install your Template!
- Click on the code link below. You will be taken to a new page that has your HTML code for your template.
- Copy the entire code, and paste it into a text editor. Replace the blue text with your three image links and sidebar background color code.
- Copy the entire customized code.
- Log into your Blogger account. Under the "Manage Blog" Section, find your blog and click the "Design" link. You will then be taken to your "Page Elements" section of your dashboard.
- On the upper left hand corner, click on the "Edit HTML" tab.
- Under the "Edit Template" section, you will see a box filled with HTML code. This is your blogs current template.
- Highlight all of the existing HTML code in the box and delete it. Paste in the new HTML code that you just edited.
- Click "Save Template", then select "Keep Widgets".
- Click on the "Page Elements" tab at the top left hand corner of the page. Click on the Header widget that contains the Title of your Blog and remove it. This will remove the Title from showing up on your header image when you view your blog live.
- ALL DONE!