June 30, 2011

Stars and Stripes


2-Column (Standard Width)
<script>document.write(unescape("%3Cstyle%20type%3D%22text/css%22%3Ebody%7Bbackground-image%3Aurl%28%22http%3A//backgrounds.blogdesignsbydani.com/JustSoScrappy/Stars and Stripes.jpg%20%22%29%3Bbackground-position%3Acenter%3B%20background-repeat%3A%20no-repeat%3B%20background-attachment%3A%20fixed%3B%7D%3C/style%3E%20%3Cdiv%20id%3D%22tag%22%20style%3D%22position%3Aabsolute%3B%20left%3A0px%3Btop%3A30px%3B%20width%3A150px%3B%20height%3A50px%3B%22%3E%3Ca%20target%3D%22_blank%22%20href%3D%22http%3A//www.blogdesignsbydani.com%22%20title%3D%22http%3A//blogdesignsbydani.com%22%3E%3Cimg%20border%3D%220%22%20src%3D%22http%3A//backgrounds.blogdesignsbydani.com/tags/DaniRedWhitenBlue.png%22/%3E%20%3C/a%3E%3C/div%3E"))</script>
 
  3-Column (Wide Width)
<script>document.write(unescape("%3Cstyle%20type%3D%22text/css%22%3Ebody%7Bbackground-image%3Aurl%28%22http%3A//backgrounds.blogdesignsbydani.com/JustSoScrappy/Stars and Stripes_3Column.jpg%20%22%29%3Bbackground-position%3Acenter%3B%20background-repeat%3A%20no-repeat%3B%20background-attachment%3A%20fixed%3B%7D%3C/style%3E%20%3Cdiv%20id%3D%22tag%22%20style%3D%22position%3Aabsolute%3B%20left%3A0px%3Btop%3A30px%3B%20width%3A150px%3B%20height%3A50px%3B%22%3E%3Ca%20target%3D%22_blank%22%20href%3D%22http%3A//www.blogdesignsbydani.com%22%20title%3D%22http%3A//www.blogdesignsbydani.com%22%3E%3Cimg%20border%3D%220%22%20src%3D%22http%3A//backgrounds.blogdesignsbydani.com/tags/DaniRedWhitenBlue.png%22/%3E%20%3C/a%3E%3C/div%3E"))</script>

Design Elements by Just So Scrappy
(from her kit called Liberty)

Free Design Program

Are you interested in making your own designs but don't have the software you need to get started? I recently found a design program that is very similar to Photoshop, is free and requires no download. You create your designs right on the website and you can still save them to your computer.

I have only played with this a little but I will try to use it in my design tutorials. In the meantime, check it out!

June 29, 2011

Puzzle Pieces Template

By using this template, you agree to the terms of use.

 This template includes:
  a wide 2-column layout
  a background
  a matching header
  a post icon (picture next to the post title)
  a post divider (picture in between each post)

You can add/change:
  the font  (Click here to learn how.)
  the font colors
  the Blog title and description shown on the header

Don't forget to add my button to your sidebar. Here's the code:




<center><a href=http://www.blogdesignsbydani.com/><img src="http://bdbd.blogdesignsbydani.com/Dani Button.png"/></a></center>




Design Elements by Just So Scrappy
From her kit Hope for Brady

June 28, 2011

Uncovering Fireworks

2-Column (Standard Width)
<script>document.write(unescape("%3Cstyle%20type%3D%22text/css%22%3Ebody%7Bbackground-image%3Aurl%28%22http%3A//backgrounds.blogdesignsbydani.com/JustSoScrappy/Uncovering Fireworks.jpg%20%22%29%3Bbackground-position%3Acenter%3B%20background-repeat%3A%20no-repeat%3B%20background-attachment%3A%20fixed%3B%7D%3C/style%3E%20%3Cdiv%20id%3D%22tag%22%20style%3D%22position%3Aabsolute%3B%20left%3A0px%3Btop%3A30px%3B%20width%3A150px%3B%20height%3A50px%3B%22%3E%3Ca%20target%3D%22_blank%22%20href%3D%22http%3A//blogdesignsbydani.com%22%20title%3D%22http%3A//www.blogdesignsbydani.com%22%3E%3Cimg%20border%3D%220%22%20src%3D%22http%3A//backgrounds.blogdesignsbydani.com/tags/DaniRedWhitenBlue.png%22/%3E%20%3C/a%3E%3C/div%3E"))</script>
 
  3-Column (Wide Width)
<script>document.write(unescape("%3Cstyle%20type%3D%22text/css%22%3Ebody%7Bbackground-image%3Aurl%28%22http%3A//backgrounds.blogdesignsbydani.com/JustSoScrappy/Uncovering Fireworks_3Column.jpg%20%22%29%3Bbackground-position%3Acenter%3B%20background-repeat%3A%20no-repeat%3B%20background-attachment%3A%20fixed%3B%7D%3C/style%3E%20%3Cdiv%20id%3D%22tag%22%20style%3D%22position%3Aabsolute%3B%20left%3A0px%3Btop%3A30px%3B%20width%3A150px%3B%20height%3A50px%3B%22%3E%3Ca%20target%3D%22_blank%22%20href%3D%22http%3A//www.blogdesignsbydani.com%22%20title%3D%22http%3A//www.blogdesignsbydani.com%22%3E%3Cimg%20border%3D%220%22%20src%3D%22http%3A//backgrounds.blogdesignsbydani.com/tags/DaniRedWhitenBlue.png%22/%3E%20%3C/a%3E%3C/div%3E"))</script>

