Blog Designs by Dani

Time Away

noreply@blogger.com (Dani) — Thu, 17 May 2012 05:15:00 +0000

You may have noticed that I have not been posting very often these days. I apologize for that, but unfortunately it won't be getting any better. I have had some health problems for a while and finally met with a doctor that said surgery is the only solution. My operation is in less than 10 days and I am spending this time getting my house in order and everything ready for me and my family during my recovery. I don't know for sure how long I will be out but I probably won't be jumping back on the computer for at least a month, maybe two.

I want all of you to know how much I appreciate your kind words and support of me and my blog. I am amazed every day that so many of you have been able to find something useful here on my blog. It has been such a great experience for me so far and I hope to be able to continue. I have cut back on my posts quite a bit lately and I appreciate so many of you sticking with me. I have been making sure that my job as a mom is my full-time job and does not take a back seat to this blog. I still have a long list of tutorials I want to post and I hope to eventually get to them. Thank you so much for your patience.

You can still email me if you'd like but please don't expect a response any time soon. I'll be sure to update my blog with an update on my recovery!

Thanks to all of you for supporting my blog!

~Dani

How to Add a Post Icon (Simple Template)

noreply@blogger.com (Dani) — Sat, 21 Apr 2012 05:23:00 +0000

Customizing the Simple Template - Part 4

Have you ever seen those cute little icons next to the title of each post? I have made several for my custom design customers and love them. They are just one more simple feature to draw attention to your blog without over doing it.

Making the actual post icon is very easy. And if you use the Blogger Simple template, adding the icon to your blog is even easier. You don't have to worry at all about editing the HTML and messing up your blog. You won't go anywhere near it in this tutorial.

Follow Part 1 of my Simple Template Tutorials to set your template to the Simple template.

Let's get started!

Making the Post Icon
1. First you need to choose a graphic for your Post Icon.
This part is so easy if you use a graphic from a digital scrapbook kit or any other similar graphics. Just make sure that you check with the designer of the graphic before using it on your blog. Some designers have very strict terms of use. You can look at the list of designers on my sidebar, but check their terms of use before using their images. I have purchased licenses for some and have agreed to specific terms for all of them.

I am going to use an image from Katie Castillo at Just So Scrappy.

2. Next re-size your image to fit next to your post title.
To use this as my post icon, I just need to shrink it down. The height of your image needs to be around 40-45 pixels. If you use Photoshop or Pixlr, click "Image" from the main menu at the top. Then choose "image size" and then re-size the image so that it is about 40-45pixels tall. Make sure you choose an image that is close to square. (I just think they look better when they are close to the same height and width.)

When I re-size my image, it looks like this:

It's pretty small, but it will be just the right size for your Post Titles.

Adding the Icon to Your Blog

1. When you want to place images on your blog, other than in your posts, you must upload them to a web hosting service of your own or a photo hosting site like Photobucket. You can create a free account to upload your images. However, if you use this site for a lot of web images and have a lot of traffic to your blog, you may need to upgrade to a Pro Account or look into another web hosting service.

If you choose to use Photobucket, you need to login to your account and click the green Upload button. Click the green button "Select photos and videos" and Browse to find your png file. 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".

A window will pop-up. Click in the box that says "Direct link". This will copy the link code so that you can paste it in the next step.

2. Now, login to your blog and go to the Template Designer.
(If you are using the old Blogger Interface, click "Design" and then "Template Designer" under the Design tab.
If you are using the new Blogger Interface, click "Template" from the drop-down menu found by clicking this arrow:

Once you are on the Template page, click "Customize". This will bring you to the "Template Designer".)

3. In the Template Designer, click "Advanced" from the menu on the left.
When the second column appears, scroll down to the bottom and click "Add CSS"

4. In the white box, enter the following code:

h3.post-title {

background:url(DIRECT LINK) no-repeat left;

height: 45px;

padding-left: 50px;

padding-top: 15px;

margin-bottom: -10px;

}

