Blog Designs by Dani

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

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!

Easy Canvas Prints Review

noreply@blogger.com (Dani) — Mon, 26 Sep 2011 18:50:00 +0000

I recently was given the opportunity to review a product for Easy Canvas Prints. At Easy Canvas Prints, they put your pictures on canvas. I was offered an 11x14 canvas print in exchange for the review and was very excited. I decided to upgrade to a 16x20 for a small fee and LOVE the picture that was printed. Now, let me tell about the process:

The ordering process was really quite simple. First, you choose your size and upload your image. This site is really great because it checks your image to determine if it is a good enough quality to be blown up to the size you chose. I was worried about this because I didn't know if the image I chose had a high enough resolution to be enlarged to a 16x20. I really hate having to wait until it's printed to see that the picture is too blurry.

Next, I chose my border style. You can either have a solid color around the sides, a mirror image or a continuation of the pattern (image wrap). I chose the image wrap. The last step is an option to have your image retouched. If you are willing to pay some extra money, they will do that for you. I, myself, wouldn't pay for that, but that's because I love Photoshop and like to do it myself.

That's it...it really was easy....unless you are indecisive like me...and you change your mind about the size after you submit your order. Yeah, I don't recommend this, but it did give me an opportunity to test out their customer service. Normally they don't allow you to change your order after it is submitted because they start your canvas print immediately. But I called within just a few minutes of my order and was able to make the change. I originally ordered the 11x14, the size they offered me, but then realized the bigger size, 16x20 would look much better on my wall. Their customer service proved to be fantastic. The woman that helped me even called me back so that I didn't have to wait on the phone while she figured out how to make the change.

The hardest part of the whole process was choosing the photo to use. I didn't want to use a family picture because, unless they are classic ones like a wedding picture or a really sweet photo of a child, it can become outdated really fast. In the end, I chose something that was meaningful and also timeless, the place where my husband and I were married:


This picture was taken by Brandon Burton.

Here's a side view. (This is the 3/4" thickness.)

This picture is an LDS (Mormon) temple. To learn more, go to http://mormon.org/.

Now, here's the great news for you....if you want to put your own picture on canvas, just click on the link provided. When you go, you'll notice that you will receive 25% off your order plus free shipping. Want a better discount? If you "Like" them on Facebook, you can get 50% off your order plus free shipping!

Overall, this was an amazing offer for me! I love my canvas print! The great thing about a canvas is that you don't have to frame it if you don't want to. It looks good alone but also looks great in a frame. (If you choose to buy a frame, buy one with an open back. I've found some at Michael's that work great. You will have to buy a little kit to fasten your canvas to the frame, but it's pretty simple. If you ask an employee, I'm sure they could help you.)

The opinions in this review are entirely my own. I was compensated with a discounted canvas print in return for the review.

My Blog is Back

noreply@blogger.com (Dani) — Thu, 22 Sep 2011 16:46:00 +0000

I'm so sorry about my blog disappearing yesterday! I don't know what exactly went wrong. I have a web hosting service where I manage my domain name (my new web address that is ".com" instead of ".blogspot.com"). This hosting service and my blog were set up to redirect the ".com" address to my blogspot blog. Yesterday for some strange reason it decided to stop redirecting it. I reset everything last night, set it all up again and it is back now. Thank goodness!

How to Make Your Blog Private

noreply@blogger.com (Dani) — Mon, 19 Sep 2011 22:23:00 +0000

For many blogs, the idea of making your blog private doesn't make any sense, esp. if you are a commercial site. However, many blogs are used like a journal to document life events. A friend of mine has such a blog and has recently decided to make her blog private. She said that one day she was looking under the Stats tab on her Blogger Dashboard and then clicked on Traffic Sources. (This shows the list of sites that refer back to your blog.) She saw a site that she didn't recognize and so she clicked on it. On this site, someone had taken a picture of her young daughter, from her blog posts, and posted it on a child pornography site. How horrifying!

I hate hearing stories like this and hope this does not happen to you. If you would like to know how to make your blog private, here you go....

1. From your Blogger Dashboard, click Settings.
2. Click Permission
3. Where it says, "Who can view this blog?", click "Only people I choose"
4. Now, enter the email addresses, with commas separating them, and click Invite.

Now your blog is private!

Your friends and family will receive an email where they will either use their current Google account to login or create a new account. Everyone that goes to your blog address will have to login before they can see it.

Autumn Falls

noreply@blogger.com (Dani) — Tue, 13 Sep 2011 14:30:00 +0000

2-Column (Standard Width)

3-Column (Wide Width)

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

Custom Design Update

noreply@blogger.com (Dani) — Mon, 12 Sep 2011 19:11:00 +0000

For those of you interested in my Custom Designs, please read my update here.

Green Notebook Header

noreply@blogger.com (Dani) — Fri, 09 Sep 2011 23:20:00 +0000

Instructions on How to Add a Header

Use with the background: Green Notebook

http://headers.blogdesignsbydani.com/Crazy4Monograms/Green%20Notebook%20Header.jpg

Design Elements by
Crazy-4-Monograms
(from her kit called Class Act)