Design Elements by Just So Scrappy
(from her kit called Liberty)

June 23, 2011

Scattered Stars Header

Use with the background: Scattered Stars



http://headers.blogdesignsbydani.com/JustSoScrappy/Scattered Stars Header.jpg

Design Elements by Just So Scrappy
(from her kit called Freedom)



June 17, 2011

Out of Town

Hi Everyone,

Just wanted to let you know that I am out of town (have been all week). I posted a tutorial and if I have time will do one more small one. But, I can't do any backgrounds or headers until I get back. I don't have my computer with me. I will make some more 4th of July backgrounds and headers as soon as I get back. If you have any tutorial requests, let me know!

~Dani

June 16, 2011

How to Add Your Own Sidebar Titles

Changing the fonts on your blog titles can really help your blog to stand out. (Read here to learn how to do it.) But if you want to do even more, you can add your own custom titles to your sidebar. Here is an example of custom sidebar titles:

Here's how to do it yourself: (Remember to click on an image to enlarge it.)

1. First, you will need any software that will allow you to create and edit graphics. I am using Photoshop Elements here, but you can apply these instructions to any graphics editing program.

To start, open a new file:

Start with a width of 200 pixels and a height of 100 pixels at a resolution of 72 pixels/inch. If you need to adjust it later, you can. Use RGB Color for web images. If your software allows you to have a transparent background, select Transparent. If it does not, you will have to make some adjustments that I will discuss later in these instructions.

2.  Type the text that you would like in your title. Add any effects or colors that you would like.



3. Add any embellishments or designs to your title.


You can create your own graphics or use clip art or digital scrapbook kits to add your embellishments. Just make sure that you check the terms of use of the creator/designer whose images you use. Some do not allow them to be used for websites/blogs or for commercial use (if your site is a business site).

