April 29, 2011

Brown Hearts Header

Use with the background: Brown Hearts


http://headers.blogdesignsbydani.com/Crazy4Monograms/Brown Hearts Header.png

Design Elements by Crazy-4-Monograms
(from her kit called Still the One)



April 28, 2011

So Sick

I'm so sorry I haven't posted as much lately. I have been crazy busy and then to top it all off I got REALLY sick the last two days. I'm feeling better now but still recovering and getting my life back in order. Hopefully I can get a better start next week!

One more thing...what would you like me to post more about, free backgrounds, free headers, free templates, or tutorials. Leave me a comment so I can help you. If you want more tutorials, please tell me what you want to know!

~Dani~

April 26, 2011

New Web Address

Some of you may have noticed that my web address (URL) is no longer http://blogdesignsbydani.blogspot.com.  I changed it to http://www.blogdesignsbydani.com. The old address will still work, it will just redirect you to the new address without you even noticing.

The transition was easy but it did create one problem on my blog. At the bottom of each post I have buttons for you to click if you "Used It", "Love It", or want a "Matching Background Please". I use those to know what kinds of designs everyone prefers and also to know which backgrounds I need to make matching headers for. When I switched my URL, it cleared all of those boxes.

So, if you are still waiting for a matching header, please go to the background that you are using and click "Matching Header Please!" And if you have time, tell me which backgrounds you have used or loved. I really appreciate the feedback!

~Dani~

April 25, 2011

Yellow Roses Template

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

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

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

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




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




Design Elements by Crazy-4-Monograms
From her kit No Place Like Grandma's

April 20, 2011

Easter Blossoms



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

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

Matching Header 

Want this background without the eggs: Blossoms and Butterflies

April 18, 2011

How Do I Backup My Blogger Template?

Anytime you go to "Edit HTML" on the Template page and make changes, it is a good idea to backup your template.


Here's how to do it:

1. Go to your Template page from the Blogger Dashboard. Click on "Backup/Restore".

2. Click the orange button that says "Download Full Template".



3.  Save the file to a folder that will be easy to find it from again. Also rename to something like "Blog Template" so that it is easy to find.


That's It. If something goes wrong with your template after you make changes, you can bring back your saved template by clicking "Backup/Restore" again (from the Template page). Click "Browse" this time and find the template that you saved and choose "Open".


**One way to avoid ruining your blog when you edit the HTML is to click "Preview" after you make a change and before you click "Save".


Backing up Your Sidebar Gadgets:
Changing your template should not result in you losing your sidebar gadgets. However, occasionally it does happen. (I lost all of my links on my personal blog and I did not back it up beforehand.)

To backup your sidebar gadgets, you need to open some kind of text program, Word, Notepad or whatever you have and copy the info from your gadgets. In my back-up file, I copy the title and then any html code that is in the box. Or if the gadget has specific settings that I chose, I write down what settings I chose. For link lists, I copy the title of the link and the URL. This can be tedious if you have a lot, but totally worth it if you lose them!

Be sure to save your file!

These things can be a pain to backup, but you never know when something will go wrong!

April 15, 2011

Summer Flowers Header

Use with the background: Summer Flowers

http://headers.blogdesignsbydani.com/SummertimeDesigns/Summer Flowers Header.png

Design Elements by Summertime Designs
(from her kit called Energy)

April 13, 2011

Spring Stitches




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

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

Matching Header

April 12, 2011

How to Create Your First Blog

Most of the people that visit my blog already have a blog and do not need instructions on how to set up your first blog. But I bet many of you have friends that want to start a blog but are waiting for you to give them some step-by-step instructions on how to get started. Now, instead of having to sit down with them yourselves, you can direct them here and I will walk them through it.

If you are here for the first time and are ready to create your first blog...follow along. It is easier than you think. If you have any questions, you can leave a comment or email me. To see the images more clearly, simply click on them.

How to Create Your First Blog
(Instructions are for Blogger blogs.)

1. Go to http://www.blogger.com

2. If you already have Google account, then log in with your email and password. (If you already use gmail or Google docs or anything else with Google then you have a Google account. They all use the same login and password.)

 Once you sign in, you will see the Blogger Dashboard. To create your blog, click either "Create a Blog" or "Create Your Blog Now".


Now skip to Step 5 (if you already have a Google account and have signed in).
 
If you do not already have a Google account, keep reading.

3. To create a blog through Blogger, you will have to create a Google Account. To do this, click "Get Started".

4. Now you should see a screen that says, "Create a Google Account". As you fill in this page, here are a few things to note:  
  •  Your email address does not have to be a gmail address. It can be any email address as long as it already exists.  
  • The email address (that already exists) and the password you create here will be what you use to sign in to your blog.
  • The display name is the name you want to show up at the bottom of your posts. For example, my display name is "Dani". At the bottom of my posts it says, "Posted by Dani".  
  • This may seem obvious, but make sure you enter your birthdate correctly. I created a blog for a friend and entered the current year instead of her birth year. Silly mistake, but it locked me out. It told me I was too young and wouldn't let me create an account.
Read the Term of Service, check the box if you agree, and click Continue.
 
5. You should all have a Google Account now. The next step is to Name Your Blog.

The first box says to enter a Blog Title. My blog title is "Blog Designs by Dani". My blog title is not very creative...but I'm not great with words, so I didn't care that much. Creative titles are best, but I also like a title that tells me what the blog is about.

The second box is your blog address or URL. My URL is http://blogdesignsbydani.blogspot.com, so the part that I typed in was "blogdesignsbydani".  Some of you may think that you need a www in your blog address, but you don't need it. Do not type www into your blog address. It will confuse the people that you give your address to and will make it harder for people to find your blog.

