Tutorial: Using free backgrounds with the Watermark Template

Do you use the Watermark or Simple template from the Blogger template designer? Have you tried to install free backgrounds with a disappointing end? Most free backgrounds are catered toward the Picture Window or Minima template. Which is fine unless you prefer to use the Watermark or Simple template.

Today I’m going to show you a simple trick for using free backgrounds in the Watermark template. This tutorial also works if you are using the Simple template.

First things first, back up your current template by going to your ‘Template’ tab and clicking the ‘Backup/Restore’ button in the top right of the screen. Then click the ‘Download full template’ button to save your current template to your computer.

Now on to business…

If you are already using the Watermark template, your design will look like one of the Watermark templates below:
1 234

If you do not already have the Watermark template installed, head over to the template designer by going to the ‘Template’ tab and clicking on the ‘Customize’ button. template

 Then click on one of the watermark templates (or Simple templates) to apply it to your blog. For this example we’ll click on the pink one.
Photobucket

STEP 1: In the template designer click ‘backgrounds.’ Click the ‘remove image’ link and click ‘ok’. (Note: if you are using the Simple template you can skip this step).
Photobucket

Click ‘Apply to blog’ and then click ‘Back to Blogger.’
Photobucket

STEP 2: In another window open up the free background from Designer Blogs you would like to use.
Highlight the code from your desired background and copy it using Ctrl+C or Command +C (if you on a Mac) or right click and select ‘copy’ using your mouse.
copycodescreenshot

STEP 3: Click your ‘Layout’ tab and then click ‘Add a gadget.’  Scroll down and find the ‘HTML/JavaScript’ gadget and click the (+) button to add it.
addagadget

STEP 4: Paste the copied code into the ‘Content’ box and click ‘Save.’
pastecode

Ugh… but this is what you see on your blog now…
screenshot

Let’s get rid of that huge red rectangle, shall we?!

STEP 5: Go to your ‘Template’ tab and click the ‘Edit HTML’ button.

edithtml

Click your cursor in the box where all the code is and press ‘Ctrl + F’ (or ‘Command + F’ on a Mac). This will open up a search box in the top right portion of the code box. searchbox

In the search box paste in the following code and press enter:

<Group description=”Backgrounds” selector=”.main-inner”>

This will lead you to the following section of code:

codesection

STEP 5: Change the color codes in red to say ‘transparent‘. DO NOT delete the quotation marks.

#c0a154” value=”#ee1133“/>
#ffcccc“/>

 

Now your code will look like this:

transparent” value=”transparent“/>
transparent“/>

transparent

 

Save and view your blog.
screenshot2Now, you’ll notice that your blog title may not show well depending on the background you chose. To change the font color go back into your Template Designer by clicking on the ‘Template’ tab and then clicking on the ‘Customize’ button. Once you are in the Template Designer click ‘Advanced.’advanced

Here you will find a list of items that you can customize. Click on ‘Blog Title’ to change the color of the blog title. You can select a font color, font size or even a new font to use here as well. You can also change the colors of the ‘Tabs Text’ and ‘Tabs Background’ likewise. blogtitle

Feel free to play around with things in the Template Designer until you get everything looking like you want. Your changes will not be saved until you click the ‘Apply to Blog’ button.

TA-DA! A new fancy background for your Watermark template!

finalEnjoy and happy blogging!

Please leave a comment or email us at info@designerblogs.com if you have any questions or would like to suggest an idea for a future tutorial.
coral-and-navy

Comments

  1. This was so helpful. Thank you so much for posting this! I just posted three of your Christmas backgrounds on my three blogs!

  2. This is wonderful background of watermark template.

  3. Robin says:

    Thank you very helpful…I would like to know how to add a header design. I have one but not sure how to make it to the top of the page? Thanks

  4. OMG! Thank you so much!

  5. said…

    thats cool , also very helpful tq

  6. Chelle says:

    Hi! Thanks for the tutorial–however, it seems as if Blogger has changed it’s layout, and I can’t seem to do Step 5 (the edit HTML section no longer has that long string of code).

    Can you help?

    Thanks!

  7. Thank you, Thank you, Thank you x’s a million! I was having so much trouble doing this and your instructions were so easy to follow! Amazing!!

Speak Your Mind

*