Saturday, October 8, 2011

Has your blog been Pickled?

Pretty up your blog design today with a free, customizable, designer template created by Miss Pickle of Miss Pickle's Design Studio!

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.
Step #2. Choose your free Header Design

  • 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.
Step #3. Customize your Header
  • 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.
Step #4. Choose you Color Theme 
  • 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 EggColor Code: #9BE1DE

WatermelonColor Code:  #FA5E86
RedColor Code:  #B5181E
Baby PinkColor Code: #FDACBD

CoffeeColor Code:  #C5A98B
LavenderColor Code: #CCB9D6
GrayColor Code:  #999596
BlushColor Code:  #D57161

BlackColor 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!
    Congratulations! Your blog has just been Pickled! 

    5 comments:

    1. Wonderful document. It’s really a good guidance specially for new comer of this field. Glad to read your post. I like it and thanks for this.

      ReplyDelete
    2. Came across your videos on you tube. I follow everything to letter, it is not working. Background is blank and my header doesn't show up. Going to start over... and watch videos. Thanks

      ReplyDelete
    3. hiyah, i have a problem with my header. it keeps repeating itself? just wondering how to stop this thanks x

      ReplyDelete
    4. Worked out great! Here is a link to my new and improved blog. Thanks!

      www.theaccidentalmilitarywife.blogspot.com

      ReplyDelete
    5. There seems to be a problem with the Link Code, I get the following message:
      Error parsing XML, line 2, column 2: The markup in the document preceding the root element must be well-formed.

      ReplyDelete