4. Save your file. If you have a transparent background, save your file as a png. (What's a png? Read here.) If your graphics program does not allow you to save a file as a png, then you will have to do one of the following:

  a. Either alter your image so that it is a rectangle as you see below. Then save it as a jpg file.

OR
  b. Color the background so that it matches the background of your blog and save it as a jpg file.

5. Upload your image onto a site like Photobucket. You will need to create an account, if you haven't already. (It is free at Photobucket.)


6. Now you need the link code for your image. After you upload the image and before you go to the album, select the image and then choose "Generate link codes for selected".


A window will then pop-up:



If you click in the box for the Direct Link, the link will be copied to your computer's clipboard and you can then simply paste it where you need it.

(If you accidentally saved the image before getting the link code and you are now in your album, hover your mouse over your image until you see the option "Share". Click "Share" and then click "Get link code" from the pop-up window. Click the "Direct link" code until it is all highlighted and then copy it by choosing Edit, Copy or by pressing Ctrl-C on your keyboard.)

7. Time to add the code to your blog. Go to the Design tab from your Blogger Dashboard. Make sure you are on the Page Elements page and click "Add a Gadget" from the space that represents your blog sidebar. Choose "HTML/JavaScript". A window will pop-up. Do not type a title in this box. Type the following into the main box:

<center><img src="Direct Link"></center>

Replace the words Direct Link with the link you copied from Photobucket (or whatever site you used). 
Click Save.  

8. Now for a few adjustments. Move the new gadget so that it sits right above the gadget it is the title for. For example, if your title says, "About Me", place it right above the gadget containing your Profile. 

Also, you will need to remove the titles that are already in place. To do this, click on the gadget you have created a title for. In the box containing the title, delete the text you see there and click Save.

Do this for each title that you have created a title image for.

9. Once all images are created and on your blog, you may notice that your blog has dotted lines in between your image and the corresponding gadget. (This is the case with the Blogger Minima template. Other templates may have similar cases.)

If you have the Minima template, do the following to remove the dotted lines. Go to the Design tab and click "Edit HTML". Scroll down until you see the following. (If you can't find it, click Ctrl+F and type the following into the search box.):


    .sidebar .widget, .main .widget {
      border-bottom:1px dotted $bordercolor;
      margin:0 0 1.5em;
      padding:0 0 1.5em;
     }


Change the part in red from 1px to 0px. Click Preview and then Save if everything looks ok.

Click View Blog and you are done! You now have your own custom sidebar titles!

June 10, 2011

Scattered Stars


2-Column (Standard Width)
<script>document.write(unescape("%3Cstyle%20type%3D%22text/css%22%3Ebody%7Bbackground-image%3Aurl%28%22http%3A//backgrounds.blogdesignsbydani.com/JustSoScrappy/Scattered Stars.jpg%20%22%29%3Bbackground-position%3Acenter%3B%20background-repeat%3A%20no-repeat%3B%20background-attachment%3A%20fixed%3B%7D%3C/style%3E%20%3Cdiv%20id%3D%22tag%22%20style%3D%22position%3Aabsolute%3B%20left%3A0px%3Btop%3A30px%3B%20width%3A150px%3B%20height%3A50px%3B%22%3E%3Ca%20target%3D%22_blank%22%20href%3D%22http%3A//www.blogdesignsbydani.com%22%20title%3D%22http%3A//www.blogdesignsbydani.com%22%3E%3Cimg%20border%3D%220%22%20src%3D%22http%3A//backgrounds.blogdesignsbydani.com/tags/DaniRedWhitenBlue.png%22/%3E%20%3C/a%3E%3C/div%3E"))</script>
 
  3-Column (Wide Width)
<script>document.write(unescape("%3Cstyle%20type%3D%22text/css%22%3Ebody%7Bbackground-image%3Aurl%28%22http%3A//backgrounds.blogdesignsbydani.com/JustSoScrappy/Scattered Stars_3Column.jpg%20%22%29%3Bbackground-position%3Acenter%3B%20background-repeat%3A%20no-repeat%3B%20background-attachment%3A%20fixed%3B%7D%3C/style%3E%20%3Cdiv%20id%3D%22tag%22%20style%3D%22position%3Aabsolute%3B%20left%3A0px%3Btop%3A30px%3B%20width%3A150px%3B%20height%3A50px%3B%22%3E%3Ca%20target%3D%22_blank%22%20href%3D%22http%3A//www.blogdesignsbydani.com%22%20title%3D%22http%3A//www.blogdesignsbydani.com%22%3E%3Cimg%20border%3D%220%22%20src%3D%22http%3A//backgrounds.blogdesignsbydani.com/tags/DaniRedWhitenBlue.png%22/%3E%20%3C/a%3E%3C/div%3E"))</script>

Design Elements by Just So Scrappy
(from her kit called Freedom)

Matching Header

June 6, 2011

Puppy Prints

2-Column
<script>document.write(unescape("%3Cstyle%20type%3D%22text/css%22%3Ebody%7Bbackground-image%3Aurl%28%22http%3A//backgrounds.blogdesignsbydani.com/Crazy4Monograms/Puppy Prints.jpg%20%22%29%3Bbackground-position%3Acenter%3B%20background-repeat%3A%20no-repeat%3B%20background-attachment%3A%20fixed%3B%7D%3C/style%3E%20%3Cdiv%20id%3D%22tag%22%20style%3D%22position%3Aabsolute%3B%20left%3A0px%3Btop%3A30px%3B%20width%3A150px%3B%20height%3A50px%3B%22%3E%3Ca%20target%3D%22_blank%22%20href%3D%22http%3A//www.blogdesignsbydani.com%22%20title%3D%22http%3A//www.blogdesignsbydani.com%22%3E%3Cimg%20border%3D%220%22%20src%3D%22http%3A//backgrounds.blogdesignsbydani.com/tags/DaniBrown.png%22/%3E%20%3C/a%3E%3C/div%3E"))</script>
 
  3-Column
<script>document.write(unescape("%3Cstyle%20type%3D%22text/css%22%3Ebody%7Bbackground-image%3Aurl%28%22http%3A//backgrounds.blogdesignsbydani.com/Crazy4Monograms/Puppy Prints_3Column.jpg%20%22%29%3Bbackground-position%3Acenter%3B%20background-repeat%3A%20no-repeat%3B%20background-attachment%3A%20fixed%3B%7D%3C/style%3E%20%3Cdiv%20id%3D%22tag%22%20style%3D%22position%3Aabsolute%3B%20left%3A0px%3Btop%3A30px%3B%20width%3A150px%3B%20height%3A50px%3B%22%3E%3Ca%20target%3D%22_blank%22%20href%3D%22http%3A//www.blogdesignsbydani.com%22%20title%3D%22http%3A//www.blogdesignsbydani.com%22%3E%3Cimg%20border%3D%220%22%20src%3D%22http%3A//backgrounds.blogdesignsbydani.com/tags/DaniBrown.png%22/%3E%20%3C/a%3E%3C/div%3E"))</script>

Design Elements by Crazy-4-Monograms
(from her kit called Playful Paws)

June 2, 2011

Floral and Lace Header

Use with the background: Floral and Lace



http://headers.blogdesignsbydani.com/Crazy4Monograms/Floral and Lace Header.jpg

Design Elements by Crazy-4-Monograms
(from her kit called Mom's the Word)



June 1, 2011

New Designs Will Stay

If any of you have been worried from my last post that your background will be deleted, please don't. The backgrounds I am thinking of removing are my very early ones from 2009. If you are using any of those or love any of them, please check the corresponding box so that I know and do not delete it.

Thanks,
~Dani