One more thing to note about your URL. In my opinion, it is best to have your URL and your blog title match, if possible. It will make it so much easier for people to find your blog if the address is the same as the title. Sometimes this isn't always possible if the address you wanted is taken, but it is worth the effort to come up with something new that does match. I originally wanted my blog to be just "Designs by Dani", but it was already taken. So I added "Blog" to my URL. I knew I wanted it to be easy for people to find my blog just from my title, so I made my title "Blog Designs by Dani".

Before clicking Continue, click Check Availability. If your address is unavailable, you will need to choose another address. 

If you want to change your address later, you can (by going to your Blogger Dashboard and clicking on Settings and then Basic, for the title, and Publishing, for the web address). However, once you start to give out your address and have followers, it is not a good idea to change your address and title.

Type in the Word Verification (This is how Blogger makes sure that you are a real person and not a computer creating an account.) and click Continue.

This is what it looked like when I created my blog.

6. The last step is to Choose a Template. A template is the layout and design part of your blog. Just look at the pictures to decide on a template.

This is a personal preference, so choose whichever one you like best. You can always change it later. When you have chosen, click Continue. (To use my free backgrounds, you should use the template Minima. This is not one of the options here, but you can follow my instructions here to do it later.).

7.  If you see this screen, then Congratulations! You created your first blog!

To get started on your blog, just follow the screen. If you want to start by making your first post, then click on "start posting now". To change how your blog looks first, click "Customize how your blog looks". If you click "Start Blogging", you should see this screen:


This is called the Blogger Dashboard. When you sign in to Blogger, this is the page you will see first. For instructions on how to get started posting, go to my Basic Blogger Instructions.

If you have more questions that you would like me to post about or respond to you individually send me an email or leave a comment.

Happy Blogging!!

~Dani~

April 11, 2011

Dotted Flowers



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

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

Matching Header

April 9, 2011

Simple Swirls Template

By using this template, you agree to the terms of use.
 
 This template includes:
  a wide 2-column layout
  a background
  a matching header
  a post icon (picture next to the post title)
  a post divider (picture in between each post)

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

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




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



 

Design Elements by Summertime Designs
From her kit Dryer Lint at Tiffany's 

April 8, 2011

Spring Dots Header

Use with the background: Spring Dots

http://headers.blogdesignsbydani.com/SummertimeDesigns/Spring Dots Header.png

Design Elements by Summertime Designs
(from her kit called A Little Spring in Your Step)

April 7, 2011

How to Add a Scroll Box

I had a reader ask how I make the scroll box that contains my HTML code for my backgrounds and buttons. I could explain it but I found another blog called Blogging Basics 101 that explained it really well. Check it out:

April 6, 2011

Learning HTML and CSS

Recently someone asked me if you have to know HTML and CSS to be able design blogs like I do. The answer is yes. However, you don't have to be an expert. A few basics will go a long way. Blogger makes everything a lot simpler than if you were to design your own web page.

So where did I learn basic HTML and CSS? I used the websites below. They are very well organized and straightforward. I used the first one the most. For those of you wondering what CSS is (and maybe HTML), they explain it in the introductions.

http://www.w3schools.com/html/DEFAULT.asp

http://www.html.net/

http://www.utexas.edu/learn/html/

I also checked out books from my local library. If you do the same, just make sure to look for books that have been published in the last year or two.

Hope it helps!

~ Dani ~

April 5, 2011

Spring Flowers Header

Use with the background: Spring Flowers


http://headers.blogdesignsbydani.com/Crazy4Monograms/Spring Flowers Header.png





http://headers.blogdesignsbydani.com/Crazy4Monograms/Spring Flowers Header_Easter.png



Design Elements by Crazy-4-Monograms
(from her kit called Lil Peeps)



April 2, 2011

Baby Feet - Boy



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

Design Elements by Just So Scrappy
(from her kit called Baby Mine Boy)

Baby Feet - Girl


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

Design Elements by Just So Scrappy
(from her kit called Baby Mine Girl)

April 1, 2011

Changing or Removing Your Blogger Navbar

Have you noticed that the default setting for the Blogger Navbar is that dark blue that doesn't really match most blog backgrounds, like the one below (Click to enlarge).


Did you know that you can change the color of it?

Here's how:

1. Click on Design from your Dashboard (or from your Blogger Navbar).
2. On the Page Elements page, click Edit on the bar that says "Navbar". (See below, click to enlarge.)


3. Choose the color you like best and click Save. Then View Blog.

 You can see from the picture above that I chose the transparent light navbar. That way it always matches my blog no matter how many times I change my background. Also, I like that the transparent bar does not stand out as much as the others.

Here's my nav bar (Click to enlarge):

Did you know that you can completely remove your Blogger Navbar? Why would you want to do this? If you have a blog for your business, removing the navbar makes your blog look more like a professional website. However, you might want to keep it if you do a lot of editing on your blog. I keep mine for that reason. Also, by keeping my Navbar, you can move more easily from my blog to yours with the navbar by clicking Dashboard. (Of course you can also keep more than one browser window open too.)

There are a lot of instructions on the web on how to remove your Blogger Navbar. Here's what I found to be the most common:

How to remove your navbar:
1. Backup your template. (You should always do this when you edit the html of your blog.)
2. Click Design, and then Edit HTML. (At the top is where you can backup your template.)
3. Copy the red code below:
#navbar-iframe {display:none !important;  }

4. Paste the code after the Template name and credits as shown below. (If you are using the Minima template, place it just before the code   /*  Variable definitions as shown below.) (Click to enlarge):
5. Click Preview. If everything looks ok, then click Save Template. Then click View Blog and you are done!