2008-12-21

My First Blog Template Layout!

I’ve created a template for use in Blogger!  I’m going to make it available to all, but ask if you need any customization (add your name to the Header and Site Button) that you donate $1.00 through Paypal. Just Click on Contact Me above and Donate and Fill Out the contact form with what you need.  Here’s the details on the Template:

  • PLEASE NOTE THIS HAS ONLY BEEN TESTED IN FIREFOX 3.0.5
  • Outer Wrapper = 800px
  • Main Wrapper = 595px
  • Sidebar Wrapper = 195px
  • Layout with lots and lots of widget room
  • Equal Column Lengths (by bloggerbuster.com)
  • Non-Scrolling Background Image
  • Comes with Site Button
  • Calendar replaces typical date (by OrangeVolt)
  • Linkbar

The Look and the Layout are above.  Click on the picture to see full size.

Now for the code:

Download the zipfile HERE.

Step by Step Installation Instructions:

  1. Once you’ve downloaded the file, extract the files to a location on your computer.  Remember this Location!
  2. If you can edit .png files – Edit the files called UpperHeader.png and SiteButton.png
  3. Once you’re done editing (remember if you can’t – you can just Paypal me $1.00) upload all the .png files to your favorite image hosting site.  I recommend Photobucket.com for this.
  4. Open the file called circles.xml.  You can use Notepad for this.
    • Find the place in the file by pressing ctrl+f and searching for:   YOUR LOCATION
    • The first item you will find is: 
    • Replace this entire line with the url of the MainBackground.png file you uploaded to your image hosting site.
    • Now keep searching for YOUR LOCATION
    • The next item you will find is:
    • Replace this entire line with the url of the BetweenSidebar.png file you uploaded to your image hosting site.
    • Keep searching for YOUR LOCATION
    • The 3rd item you will find is:
    • Replace this entire line with the url of the red3.png file you uploaded to your image hosting site.
  5. Now that you’re finished you can save the circles.xml file
  6. Now log in to your blog and click on Layout –> Edit HTML  (I highly recommend you back up your current template and widgets by following these instructions before proceeding any further!
  7. Browse to the circles.xml file on your computer and click upload
  8. If you didn’t back up your widgets and template you might not want to go any further…  See step 6 above.
  9. Click on Save and Confirm if prompted, otherwise just click on Save Template.  Okay, we’re almost done!
  10. Click on Page Elements at the top left of your screen
  11. Install Your Header Image
    • Click on Edit Next to Header
    • Click the radio button Instead of Title and Description
    • Check the Shrink to Fit box
    • Browse to the file called Header.png
    • When the image can be viewed, click Save
  12. Install your Navigation Images
  13. Insert your Upper Header Image
    • Click on Add a Gadget above your Header
    • Click the + Next to HTML/Javascript
    • Copy and Paste the following beneath Content
    • Replace YOUR LOCATION with the location address where you uploaded the corresponding .png file
    • Click SAVE
  14. Install your Site Button
    • Click Add a Gadget in your Sidebar
    • Click the + Next to HTML/Javascript
    • Copy and Paste the following beneath Content
    • Replace YOUR BLOG NAME with your blogspot URL and Replace YOUR LOCATION with the location address where you uploaded the corresponding .png file
    • In the title area, you may type whatever you like!  I use simply Site Button for mine
    • Click SAVE
  15. Add your Footer Divider
    • Click Add a Gadget in your Footer
    • Click the + Next to HTML/Javascript
    • Copy and Paste the following beneath Content
    • Replace YOUR LOCATION with the location address where you uploaded the corresponding .png file
    • Click SAVE
  16. Formatting to make the Calendar display the date
    • Click Settings –> Formatting
    • Change the Date Header Format to YYYY-MM-DD
    • Click Save Settings

That’s it, you should be up and running!

Don't forget to add your own widgets back in if you backed them up beforehand!
Posted by Jenn at 10:28:00 PM

0 comments click here to leave one!:

Post a Comment

Subscribe to: Post Comments (Atom)