You will need to replace "DIRECT LINK" with the link you copied for your image from Photobucket.

The "height" will depend on the height of your image. Adjust this as necessary.

The "padding-left" is how far the post title is from the left edge. If you leave this at 0, then your title will sit on top of your post icon. This distance will depend on the width of your post icon.

The "padding-top" can be used to adjust the vertical position of the post title. If you leave this at 0, your post title may sit too high for your post icon. If you make it 15px as you see here, it will push it down so that the title is centered with your post icon. You can adjust this as needed.

The "margin-bottom" adjusts the distance between the post title and the post text. If you leave it at 0, it will have a bit of white space. A positive distance, like "10px" would increase this distance. I wanted to close the gap and so I used a negative number "-10px". You can adjust this to whatever works for your blog and your tastes.

It is easy to preview your changes in the Template Designer, so don't be afraid to change the numbers and see how it changes the picture. Once you like what you see, click "Apply to Blog" and there you have it - a custom Post Icon!

Let me know how this works for you. I'd love to see your custom designs!

How to Make and Add a Post Divider (Simple Template)

noreply@blogger.com (Dani) — Wed, 04 Apr 2012 22:39:00 +0000

Customizing the Simple Template - Part 3

Do you want a post divider for your blog but you are afraid to edit the HTML? If you answered yes, then this post is for you. In a previous post I showed you how to create a post divider like the one you see below:

My previous instructions showed you how to add the divider if your template is already set to the Minima template. This post will give you instructions on how to add the divider if your template is set to the Blogger Simple template. Follow Part 1 of my Simple Template Tutorials to set your template to the Simple template.

Let's get started!

These first part of these instructions are exactly like my previous post divider tutorial found HERE. Follow these instructions all the way until it tells you to edit the HTML. Do NOT click "Edit HTML".

In other words:
A. Create the graphic using the tips at the beginning of the post divider tutorial. (If you need more help on creating a graphic, see my tutorial on creating your own blog button.)
B. Then upload your graphic to Photobucket or another image hosting site of your choice. (This is Step 1 under "How to put it on your blog" on the post divider tutorial.)

Once your image is uploaded to Photobucket or a similar site, follow these instructions to put the image on your blog.
1. Login to your blog and click on the "Design" tab. From this tab, click on "Template Designer". (If you have updated your blog to the new Blogger interface, you will see this:

Click on the down arrow that I have circled and choose "Template". From the next screen, choose "Customize", the orange button in the middle.)

2. You should now be in the "Template Designer", (screen with a gray background and a preview of your blog on the bottom).

a. From the options on the left (starting with "Templates"), choose "Advanced".

b. Then from the second list of options, scroll down to the bottom and choose "Add CSS".

c. In this box that appears to the right, you will paste your CSS code that I will explain next. Here is a picture of what you should see:

3. In this box, enter the following code:

.post-footer {

background:url(YOUR DIRECT LINK) no-repeat center;

height: 215px;

margin: 20px 0px -50px;

padding: 5px 10px;

}

Where it says "YOUR DIRECT LINK", you will enter the url/direct link of your image from your Photobucket Account.

*The height I chose here was relative to the height of my image. This measurement may be almost double the actual height of your post divider image. This allows for blank space between the text on your blog and the divider.

4. Before you hit "Apply to Blog", look at the Preview of your blog on the bottom of the screen. If it worked, great! If not, you can adjust the measurements. The great thing about the template designer is that you can change the measurements and immediately see what it did to change your blog. If you don't like what you did, just change it back.

The 2 measurements you may need to change are the height and the margin. The height will depend on the original height of your image. As I said earlier, you may need to make this almost double your original height to allow for adequate space above and below your image.

The margin is a little more tricky:

a. The first measurement on the margin, "20px" is the space above the post footer (including the text in your footer, like "comments" and "labels").

