Blog Designs by Dani: May 2011

May 30, 2011

I Need Your Input!

Hello Everyone!

I am in need of your help. In order to run this blog, I have to store all the images that I post which takes up a lot of space! I know that there are some of my backgrounds and headers, mostly my older ones, that nobody uses. I want to delete those older backgrounds that nobody uses, but I need your help so that I don't delete ones you are using.

I need you to put a check next to "Used It" for the backgrounds you are using now or will be using (if it is a seasonal background). I don't want to delete anyone's background, but I need more space, so spread the word to your friends! I won't delete any for 2-3 weeks, but do it now before you forget!!

Thanks!!

~Dani

May 27, 2011

How to Center Your Header Image

I posted earlier about how to center your Header Text here if you are using one of Blogger's new templates (not Minima). However, if you add one of my headers or one of your own and find that it is not centered, try this:

1. Go to Design and click "Template Designer"
2. Click "Advanced" and then scroll to the bottom in the next column (where you see things like "Text Color" and "Link Color") until you see "Add CSS". Click "Add CSS".
3. In the box, type this:

#Header1_headerimg {margin:0 auto;}

4. Look at the Preview to make sure it worked and if it did, click "Apply to Blog"

There you go! The header is centered!

UPDATE:
This will only work if you click "Instead of Title and Description" when you upload your header.

If you choose "Behind Title and Description", it will not work. Instead, you need to add a different code. Follow the same instructions as above, but insert the following code instead:

#header-inner {background-position: center !important; width: 100% !important;}

I got this last code from BloggerSentral. Read HERE for more on adjusting your header and header text.

~Dani

May 26, 2011

Yellow Roses Header

Instructions on How to Add a Header

Use with the background: Yellow Roses

http://headers.blogdesignsbydani.com/Crazy4Monograms/Yellow Roses Header.png

Design Elements by Crazy-4-Monograms

