| I promised a couple times to show how to do this, and a few people have asked for it, so here's the long-awaited post on how to use backgrounds from The Cutest Blog on the Block. The ladies at TCBOTB have streamlined their instructions for Blogger blogs, but you can use them on HSB templates too, if you have time to play... or you can take the instructions below verbatim. If you are super-fond of your current template/layout/background, be SURE to back up your code before you begin. I usually go to the Edit Template area and copy/paste everything into Notepad or Word and save it. This way, if I don't like what I've done while I'm experimenting, I can just paste the old code back in and I'm back to something that works. So, if you've backed up your current blog and are ready to begin... let's go! STEP 1: Go into your blog's template area and click "Choose New Template".  STEP 2: Choose the "Soap" Template.  Any HSB template would work, but I chose this one for the sake of simplicity. If you work with another template, you may have to fiddle around with other settings inside the template, and I'm not an expert in coding websites, so I'm only comfortable giving advice on this particular element (i.e. applying the background). If you use another template, you will need time to play with the other elements (i.e. columns, headers, etc) on your own. Hey, it's how I learned this much, so if you have the patience it's worth it! OK, back to the instructions... STEP 3: Be SURE you have backed up your current blog template before proceeding. After you click OK, your current template will be overwritten.  STEP 4: You will be given the below choices. Click Edit Template.  STEP 5: This is the fun part... Open a new window or tab in your browser, so you can go back and forth. Go to The Cutest Blog on the Block and select a background you like. I will be using one they titled "Sassy Santa" for this example. Click on the background. You will be taken to a page showing you the background you selected and, if you scroll down, instructions for Blogger blogs. We can ignore the Blogger instructions, as they don't apply on HSB, but the part below the instructions is the code that is the secret to putting the background in your blog. Select the code in between the curly brackets, as shown below. Do not include the curly brackets, just the part in between.  Because this is not as easy to read as I had hoped, it's the part that starts: background image: url all the way through the part that says: background-attachment: fixed STEP 6: Return to the window or tab where you are working on your HSB template. Paste the code you just copied into the BODY section of your template, as shown below  This applies the background to your blog. But we aren't quite finished yet. STEP 7: We have to add in the "Link Back" button to the background, giving credit where credit is due. So, go back to your TCBOTB window or tab and copy another bit of the code as shown below:  It the part that is between the "div" tags... STEP 8: Then go back to the tab or window where you are working on your template. Paste the code you just copied into the template AFTER the "end of head" tag and BEFORE the "begin body" tag, as shown below:  STEP 9: Now we have to make an edit to the code you just pasted in, so that the button isn't covered up by the HSB banner at the top of the blog. Edit the code as shown below so that the top position is 60px (it will be 30px before you edit):  Step 10: We're almost done! We need to edit the HSB template so that the columns fit in between the edges of the background. Look down just a few lines from where you pasted the Link Back code we just worked on until you see "BEGIN LEFTSIDE". Just above that, change the td width to 500, as shown below:  STEP 11: Click Preview Changes to make sure it looks OK. Now you can either Save Changes, or continue working with font styles and colors, or whatever else you want to play with. So, there you have it... how to apply TCBOTB backgrounds to your HSB blog! Have fun! ~ . |
| Post A Comment! :: Send to a Friend! |
|
Entry 100 of 205 Last Page | Next Page |
| Mon | Tue | Wed | Thu | Fri | Sat | Sun |
|---|---|---|---|---|---|---|
| 1 | ||||||
| 2 | 3 | 4 | 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 | 13 | 14 | 15 |
| 16 | 17 | 18 | 19 | 20 | 21 | 22 |
| 23 | 24 | 25 | 26 | 27 | 28 | 29 |
| 30 | ||||||
.gif)
~November 19, 2008
AWESOME!