b. The second measurement "0px" is the space to the left and right of the post footer. (Because I included the words, "center" after the direct link, you probably won't need to adjust this.)

c. The last measurement, "-50px" is the space below the post footer. Notice that this number is negative. If this number was positive or even 0, it might create a much larger gap than you would like. A negative number closes this gap and moves the post footer closer to the text below it.

Adjust these numbers until your post divider is spaced well between the posts.

5. Once you like what you see, click "Apply to Blog" and "View Blog". If you still need to make changes, you can always go back to this screen and adjust it again.

Let me know how this works for you. I'd love to see your custom post dividers!

How to Make Your Own Background (Simple Template)

noreply@blogger.com (Dani) — Wed, 14 Mar 2012 22:53:00 +0000

Customizing the Simple Template - Part 2

In my last post, I showed you how to get your blog set up with the Blogger Simple template. Now it is time to start customizing it!

Let's get started with the background:

In my previous tutorials, I taught you how to create a background like this:

How to Make Your Own Background (Detailed Design)

and another background like this:

How to Make Your Own Background (Simplified Design)

I used to make backgrounds like this all the time and they are a lot of fun. However, they do pose a few problems.

The first problem is in regards to the Simple template. The great thing about using Blogger's templates, like Simple, is that you can adjust the width of your Post and Sidebar section yourself. However, if you design a background like the Puzzle Pieces background above, you will have to adjust the background image to match the width of your blog. If you decide to adjust the width later, you will have to redo your background image.

The second problem has to do with size and time. In order to make an image that will fill the background of your blog and accommodate those with large computer monitors, the images have to be huge. Both of these background images are very large files, especially the one with the decorations. When you put these images on your blog, they will take a long time to load because of their large file size and will slow down your blog for your readers.

So, how do we make a blog background without these 2 problems? We Simplify.

We are going to take a large pattern, crop the image and then repeat the pattern up, down, left and right on our blog. Sound confusing? Read through these steps before you begin.

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

Here is 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. Depending on the size of your file, you may need to shrink it down to a smaller size as well.

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 highlighted section 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. Alright, now it is time to put the code into your blog. But here's the best part. You don't have to go into "Edit HTML". No more worrying about ruining your blog.

Instead, go to the "Template Designer" (from the "Design" tab). Click "Advanced". A new list of options will appear next to the first list, scroll down until you see "Add CSS". Click "Add CSS" as you see below:

Now enter the following code into the box:

.body-fauxcolumn-outer {

background: url(Your Direct Link) fixed;

}

.body-fauxcolumn-outer div {

background: none;

}

Where it says, "Your Direct Link", paste the code you copied from Photobucket. Your background should appear in the preview window.

If you like how it looks click, "Apply to Blog" and then "View Blog".

If the picture is a little big, or doesn't line up right, go back to your image and adjust it. Shrink it down if the image looks too big on your blog. If you adjust your image, remember to go back to Photobucket, delete the old file, and save the new background image file. I adjusted my file to be about 90 pixels wide.

Are you ready to try it yourself? Let me know how it goes. I'd love to see your custom backgrounds!

~Dani

Stay posted for more tutorials on customizing the Simple template!

Customizing the Blogger Simple Template, Part 1

noreply@blogger.com (Dani) — Thu, 08 Mar 2012 23:53:00 +0000

I have posted several tutorials on how to make your own blog background, post divider and such and I hope they have been useful to you. However, all of these tutorials have required that you use the Minima template. I like this template the most but this template does not allow you to take full advantage of the Template Designer. Also, many of you are terrified at the thought of editing the HTML on your own.

So, I would like to give you some instructions on how to add your own custom designs to the Blogger Simple template. If you use this template, you can adjust the widths of the columns, the arrangement of the columns and much more without having to edit the HTML at all! In fact, when you add all of your design elements, you won't ever have to click "Edit HTML"!

This first post will be all about getting your blog set-up with the Simple template of your choice. (There are several Simple templates. I'll help you choose!) My next post will show you how to add your own Custom Design Elements.

Ready to get started? Here we go!

Please agree to my terms of use and backup your current template and sidebar gadgets before making any changes to your blog. Here are instructions on how to do that:

How to back-up my template

I will explain in my next post how to add a custom background, a custom post divider, and a post icon as well as a few little adjustments. But first, you need to get the right Simple template.

Before you add your custom designs, be sure to change your template to the Blogger Simple template by doing the following:

1. From your Blogger Dashboard, click the "Design" tab and then click "Template Designer".
2. You should see the following: (Click on any image to enlarge it.)

If you want to add your own custom background, the first 2 Simple templates as well as the second to last one will not work. The first two have a color that fades from the top to the bottom that you can't remove. When you add your background, the color overlay will still be there. The second to last template only allows you to add a background to the top section to the left and right of the header. So, unless that is what you want, don't use this one.

When you choose which template you want, remember that the backgrounds, colors, fonts, etc. can all be adjusted. I will show you how to adjust each of these 4 templates to get them ready for your customizations.

Gray Simple Template
To remove the gray background on this template, first click on this template and then click "Advanced" on the left side of your screen. From the next list of options, choose "Backgrounds". You will then see three different backgrounds that you can adjust.

The "Outer Background" is where you will be adding your custom background, so you will need to remove the one that is there. To do this, click the down arrow under "Outer Background" and choose "Transparent" as shown below:

You may still see a color on the background, but it will be gone once you add your custom background.

If you want to change any other colors, click on any of the other options. If you ever need to revert back to the original template, just go back to the main Template Designer screen and choose your template again.

Red Simple Template
This template has a patterned background that needs to be removed (unless you want it). After selecting this template, click "Background" from the list furthest to the left. (The one that says, "Template", "Background", "Adjust Widths", etc.)

Click "Remove Image" and "Ok" from the pop-up screen and the pattern will be gone.

However, we still need to remove the color. To do this, click on "Advanced", then "Backgrounds" and then click the down arrow under "Outer Backgrounds". Choose "Transparent" as you see below:

Again, the background looks like it still has a color, but it will be gone once you add your custom background.

If you want to change any other colors, click on any of the other options. If you ever need to revert back to the original template, just go back to the main Template Designer screen and choose your template again.

Books Simple Template
For the Simple template that has the books in the background, follow the same instructions that I posted above for the Red Simple Template.

White Simple Template
For the very last Simple template, you may not think you need to do anything. However, the background has a white bar across the top of the background. To remove this, follow the same instructions that I posted above for the Gray Simple Template.

Once you are done, click "Apply to Blog" (the orange button in the top right corner). Once it says your template has been applied, you can View Your Blog.

Your blog is now ready for customizations. Stay posted to learn how to do this!

Lucky Green Template

noreply@blogger.com (Dani) — Tue, 28 Feb 2012 07:23:00 +0000

This template is a little different from my past templates. All of my previous templates were based on the Blogger Minima template. The Minima template allowed me to add cute headers in addition to the other design elements, but did not allow much freedom for you to alter your blog. This template you see below and many of my future templates will be based on the Blogger Simple template. This template does not allow me to make cute headers (at least not yet), but will allow you to use the Blogger Template Designer and modify the template to suit your needs.

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

Read here for instructions on how to add a template.

Always back-up your template and sidebar gadgets before changing your template!

Click Here for HTML/CSS Code

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

You can add/change:

the Blog title and description shown on the header
the font colors
the fonts Click here to learn how.
the width of the blog and various other aspects of the blog design. Go to the Template Designer under "Design". You can alter the width, layout, fonts and colors.

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

Images from VN Digital Art
and Graphics-Illustrations

Blank 3-Column Template

noreply@blogger.com (Dani) — Tue, 31 Jan 2012 20:11:00 +0000

This template is a blank template, meaning there is no background image, no header, no designs on the blog. The template, however, has been modified to allow for 3 columns. My free 3-column backgrounds can be used with this template.

By using this template, you agree to the terms of use.
Read here for instructions on how to add a template.

Click Here for HTML/CSS Code

You can add/change:

the Blog title and description shown on the header
the font colors
the font Click here to learn how. (This template allows you to alter the date, post title and sidebar titles with a different font for each one.)
the background
the header

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

Cherished Love Header

noreply@blogger.com (Dani) — Sat, 28 Jan 2012 06:37:00 +0000

Instructions on How to Add a Header

Use with the background: Cherished Love

http://headers.blogdesignsbydani.com/JustSoScrappy/Cherished Love%20Header.jpg

Images copyright Katie Castillo
(from her kit called Cherish)

Cherished Love

noreply@blogger.com (Dani) — Sat, 28 Jan 2012 06:27:00 +0000

For those of you interested in just the background from the Cherished Love Template, here it is:

2-Column (Standard Width)

3-Column (Wide Width)

Images copyright Katie Castillo
(from her kit called Cherish)

Matching Header

Cherished Love Template

noreply@blogger.com (Dani) — Fri, 27 Jan 2012 06:07:00 +0000

By using this template, you agree to the terms of use.
Read here for instructions on how to add a template.

Click Here for HTML/CSS Code

*This template may not show the header when you insert the HTML/CSS code. If it does not appear, do the following:

1. Go to the Design page and make sure you are on the Page Elements section.
2. Click on the Edit button on the Header box.
3. In the pop-up window, click "Behind Title and Description and then insert the following address in the box that says, "From the Web"

http://templates.blogdesignsbydani.com/loveyou/header.png

4. Click Save and View Blog. Your header should appear!

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 Blog title and description shown on the header
the font colors
the font Click here to learn how. (This template allows you to alter the date, post title and sidebar titles with a different font for each one.)

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

Images copyright Katie Castillo
From her kit Cherish

Header Problems

noreply@blogger.com (Dani) — Fri, 13 Jan 2012 21:08:00 +0000

Are any of you having problems with my headers? A few readers have complained of the headers being too big. Lately the "Shrink to Fit" button hasn't been shrinking my headers down to the right size for many blogs. If you are having this problem, please leave a comment or email me. I will resize the header for you and post a new code. Be sure to tell me which header you want.

Thanks,
Dani

Peppermint Christmas Template

noreply@blogger.com (Dani) — Thu, 08 Dec 2011 22:22:00 +0000

By using this template, you agree to the terms of use.
Read here for instructions on how to add a template.

Click Here for the HTML/CSS Code

http://templates.blogdesignsbydani.com/peppermintchristmas/header.png

the Blog title and description shown on the header
the font colors
the font Click here to learn how. (This template allows you to alter the date, post title and sidebar titles with a different font for each one.)

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

Images copyright Katie Castillo

From her kit Peppermint Patty

Christmas Treats Header

noreply@blogger.com (Dani) — Mon, 28 Nov 2011 16:00:00 +0000

Instructions on How to Add a Header

Use with the background: Christmas Treats

http://headers.blogdesignsbydani.com/JustSoScrappy/Christmas Treats%20Header.jpg

Or if you would like the exact same header as the Christmas Treats Template, use this header:

http://headers.blogdesignsbydani.com/JustSoScrappy/Christmas Treats%20Header2.png

Images copyright Katie Castillo
(from her kit called Gingerrific)

Christmas Treats Background

noreply@blogger.com (Dani) — Sun, 27 Nov 2011 04:49:00 +0000

For those of you interested in just the background from the Christmas Treats Template, here it is:

2-Column (Standard Width)

3-Column (Wide Width)

Images copyright Katie Castillo
(from her kit called Gingerrific)

Matching Header

Christmas Treats Template

noreply@blogger.com (Dani) — Thu, 17 Nov 2011 22:09:00 +0000

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

Read here for instructions on how to add a template.

Click Here for the HTML/CSS Code

http://templates.blogdesignsbydani.com/christmastreats/header.png

the Blog title and description shown on the header

the font colors

the font Click here to learn how. (This template allows you to alter the date, post title and sidebar titles with a different font for each one.)

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

Images copyright Katie Castillo

From her kit Gingerrific

How to Add a Post Divider

noreply@blogger.com (Dani) — Mon, 07 Nov 2011 21:08:00 +0000

Do you notice the divider that I have separating my posts? If you are trying to make your blog stand out, a post divider can really do the trick. It doesn't have to be anything fancy. In fact, simple is best when it comes to making a post divider. Here's what mine looks like:

Want to learn how to make one yourself? Here's how:

(This tutorial is for Blogger blogs with the Minima template. Follow steps 3-7 here to change your template to Minima.)

Update: If you would like to add a post divider using the Blogger Simple template, follow the instructions HERE.

Creating the Graphic
Creating the graphic for your divider is up to you, but here's some help getting started:

First, you need to have some kind of design software. I use Photoshop, but you can use the home version, Photoshop Elements or any other software such as Pixlr (free online software), Corel or anything else that lets you import graphics and create designs.

Next, you need to find some graphics. I used graphics from Katie Castillo's digital scrapbook kit Happy Day. You can choose graphics from wherever you choose, just make sure that you check the owner's terms of use. Just because an image does not have a watermark, does not mean you have the rights to use it. Also, purchasing an image does not guarantee you can use it on the web. ALWAYS check the terms of use for the designer of the graphics you use. (Check my list of designers on my sidebar under Design Elements. Those ladies are great to work with and respond to usage inquiries fairly quickly.)

(If you would like help with some basics on creating a design with layers, take a look at my tutorial on Making Your Own Blog Button. This tutorial uses Pixlr.)

Here are a few tips when creating your divider:
1. Figure out how wide your posting section is by going to the Design tab and clicking "Edit HTML". Do not change anything, but scroll down until you see:

#main-wrapper {

Under this, you will see a measurement for the width. My blog has a measurement of 570 pixels. When I made my post divider, I also made it 570 pixels wide. I also gave it a height of 85 pixels.

So, to figure out the size of your post divider, you can do anything equal to or smaller than the width of your main-wrapper. Any height around 100 pixels is good too.

2. When creating your image, do not use a lot of shadows or intricate details. This image is small and heavy shadows look too overpowering. Also, too many details get lost and look very busy. Remember, keep it simple, you want people to be more focused on your posts than your post dividers.

3. When saving your file, unless you have a rectangular post divider, save it as a png file. (Don't know what a png is? Read here.) Don't forget to also save it as a layered file, Photoshop file if you are using Photoshop, Pixlr file if you are using Pixlr, etc. If you want to make changes later, you will want the original file.

How to put it on your blog
1. When you want to place images on your blog, other than in your posts, you must upload them to a web hosting service of your own or a photo hosting site like Photobucket. You can create a free account to upload your images. However, if you use this site for a lot of web images and have a lot of traffic to your blog, you may need to upgrade to a Pro Account or look into another web hosting service.

If you choose to use Photobucket, you need to login to your account and click the green Upload button. Click the green button "Select photos and videos" and Browse to find your png file. 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".

A window will pop-up. Click in the box that says "Direct link". This will copy the link code so that you can paste it in the next step.

2. Now, login to your blog and click Design and then "Edit HTML".

Before you make any changes, back-up your template. (Then if you make any mistakes or decide you don't like what you did, you can put your old template back on.)

Once you have backed up your template, scroll down until you see the line that starts with:

.post {

Change the part that says "1px" to say "0px".

Like this:

(This takes away the border below your posts.)

3. Now, scroll down a little more until you see this line:

.post-footer {

You are going to add a few lines as follows:

Add the following EXACTLY, right after ".post-footer {"

background-image:url(Direct Link);background-repeat:no-repeat; background-position: bottom center;
height:150px;

If this doesn't work for you, try this instead:

background-image:url(Direct Link) no-repeat bottom center;
height:150px;

Where it says, "Direct Link", you will replace the Direct Link code that you copied from Photobucket.

When you finish, it should look like this:

*Notice that the height I chose was roughly double the height of my image. You may need to adjust yours according to the image you created.

4. Before you hit SAVE, do the following:
A. Click "Preview. If you need more space above your blog, increase the height. Click Preview again before saving.
B. If your divider has a huge space below it, change the following line:

margin: .75em 0;

So that it reads as follows:

margin: .75em 0 -50px;

Click Preview. If you need to close the gap even more, increase the number 50 (keep the - before it). If you need to increase the space, decrease the number of 50 (keep the - before it).

5. If everything looks good, click Save!

That's it! Your very own post divider!!

Let me know how it went! I'd love to see your post dividers!

~Dani

Updated Button Code

noreply@blogger.com (Dani) — Thu, 03 Nov 2011 05:07:00 +0000

Hi Everyone,

With all the updates to the codes, I forgot to update my own button. Be sure to grab a new code for my button here or on my sidebar:

How to Add Your Signature to Your Blog Posts

noreply@blogger.com (Dani) — Mon, 31 Oct 2011 21:09:00 +0000

Have you been wondering how to create and add a signature to the end of your blog posts like this one:

Let me show you how:

First we will start with creating your signature. You will need to some type of design software, Pixlr (free), Corel or Photoshop Elements, or whatever software you can get your hands on. I use Photoshop CS4 but the steps are very similar no matter what program you use.

1. Open a New File.

A good size is about 200 pixels by 75 pixels with a resolution of 72 pixels per inch. You can adjust it to be larger or smaller if you like. The background must be transparent because we do not want a white rectangle to show up on our blog behind the signature. (Unless your blog has a white background for the post section. If that's the case then it doesn't matter.)

2. With the Type tool, choose a font and then type your name. You can add any effects to your name and add any embellishments you like. Here's mine:

3. Now, save your file twice, first as a Photoshop file, or Pixlr file or whatever program you are using. (Saving it in this format allows you to make changes later if you change your mind about the design.) Then, save your file as a png file. You will find this option under "Format" in the window that pops up for you to save the file. If you do not see png as an option, then hit Cancel and go to your File menu. Look for something like "Save for Web and Devices". Choose png from the list of Formats. (It may not say Format, but it may just show one of the formats such as "gif".)

4. Once your file is saved as a png, you need to upload this image 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.

Click the green button "Select photos and videos" and Browse to find your png file. 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".

A window will pop-up. Click in the box that says "Direct link". 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 a list of options appears below the image. Click the code next to "Direct Link". Clicking this automatically copies the link for you.)

5. Now it is time to go back to your blog. This is where you have two options as to how to add it.

First: You can add your signature to all of your new posts, but not to your old posts. (Very Easy to add. You don't have to go to "Edit HTML" at all.)

Second: You can add your signature to all of your posts. (A little more complicated. Also, if you use the widget "LinkWithin", the signature appears after this widget. Not a big deal, but it looks a little weird.)

First Method: Go to your Blogger Dashboard and choose "Settings". Then click "Formatting". Scroll to the bottom where it says "Post Template". In the box, type the following:

If you would like your signature to line up on the left, change the part that says "right" to say "left". Then insert your "Direct Link" that you copied from Photobucket in the place of the words "Direct Link". Make sure that you keep the quotes around the words "right" (or "left" if you changed it) and your direct link as you see it here.

Click "Save Settings" at the bottom and try it out. All of your new posts will have your signature at the bottom!

Second Method: I found this method on another blog, by Kevin and Amanda. If you have any questions about how to do it, let me know. I've used this tutorial tons of times.

Let me know how it goes! I'd love to see your blogs!

All Old Codes Are Now Gone

noreply@blogger.com (Dani) — Wed, 26 Oct 2011 05:07:00 +0000

I deleted the last of my designs from my Photobucket account, my free templates. I hope everyone was able to grab a new code and maybe a new design before it was deleted. If not, please search through my free designs and find a new one. Thanks everyone for continuing to support my blog through all of that. I will try to post a new tutorial soon!

~Dani

Simple Pink

noreply@blogger.com (Dani) — Sun, 23 Oct 2011 03:20:00 +0000

2-Column (Standard Width)

3-Column (Wide Width)

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

Update to Background Tutorial

noreply@blogger.com (Dani) — Sat, 22 Oct 2011 19:55:00 +0000

Do you guys remember my tutorial about How to Make Your Own Blog Background? Well, I've had a couple readers have a problem with the background showing up really small on their blog. Did anyone else have the same problem? Luckily, it is an easy fix and I have updated my instructions to help you. Check it out: How to Make Your Own Blog Background!

Backgrounds with Old Codes are Deleted

noreply@blogger.com (Dani) — Fri, 21 Oct 2011 20:49:00 +0000

I have deleted all of my backgrounds with the old codes now. If you did not update yet, please look through my free backgrounds to get a new one with an updated code. I will delete the templates this weekend (possibly Monday).

Sorry for the mess. Thanks for supporting my blog!

~Dani

Headers with Old Codes are Deleted

noreply@blogger.com (Dani) — Fri, 21 Oct 2011 04:20:00 +0000

Hi Everyone,

I have started removing the designs from my Photobucket account. I have only deleted the headers today. Tomorrow, I will do as many of the backgrounds as I can. Then I will delete the templates, maybe Saturday, but probably on Monday.

If you haven't updated your code yet, please do so now! Remind your friends too!

Thanks!
Dani

Last Reminder!!

noreply@blogger.com (Dani) — Wed, 19 Oct 2011 03:47:00 +0000

Hi everyone!

I'm so sorry that I haven't posted anything new all month. I wanted to leave the post at the top reminding everyone to change their codes and explaining how to do it. Also, I have just been so busy with custom designs and just life in general. To make things even harder, my little one has dropped down to just one short nap during the day, leaving me VERY little time to get anything done!

Anyway, here's your last reminder to change your codes. I said to do it by Thursday the 20th, but I may not get to deleting the old ones until this weekend...but do it soon before you forget!

I'll try to get some new stuff up in the next few weeks. Do you want backgrounds, templates, headers? What do you want the most?

Thanks!
Dani

Time to Renew Your Codes

noreply@blogger.com (Dani) — Sat, 01 Oct 2011 05:43:00 +0000

Hello Everyone,

I have a VERY important update for everyone. Since my blog has been growing, I have decided that I can no longer store my images on Photobucket. I simply have too many images. Instead, I have setup my own hosting account where I can store all of my images. As a result, I have had to change all of the codes for the backgrounds, headers, and templates.

This means that everyone that uses any of my designs will need to come back to my blog to get a new updated code for their blog by October 20. After this date, I will be deleting all of my designs from my Photobucket account.

If you do not update your code by this time, your background will disappear.

I will temporarily change my tag (the one you see in the top left corner of my free backgrounds) so that it contains a warning to update the code. However, if you have friends using my templates or headers or whatever, please tell them to update their code. I would hate for anyone to lose their designs unexpectedly.

I know this is such a pain for everyone...believe me, it took me forever to change all the codes. But it had to be done.

Thank you everyone for supporting my blog!

~Dani

p.s. If you have updated recently, just look through the code and make sure you don't see the word "Photobucket". If you do see "Photobucket", you need to update your code.

Update:
If you are confused about how or where to find the updated codes, let me explain. To replace your old code with a new one, simply search through my free backgrounds (or free headers or templates) and find either the background you are currently using or a new one. Then, copy the code just like you did before. Then, go to your blog and find the gadget that contains the html for your background. Delete the old html and replace it with the new html that you just copied.

Any code currently on my blog is an updated code.

You must update BEFORE October 20 to avoid losing your background.

If you have used one of my free headers, you may or may not have to update your header code depending on how you put it on your blog:

If you saved the header to your computer and edited it yourself, then you don't need to update the code.
If you simply copied the code below the header and pasted it into the Header gadget, then you DO need to get an updated code.

If you have any other questions, feel free to email me or leave a comment. Thanks!