(from her kit called No Place Like Grandma's)

May 25, 2011

Yellow Roses

2-Column

3-Column

Design Elements by Crazy-4-Monograms
(from her kit called No Place Like Grandma's)

Matching Header

May 23, 2011

Blossoms and Butterflies Header

Instructions on How to Add a Header

Use with the background: Blossoms and Butterflies and Easter Blossoms

http://headers.blogdesignsbydani.com/Crazy4Monograms/Blossoms and Butterflies Header.jpg

Design Elements by Crazy-4-Monograms

(from her kit called Bunny Hop)

Blossoms and Butterflies

2-Column

3-Column

Design Elements by Crazy-4-Monograms
(from her kit called Bunny Hop)

This is the same background as Easter Blossoms except with the eggs removed and a butterfly added.

Matching Header

May 20, 2011

Floral and Lace

2-Column (Standard Width)

3-Column (Wide Width)

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

May 19, 2011

How to Make Your Own Blog Header

To start making your header, you will need to have software that is designed for editing/creating graphics. If you want to use Photoshop but have no plans for a profession in graphic design or photography, I highly recommend Photoshop Elements. It can do almost everything the professional version (CS4) can do, it just takes a few extra steps sometimes. You can find discounts or coupons from places like Amazon or Costco. You can also use Paint.net (for free, I haven't used it, only heard about it). Another option would be digital scrapbooking or card-making software like PrintMaster. I used PrintMaster for headers when I first started and it worked great. NEW: Another option for design software: is Pixlr (http://pixlr.com). It is very similar to Photoshop, it's free and requires no download of software. You do everything on the site and you can still save your work to your computer!

Although these instructions use Photoshop CS4, they can be adapted to Photoshop Elements or any other similar software.

**These instructions work best with the Blogger Minima template. (To get this template, follow steps 4-7 here.) If you use another Blogger template, your header may not be centered. Click here to learn how to center it.

Here are the instructions. Remember to click on an image to enlarge it.

1. Before you start, it is helpful to know how wide the space is on your blog for your header. To find out, go to your Design page and click Edit in the box that says "Header". At the bottom of the pop-up window you will see "Image will be shrunk to xxx pixels wide." You will have a number in place of xxx. This means that no matter how big you make your header, Blogger will shrink it down to the width listed.

If the header you create is bigger than the space provided, it will be OK. Blogger will shrink it down to size for you. However, if you make it smaller, Blogger will not stretch it for you. Doing so would make the image look blurry anyway.

To begin making your header, open a new file:

I usually make my headers 900 pixels wide by 450 pixels high. (This is about 12.5 x 6.25 in.) I use a resolution of 72 pixels/inch because some designers have requested that I do so when I use their elements. A transparent background is necessary if you want your header to be a shape other than a rectangle. Otherwise, white is fine.

2. Once your file is open, decorate it however you choose. I use digital scrapbook kits to decorate my headers. If you want to do the same, just be sure to check with the designer before you use any of their kits or graphics for your blog designs. Some do not allow you to use them on the web. Check their terms of use and/or send them an email to ask permission first.

This header was made using Just So Scrappy's kit Hope for Brady.

Add your title and description to the header.

If you want to make a header that is a shape other than a rectangle, you need to use software that will allow you to save your header as a png file. (Wondering what a png file is? Read here.)

3. Once your header is created, the uploading process is fairly simple. Go to your Design page and click Edit in the Header rectangle:

When a small window pops-up, click "Instead of Title and Description" and "Shrink to Fit". You must do this first or it won't let you later. After you click those two choices, click Browse in the box that says "From your computer". Find the header that you have saved and click Save.

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

May 16, 2011

Spring Stitches Header

Instructions on How to Add a Header

Use with the background: Spring Stitches

http://headers.blogdesignsbydani.com/JustSoScrappy/Spring Stitches Header.jpg

Design Elements by Just So Scrappy

(from her kit called Tweet Tweet)

May 13, 2011

Deleted Posts

Have you guys been having problems with Blogger lately? I couldn't log in to my blog yesterday and today my most recent post has been removed. If any of you have been worried, you can go a site where Blogger posts all the problems they are currently working on and you can see the status of the problem. It doesn't solve the problem, but at least it keeps you updated on what's going on. Here's the site:

Blogger Status

Hope things go back to normal soon!

~Dani

May 12, 2011

Green Daisies

2-Column (Standard Width)

3-Column (Wide Width)

Design Elements by Just So Scrappy
(from her kit called Denim and Daisies)

May 11, 2011

How to Make Your Own Blog Background (Simplified Design)

Updated 7/20/2012.
Instructions for an even simpler design using Pixlr are shown in this recent update.

I recently posted instructions on How to Make Your Own Blog Background. The actual design process for those instructions may be hard for some that don't have good design software. Therefore, I am posting additional instructions for a simpler design like you see below. These instructions do involve editing the HTML a little.

To create a simpler background image, we are going to take a large pattern, crop the image and then repeat the pattern up, down, left and right on our blog. Creating a background in this way will help your blog to load faster and allow readers to access to your blog without slowing down their computer.

**Before you start, make sure you have the Blogger Minima template. (To get this template, follow steps 4-7 HERE OR use my Minima Wide 2-Column Template OR use my Minima 3-Column Template ) These instructions use Pixlr, an online photo/graphics editor but they can be adapted to any graphics editing software.

1. Start by choosing an image that you can use for a blog background. I like to use digital scrapbook paper but be sure to check with the designer before using their images on your blog. Many designers have strict terms of use and do not allow their images to be used on websites or blogs. (But don't be afraid to email them to ask.)

I chose a digital scrapbook paper from Katie at Just So Scrappy When choosing your image, it is best to choose one that is symmetrical. As you read the instructions, you will see why.

2. Open your image in any type of editing program, Paint, Photoshop, Pixlr. Your software can be as simple or as complicated as you want, you just need to be able to crop, zoom (optional but helpful) and save as a jpg or jpeg. Depending on the size of your file, you may need to shrink it down to a smaller size as well.

If you are using Pixlr, go to pixlr.com and click Open Photo Editor. Then click Open Image From Computer. Find your image and click Open.

3. Once your file is open, choose the Crop tool. You are going to crop this image down to a very small section of the design. When choosing how to crop this design, keep in mind that you are choosing a small rectangular section that will be repeated up and down your blog background as well as from left to right. Here is my crop below:

The dotted square is the part that I am keeping. Notice how small this section is. Also notice how symmetrical this image is. On my blog, this small rectangular section is going to be repeated over and over, like this:

(Border lines have been added to show you the borders of the cropped image and to show how it repeats. They will not appear on your blog.)

When you crop your image, make sure that the pattern continues to flow when the small pieces are placed next to each other. This means, if you have a flower or something similar that is cut off on the right side, the left side of the image must be a continuation of that flower. Same for the top and bottom. You may need to zoom quite a bit to get an accurate crop of your image.

4. Once you have cropped your image, save it as a jpeg.

5. Now, we need to upload it to the web:
To place your image on the web, you need to find an image hosting site. Photobucket is a great image hosting site that is free and gives you plenty of storage. Set-up your account by following the instructions on their site. Once you are logged in, click the green Upload now button.

On the next screen, click Select Photos and Videos.

When the image is uploaded, click the small box next to the file name so that there is a check mark. Then click Choose action and select Generate link codes for selected.

The following screen should pop-up:

In the box that says, Direct link click anywhere in the box. This will copy the link code so that you can paste it in the next step.

(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.)

6. Time to go back to your blog. Go to your Blogger Dashboard and select Template from the drop-down menu. Click Edit HTML. Before you make any changes, back-up your blog template. Scroll down in the middle box until you see the code below. (It is near the top after all the "Variables definitions". Type Ctrl-F if you can't find it and type in the search box part of what you see below.) **If you do not want to edit your HTML (you are afraid of messing it up), scroll down to read an alternative method.

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Add the lines you see in red so that the code now looks like this:

body {
background-image:url(Your Link Code Here) fixed;
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Replace the "Your Link Code Here" with the link code you copied from Photobucket. Preview your changes, by clicking "Preview", before saving to make sure that you copied correctly. The semi-colon at the end of each line is VERY important, don't skip it.

Click Save Template and then View Blog.

**If you do not want to edit the HTML (you are afraid of messing it up) or if the background does not show up when you follow the instructions above, try this instead:

A. Choose Layout from the Dashboard.
B. Click Add a Gadget and choose HTML/JavaScript.
C. Type the following in the Content box:

<style type="text/css">body{background-image: url("Link Code"); background-position: center; background-repeat:: repeat; background-attachment: fixed;}</style>

Be sure to replace Link Code with the Link Code you copied from Photobucket.**

D. Click Save and View Blog.

**If your design is too big, go back to your cropped image and reduce the size. In Pixlr, click "Image" and then "Image Size" to adjust the size. Reduce the size of the image (keeping the proportions constant) and then save the file again. You will need to delete the image from your Photobucket account and upload the new saved version. **

Once your background is up, your blog will be harder to read like you see below. That is ok, the next step fixes this.

7. Click Template from the Dashboard and then click Edit HTML. (Backup your template before editing the HTML.)
Scroll down until you see this: (or Ctr-F and type outer-wrapper into the search box)

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

Add the lines you see below in red:

#outer-wrapper {
background:$bgcolor;
border:5px solid $bordercolor;
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

**If you want a thicker or thinner border, just change the 5 to whatever size you want. Do not delete the "px".

Preview your blog and then click Save Template if everything is ok.

Now you're blog should look like this:

8. You can change the color of the background and the border by going to the Blogger Dashboard and choosing Template from the drop-down menu. Then click Customize to access the Template Designer. In the gray panel, click Advanced, then Page Background Color. Then click the white box that has an arrow next to it as shown below:

Once you have found a color you like, scroll down from the Page Background Color until you see the Border Color. Click Border Color and then choose a color just like you did before. Once you like what you see, click Apply to Blog in the top right corner. Finally click View Blog and you are done!

Congratulations! You created your very own blog background!!

May 10, 2011

Wide 2-Column Template Fix

The problem described below is likely to have just been a problem with Blogger, not my template. Shortly after this problem arose Blogger shut down for a day, not allowing anyone to make any new posts. They made some corrections and when Blogger came back up the problem described below was gone. If you still think you have a problem, email me and I would love to help you!

I recently received a comment that the Wide 2-Column Template that I posted would not allow users to add new labels to their blog posts. Because I made the template by making just a few minor changes to the Blogger Minima template, none of the changes related to the labels, I was very surprised that there would be problems. But sure enough, she was right. I really am not an expert with this stuff, I don't claim to be, and sometimes HTML and CSS coding just does weird things. In other words, there seems to be nothing wrong with the code, but I found a solution online that solved the problem for me. Please let me know whether or not it works for you. I apologize for this inconvenience.

Solution: On this blog, The Real Blogger Status, the author explains that sometimes the post template can become corrupted. Read his instructions for the full explanation and then read what I did:

I went to Design and then "Edit HTML" and scrolled down (or Ctrl-F to find this part) until I saw:

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>

</b:section>
</div>

Their instructions say to Remove the part in red, Save your template (confirming that you are deleting a widget) and then Replace that line and Save it again. (Your blog posts won't be deleted.)

When I did this, I removed the part in red and saved my template, but Blogger did not actually delete it. So I simply clicked View Blog and the labels came back!

Hopefully this does not happen for everyone. Please let me know if you are having trouble. Also, please let me know if there is the same problem for my other templates. I checked them and they worked fine for me but you never know!

~Dani

May 7, 2011

Puzzle Pieces Header

Instructions on How to Add a Header

Use with the background: Puzzle Pieces

http://headers.blogdesignsbydani.com/JustSoScrappy/Puzzle Pieces Header.jpg

http://headers.blogdesignsbydani.com/JustSoScrappy/Puzzle Pieces Header2.jpg

Design Elements by Just So Scrappy

(from her kit called Hope for Brady)

May 6, 2011

Puzzle Pieces

2-Column (Standard Width)

3-Column (Wide Width)

Design Elements by Just So Scrappy
(from her kit called Hope for Brady)

Matching Header

May 4, 2011

How to Make Your Own Blog Background --Updated!!

Updates for this tutorial are in red!!

Finally, the post you have all been waiting for ~ How to Make Your Own Blog Background! (For a background that does not require a lot of designing on your part follow the Instructions Here to Make Your Own Blog Background.)

To start, you will need to have software that is designed for editing/creating graphics. If you want to use Photoshop but have no plans for a profession in graphic design or photography or anything along those lines, I highly recommend Photoshop Elements. It can do almost everything the professional version (CS4) can do, it just takes a few extra steps sometimes. I bought it at Costco with a coupon for about $50 a few years ago and it worked great! You can also use Paint.net (for free, I haven't used it, only heard about it). Another option would be digital scrapbooking or card-making software like PrintMaster. I used PrintMaster for headers when I first started and it worked great. NEW: Another option for design software: is Pixlr (http://pixlr.com). It is very similar to Photoshop, it's free and requires no download of software. You do everything on the site and you can still save your work to your computer!

Although these instructions use Photoshop CS4, they can be adapted to Photoshop Elements or any other similar software.

Here are the instructions. Remember to click on an image to enlarge it.

**Before you start, you need the Minima template. However, this template is no longer available. Instead, follow steps 2-3 in the instructions here.)

1. Open a new file.

The width and height of your file is up to you. I have a very wide screen and have found that these measurements work well for really wide screens. (This is about 27 inches wide and 15 inches high.) I use a resolution of 72 pixels/inch because some of the designers whose graphics I use have asked that I use that resolution. RGB is the color mode that is best for the web. I always use a transparent background, but for a blog background white is ok too.

2. Once your file is open, you need to mark the middle section where your blog is. If you are using the Minima template, then use my measurements below. If you use any other template, you will have to make your best guess of how wide to make it and then make adjustments after you place it on your blog.

To mark the middle section, select the Rectangle Tool from your toolbar.

Now, draw a rectangle that is centered on the page and is about 750 pixels or 10 1/4 inches wide:

In Photoshop, the color of this section does not matter right now. It can be changed at any time or covered with digital scrap paper. Right now it is just marking our center section.

3. Next, create your own pattern to fill the background OR find a digital scrapbook kit or something similar to fill the background. You can search online for digital scrap kits or go to the sites listed in my sidebar under "Design Elements". But be careful...not all kit designers allow you to use their kits for web pages. Read a designer's Terms of Use or email them before using their kits on your site. This is especially true if your blog is a commercial blog. I email designers all the time asking for permission and they all respond very quickly.

(From here to Step 5 I give detailed instructions on how to actually place elements from a digital scrap kit onto the background. If you don't need this, skip down to Step 6.)

In this example, I am going to use a kit from Just So Scrappy's kit Hope for Brady. In Photoshop, choose File, Open and find the folder that contains the kit you will use. Open the patterned paper that you would like to use for your background. To copy this paper to your background, go to the Layers panel on the right and right click on the layer that contains the paper image. Select Duplicate Layer.

A window will then pop-up allowing you to choose where you would like the duplicate to be placed.

The background that I am creating is called Puzzle Pieces. Therefore, I will select "Puzzle Pieces.psd" from the Document drop-down menu and then click OK.

When I do this, the new paper will show up as a separate layer in my background. If you have used the 72pixels/inch like I did, you will notice that the paper is huge, spreading way beyond the borders of my background. That is because this kit is created in 300pixels/inch. To fix this, simply drag the paper down with the Move Tool (the black arrow) until you see the corner and then shrink it down to a size that will fit on your image. I shrink it until the height matches the height of my image.

Now, place the paper behind the center rectangle by dragging the corresponding paper layer below the layer containing the center rectangle.

We now have half of the background filled.

To fill the right side with the same pattern/paper, go to your Layers panel again and right click on the layer containing the paper. Choose Duplicate Layer. This time, click OK in the pop-up window without making any changes. You now have a duplicated layer on top of the original. With the new layer selected, use the Move tool to drag the new paper over to the right side. (If you hold down Shift it will keep it lined up with the paper on the left.)

4. It is time to make the center rectangle match our background. If you want to just change the color of it, go to the Layers panel, find the layer corresponding to the center rectangle and double click on the small black square. A window should pop-up allowing you to click on any color of your choice.

Another option is to replace the center section with a matching piece of scrapbook paper. To do this, choose File, Open and find the folder with the kit that you have been using. Choose the paper that you would like to fill the center rectangle. Duplicate the layer as shown in Step 3, re-size it and place it above the layer containing the center rectangle in the Layers panel. It is ok if the paper is bigger than the rectangle. You don't have to re-size it to fit exactly.

Your layers should be in this order.

To make the paper fit exactly, we are going to create a clipping mask. This means that the black rectangle we created is going be the mask for the paper, cutting off from view everything that does not fit in the black rectangle. So, to create the mask, hover your mouse on the line between the layer containing the center rectangle and the layer containing the new paper. Hold down ALT and you will see the following (or something similar) where your mouse is.

Click on the dividing line when you see this image. The paper should now be "clipped" to the size of the black rectangle.

5. Now it is up to you to add any other embellishments and effects that you like. I usually add a few shadows and/or ribbons. Here is what I came up with:

6. Before we can place the background on our blog, we need to save it as a jpg. Go to File, Save As. Name your file and then in the drop-down menu that says "Format", choose "JPEG". After you click Save it will allow you to choose how big to make your file. Make sure that the file is no larger than 1 megabyte. Otherwise your image will show up way too small on your screen.

The creation process is now done...time to upload it to the web. (Make sure your file is also saved as a Photoshop File, psd, so that you still have all your layers intact in case you need to make adjustments later.)

7. To place your image on the web, you need to find an image hosting site. Photobucket is a great image hosting site that is free and gives you plenty of storage. Set-up your account by following the instructions on their site. Once you are logged in, click the green "Upload now" button.

UPDATE: After you click the green "Upload Now" button, you will see the following in the middle of the screen. Click "Bulk Uploader" as you see below:

You will then see a list of folders on the left where you will find the folder on your computer containing the background image you are uploading. Below that, you will see the following box. Click "More Options" before you choose your file.

A small window will appear just like the image below. (The column of options on the right will only be available if you have a Photobucket Pro account. This is not necessary for this tutorial. A free account will work just fine.) Choose "1 megabyte file size".

If you do not choose 1 megabyte, your background will be too small on your screen. Once you click "1 megabyte file size", click Save. Then, find the folder with your image and click on it. Then you should see all of the images in the folder in the box marked "2". Find you background and click on it. It should now show up in the box marked "3". Now, click "Upload".

When the image is uploaded, click the small box next to the file name so that there is a check mark. Then click "Choose action" and select "Generate link codes for selected".

The following screen should pop-up:

In the box that says, "Direct link" click anywhere in the box. This will copy the link code so that you can paste it in the next step.

(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.)

8. Time to go back to your blog. Go to your Design page from your Blogger Dashboard. Click "Edit HTML". Before you make any changes, back-up your blog. Scroll down in the middle box until you see this (it is near the top after all the "Variables definitions"):

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Add the lines you see in red so that the code now looks like this:

body {
background-image:url(Your Link Code Here);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:top center;
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Replace the "Your Link Code Here" with the link code you copied from Photobucket. Preview your changes, by clicking "Preview", before saving to make sure that you copied correctly. The semi-colon at the end of each line is VERY important, don't skip it.

**Occasionally the background does not show up when I edit the HTML as above. If this is the case for you too, try this instead:

A. Go to Page Elements from the Design tab.
B. Click Add a Gadget and choose HTML/JavaScript.
C. Type the following in the Content box:

<style type="text/css">
body{background-image: url("Link Code"); background-position: center; background-repeat: no-repeat; background-attachment: fixed;}</style>

Be sure to replace Link Code with the Link Code you copied from Photobucket.**

Click "Save Template" and then "View Blog".

Congratulations! You created your very own blog background!!

** Once your background is on your blog, you may need to make some adjustments. Just make sure that you save it as a jpg after you make changes, delete the old background from Photobucket and then upload it again. (If you delete the old background from Photobucket before uploading the new saved version of it you won't have to change any of the code.)

** If you previously had one of my free backgrounds on your blog, you will need to remove it so that the new background will show up.

May 30, 2011

May 27, 2011

May 26, 2011

May 25, 2011

May 23, 2011

May 20, 2011

May 19, 2011

May 16, 2011

May 13, 2011

May 12, 2011

May 11, 2011

May 10, 2011

May 7, 2011

May 6, 2011

May 4, 2011

Welcome!

How to Add a New Background

Connect

Free Backgrounds and more!

Search Blog Designs by Dani

Donations

Followers

Add my button

Copyright

Design Elements by:

Blogs Designed by Dani

Other Custom Designs

Blog Archive

Visitors