Blog Designs by Dani

Done blogging

noreply@blogger.com (Dani) — Wed, 11 Nov 2015 05:27:00 +0000

It has been well over a year since my last post. I rarely check my emails for this account so I'm sorry to anyone that emailed and has not received a response. I just don't have time to keep up with this at all. Thank you for all of your support. I thought I would come back but it just isn't going to work. My hosting service will expire soon, which means my designs will disappear as well. I'm sorry about that. My tutorials will still be up. Good luck on your blogs!

Dani

Backgrounds Will Return Soon!

noreply@blogger.com (Dani) — Tue, 01 Jul 2014 05:44:00 +0000

I am so sorry that my designs have disappeared! My hosting service is supposed to renew automatically but I received an email last month saying it failed to renew. So I logged in and renewed it myself, or so I thought. Well, I have been busy with my new little one and didn't check my email and blog until today and saw that my background was gone! I have been trying to make the payment on their site but the purchase button does nothing. I am very frustrated with it but I have sent a message to them and will call in the morning if it doesn't get fixed. Again I am so sorry that it all disappeared!

If you were wondering....my new little baby has arrived and is doing well. He was my speedy delivery and arrived less than an hour after I got to the hospital. He is adorable and so sweet but does not like to leave my arms, which is why I have not checked back on the blog. He is 7 weeks old now and is finally letting me get a few things done during the day. Once I get into a better routine with him and/or once my preschooler starts school in the fall, I will have more time for this but I am wondering how many of you would still follow my blog. I don't often get much feedback on my posts so I am wondering how helpful my blog is. Please let me know if you would like me to continue posting and/or if you would like my designs to continue.

~Dani

2014 Update

noreply@blogger.com (Dani) — Tue, 01 Apr 2014 04:38:00 +0000

Hello everyone!

I have not blogged in so long and have been meaning to give you an update on what I've been up to and what my plans are for the future of this blog. Please keep reading and provide your feedback in the comments for this post.

So what have I been up to??

Hanging out with this little guy:

And getting ready for this little guy to come!!

Last fall I spent most of my time feeling sick and just trying to get through each day. In December, I was finally feeling better and tried to catch up on housework, get ready for Christmas and get ready for January when it was my turn to teach preschool for my son's co-op.

I must have overestimated how much I could handle because Christmas morning came and I started to feel a sore throat coming on. That sore throat turned into a horrible cough and cold, the kind of cough that makes your whole body ache from coughing so hard. And since I was pregnant, there wasn't much I could take to relieve the symptoms. My cough was so bad that it kept me up for hours every night. I wasn't getting any sleep and so it lasted for weeks and weeks and weeks with no sign of improvement. I went to the doctor but was told it was just a cold.

January came and it was my turn to teach preschool for my son's co-op preschool. (All of the moms teach a month.) All of my energy went into teaching and planning those lessons, all while still pretty sick. It was terribly exhausting but I survived and the kids had a lot of fun, I hope anyway. :)

By February, my cough finally started to calm down and I was finally getting sleep at night. I tried to relax and take care of myself but I also had so much to catch up on. During this time, my husband decided he wanted to go back to school. I totally support him in it and really think it's what he needs. But it means that we will have a major financial setback. So I thought to myself, I can't quit my blog completely. I've got to find a way to keep it going, add some ads, find a way to contribute to our income. That is when I posted my big news of coming back to my blog!!! Woohoo! Right?

But as much as I wanted to come back, I still have so little time for it. I replied to months worth of emails, but haven't gotten back to it since. I can't stay up late like I used to because my pregnant body just can't handle that anymore. And honestly, it is hard to get back into a blog like this. I don't really know where to start. However, here's what I came up with:

My future plans for this blog:

A. I want to continue posting, myself or with guest blogger contributors. I won't be able to post often. But I hope to have a post at least once a month from me and possibly once a week from guest bloggers to help to keep this blog up to date. This means I need 2 things from my readers:
1. I need your ideas and suggestions. What tutorials do you want to see? What old tutorials do you want me to update? Do you want any more designs? Do you want to see posts about anything other than tutorials and designs?

2. I need contributors. I was slow to reply to contributors that replied last time but I will ask again. Would you like to make a guest post with a blog design tutorial or other blog related topics? Send me an email to blogdesignsbydani@gmail.com. Include your tutorial ideas as well as a sample of your writing. Feel free to email me with any questions.

B. To keep this blog going, I need advertisements to help pay my hosting fees. If you would like to advertise your blog or business in my sidebar, please send me an email at blogdesignsbydani@gmail.com. I will email you my current rates. (I will only allow advertisements for companies or blogs that are wholesome and clean as well as relevant to my readers and myself.

C. I would love to be able to help readers that have technical problems when following my tutorials. However, those requests are incredibly time consuming. I have to go through another person's code, try to figure out what they did, what they did wrong, try to fix the problem on my computer and then try to help that person to fix it on their blog. I love helping people with this but I just don't have that kind of time. In the future, if I am able to, I would like to do this, but I may need to charge a fee. Please tell me if this would interest any of you.

D. I need to update this blog. I know it could use some improvement. In terms of usability, what improvements would help you to better navigate this blog? Are there any improvements that would help you to get more out of this blog, besides more tutorials?

E. Now, I am due in the middle of May and I do not anticipate getting back into things much before then. But once I get into a good routine with my new baby, I will try to work on what I mentioned above.

These are my thoughts for my blog. I hope that you'll leave a comment offering your ideas and suggestions. Thanks for still following me!!

~Dani

Posts, Contributors, Advertising...

noreply@blogger.com (Dani) — Thu, 14 Nov 2013 22:55:00 +0000

Hello Everyone,

It sure has been a while since I last posted. As I have thought more about this blog, I have been realizing the importance of keeping it going to some degree. I do not have time to post regularly, but I would like to look into having contributors and making my own posts occasionally. I have had a few interested contributors that I will be contacting soon. (I have had a stressful last few months that will hopefully get better soon.) I also am looking into advertising to help me pay my hosting fees. My last donation has lasted for a long time but will be used up at the end of the month. If anyone would like to make another donation to help me pay my hosting fees until I get things running again, it would be greatly appreciated.

I have a few advertising ideas, but for those of you that have advertising on your blog, how do you manage it? I would love to get feedback on how to get good relevant advertising on my blog (other than Google ads).

Lastly, I do not have as much time for blog design but I do enjoy other projects and crafts. Would you be interested in posts other than blog design? For example, I am planning a Lego party for my son. Would anyone be interested in the projects I made for the party? If I make Christmas crafts or other sewing projects, would you be interested in reading about those? I would love to get your feedback!

Thank you to everyone who has still stuck around and supported my blog! I have been overwhelmed by the kind comments so many of you have shared since I stopped posting. Thank you so much!

Dani

Interested Contributors

noreply@blogger.com (Dani) — Wed, 17 Jul 2013 22:01:00 +0000

I have been contemplating the idea of adding contributors to my blog so that I can keep it going without overwhelming myself. But I would like to know if there is any interest in this before I pursue it. If you are interested in becoming a contributor to my blog, please leave a comment on this post or email me at blogdesignsbydani[at]gmail[dot]com. Include your name and website in the comment or email. By becoming a contributor, you would write blog design tutorials or tips for my readers. You would not be compensated but you would be able to advertise in your post(s) for your own personal blog or business. If there is enough interest, I will post again with an application for you to submit.

Easy Canvas Prints Giveaway!

noreply@blogger.com (Dani) — Mon, 24 Jun 2013 07:00:00 +0000

THIS GIVEAWAY HAS CLOSED

Congratulations to Susan on your free 8x10 canvas print!

(Susan, you should have received an email with instructions on how to order your print.)

~~I may be done posting designs and tutorials, but I can still offer giveaways! I'm excited to share this one with you. Enter below to win a free 8x10 canvas print from Easy Canvas Prints:~~

If you have never used Easy Canvas Prints before or never ordered a canvas print, you can read my review (from about 2 years ago) HERE. They were really easy to work with and I still love the print I received. The quality of the print is amazing. I have had several people ask me if my canvas print is a painting. Here is mine:

So go ahead, enter the giveaway above and win a free 8x10 canvas print of your very own!

Giveaway runs from June 24 - July 5, 2013 at midnight.

GOOD LUCK!

Hosting Renewed!

noreply@blogger.com (Dani) — Thu, 09 May 2013 20:43:00 +0000

Many thanks to Kathy for her very generous donation! I will be able to renew my hosting and domain name through the end of the year. So, don't change your backgrounds just yet or if you have, come grab your old one. They will be good through December!

~Dani

The Time Has Come to Say Goodbye!

noreply@blogger.com (Dani) — Fri, 29 Mar 2013 21:29:00 +0000

If you have been keeping up with my blog, you've probably heard that I am quitting my blog. I have been contemplating this for months, maybe even a year, and finally have decided that I just don't have time for it. I love writing tutorials and helping people fix up their blogs, but it really sets me back in my family and personal life. I have posted my last tutorial and will no longer be posting designs or tutorials. Also, I will not be doing any more custom designs.

I have considered just leaving my blog as it is but there are a few problems with this. Without doing custom designs, I don't make any money on this blog. No big deal, except that this blog is not free for me. In order for me to offer background and design images for readers to put on their blogs, I have to store the images on the web. To do this costs money, about $10/month in addition to the yearly fee for my domain name (making my blog a .com instead of a .blogspot.com) and another fee to keep my personal info private through my hosting service. I have considered putting advertising on my blog, but I feel like if I am going to ask people to pay me for advertising then I should post regularly on my blog. Because I can't do that, I can't ask.

So, what does this mean for all of you?

1. My blog will stay on the web.
All of my tutorials will stay put. They may get outdated, but they will still be here as a resource. If I do not renew my domain name (blogdesignsbydani.com), then you will find my blog at http://blogdesignsbydani.blogspot.com.

2. What about my backgrounds, headers and template?
In order for me to make all of my designs accessible to you, I have had to upload them all to a web hosting service, as I mentioned above. I have renewed my hosting service through the beginning of June. So before that, nothing will change. I won't be posting any more designs, but all of my backgrounds, headers and templates will still be available for use through the beginning of June. Now, if enough of you are dying to still use my free designs and you are willing to donate to my blog, I can keep my hosting service. I pay 3 months at a time to get a good discount, so I would need 3 months worth (about $35 for 3 months of service). If that is not the case, then when the 3 months are up, all of my design images will be gone.

If people do donate, I will post updates on whether I have received enough to extend my hosting service as well as dates that the designs are still available.

If I end my hosting service, I will likely cancel my domain name when it expires in September. If that is the case, you will find my blog at http://blogdesignsbydani.blogspot.com. My designs will not be there but my tutorials will still be there.

Update: I received a generous donation to my blog allowing me to keep my hosting through the end of the year (2013). This means that my free designs (backgrounds, headers and templates) will be available through December of 2013. Thank you, thank you to a kind reader!

3. Open Comments
I have been moderating my comments because I really hate spam-like comments. Also, people are more careful about what they post when they know it will be moderated. I honestly haven't deleted any comments other than spam. (Not all spam is caught by Blogger.) But since I won't be reading comments regularly, I will not moderate comments in the future. This means that if someone posts a question and you know the answer, please answer it for me. Also, if anyone posts anything offensive or spam-like, please email me and I will delete it.

4. I will keep my Facebook, Twitter and Pinterest Accounts
I will keep these social networking accounts and I may post now and then if I find interesting things on the web. I am often on Pinterest, so you can definitely find my pins there. :)

A few last words of advice

I am very sad to quit this blog, but when I finally made the decision, I felt so strongly that it was the right thing to do. I want to thank all of you for your support. I have learned so much from this blog in the last few years. Before I go, I would like to offer a few final tips for designing your own blog:

1. Always back-up your template before making any changes to your blog, even little ones. You never know when you might delete a semi-colon or a bracket by mistake and now your entire blog is a mess. Here is my tutorial on How to Back-up Your Template.

2. Keep a journal of all the changes you make. Sometimes it takes a while for you to notice that one of your blog modifications is causing a lot of problems. If you don't know what you did or where you found the tutorial, you are going to have a very hard time fixing it. So record specific tutorial links along with a description of the changes you made with it.

3. Before you alter the HTML/CSS of your blog, try to learn as much as you can so that you know what you are doing. When you post random codes onto your blog and then try to fix them, you may find an even bigger mess than you started with. Learn the basics of HTML and CSS. Creative Bloq has a list of the Top 20 Online Training Resources for anyone interested in learning more about web design. I have used #1 and 10 from that list and recommend those for beginners.

4. Keep your blog simple. Too many busy designs distract readers and make it hard to find what they are looking for. Create simple, easy to find navigation and always include contact information. Your navigation can be through Blogger's pages where you can create vertical and horizontal navigation bars or you can create a Drop-Down Navigation Bar. And if nothing else, at least use good labels for your posts that can be accessed through your sidebar.

5. Read the comments section of tutorials. Often readers have the same questions when they do a tutorial and the answers to those questions are often found in the comment section. Also if you, as a reader, know the answer to a question in a comment, don't be afraid to respond. It is hard for a blogger to respond to every question posted. Help each other out, especially now that I won't be responding to comments on this blog in the future.

If you have any other words of advice that you think should be added to the list, post it in the comments section.

Resources
I know that there are a lot of blogs that are very similar to mine and I want to create a list of links to help you with your blog. If you have any to add to the list, please do so in the comments.

The following blogs offer free or custom designs and/or tutorials. Check them out:

Smitten Blog Designs Free and Custom templates, Blogger and Wordpress, as well as other free printables
Designer Blogs Custom and Pre-Made Blog Designs, Blogger and Wordpress
Makin' Cute Blogs Free Backgrounds and Tutorials
Leelou Blogs Free and Custom Blog and Social Networking Designs
A Mommy's Blog Design Custom and Pre-Made Blog Designs, Blogger and Wordpress plus a few useful resources for blogging
Hot Bliggity Blog Free and Custom Blog Designs
The Cutest Blog on the Block Free and Custom Blog Designs, Blogger and Wordpress
Shabby Blogs Free Backgrounds and other Extras, Custom Designs, Tutorials
Kevin and Amanda Very diverse blog including Blog Tutorials, Photoshop Tutorials, etc. (see her right side bar for tutorials)

These sites have links to a number of blog designers. I have not been to most of them, but feel free to check it out:
Custom Blog Designers
Simply Blog it Backgrounds (Designers listed in sidebar)
Mama of 3 Munchkins

Thank you all again for following and supporting my blog! I wish you all the best of luck with your blogs!

~Dani

Making a Drop-Down Navigation Bar

noreply@blogger.com (Dani) — Wed, 27 Mar 2013 06:14:00 +0000

I have received several comments asking for a tutorial on how to make a drop-down navigation bar like you see on my blog. This will be my last tutorial on this blog!

Now, I have to be honest. I created this tutorial 2-3 years ago and I struggled with it for a long time, trying to get it right. As I went back, I spent a lot of time trying to figure out what I did in the first place and even ran into some of the same errors as I did the first time. For this navigation bar, I used HTML Dog for the main part of the tutorial and various other help forums to figure out some of the rest. While I can give good explanations for most of the tutorial, there are some parts that I don't completely understand. Also, I am not a professional web designer. Some of my modifications are probably not be the best practices for web design. But for a beginner, they get the job done.

If you don't know anything about HTML/CSS, this tutorial may be difficult for you. I have given some explanations and links that should get you through the tutorial, but if you need to make additional modifications, you may have trouble. Creative Bloq has a list of the Top 20 Online Training Resources for anyone interested in learning more about web design. I have used #1 and 10 from that list and recommend those for beginners.

For this tutorial, I created a new navigation bar, similar to the one on my blog. I am using the Blogger Simple template that was customized in my tutorial on How to Make Your Own Custom Blog Template. You can look at the actual navigation bar on my Practice Blog. Here is a preview:

Want the full tutorial? Keep reading!

Before you start the tutorial, be sure to back-up your template. Read my tutorial here on How to Back-up Your Template.

Like most web tutorials, there are two parts of code that you need to build/add to your blog, HTML and CSS. The HTML is the framework for the navigation bar and the CSS is the part that styles the navigation bar (CSS: Cascading Style Sheet)

I. HTML for Drop-Down Navigation Bar

To create your navigation bar, you need to learn a little HTML first. Navigation bars are usually made as lists. Your lists will consist of your Main Titles and your Subcategories. On my blog, my Main Titles are Home, Free Designs, Custom Designs, Tutorials, Terms of Use and About Me.

The Secondary Titles are the titles that show up when you hover over these Main Titles. Under my Free Designs title, my Secondary Titles are Free Backgrounds, Free Headers and Free Templates.

In HTML terms, we are going to use unordered lists. (Go to w3schools to learn more about lists.)

The entire list of links (Main Titles and Secondary Titles) will be an unordered list that starts with <ul> and ends with </ul>.

Within the main unordered list (our entire list of links) are several list items (our Main Titles). Each list item starts with <li> and ends with </li>.

So far, your HTML would look like this:

To have Secondary Titles below these Main Titles, you have to create a new unordered list (starting with <ul> and ending with </ul>) within each Main Title. Each of these unordered lists represent the entire set of Secondary Titles for a particular Main Title. Therefore, you need to have list items (starting with <li> and ending with </li> within the Secondary unordered list. Each of these list items represent a specific Secondary Title. So adding on to the HTML above, we would have:

Add as many Secondary Titles as you need. Notice in the HTML in this last example, that the third Main Title does not have any subcategories. For any title that you do not want to have subcategories, simply close the list item with </li>.

Now, if we enter our links as shown above, the words for each title will show up but they will not be linked to anything. The HTML for links is

<a href="URL">Text</a>

You can copy the code below and modify it for your blog:

<ul>
<li><a href="URL to Main Title #1">Main Title #1
<ul>
<li><a href="URL to Secondary Title #1A">Secondary #1A</a></li>
<li><a href="URL to Secondary Title #1B">Secondary #1B</a></li>
</ul>
</a></li>
<li><a href="URL to Main Title #2">Main Title #2
<ul>
<li><a href="URL to Secondary Title #2A">Secondary #2A</a></li>
<li><a href="URL to Secondary Title #2B">Secondary #2B</a></li>
</ul>
</a></li>
<li><a href="URL to Main Title #3">Main Title #3</a></li>
</ul>

This HTML needs to be added just below your header. To do this, go to your Layout page and click "Add a Gadget" and choose "HTML/JavaScript". Enter your code into the gadget and click Save.

II. CSS for Drop-Down Navigation Bar

This list so far will not look right. This kind of list will be somewhat vertical. To make it horizontal, you need to adjust it using CSS.

Even though you haven't labeled it in your HTML as a navigation bar, your blog will assume it is. This means that you can adjust those Border Lines and the Font in the Template Designer under "Tabs Text" and "Accents" (then adjust "Tabs Border Color") .

The same navigation bar with the changes mentioned above. I also adjusted the color.

For my blog, I used a tutorial at HTML Dog. The post is called Son of Suckerfish Dropdowns. Please read this post under the title Single-level Dropdowns to get the CSS as I am not at liberty to copy their styling in my post.

The first section in the Son of Suckerfish tutorial is pretty standard HTML that I explained in part 1 above, but the second section, the CSS styling is all theirs. I don't understand all of it but I will share with you the changes I made to accommodate my blog and why.

A. To add their CSS, go to your Template page and click "Customize" (the orange button). Click "Advanced" in the far left column. Scroll to the bottom of the second column and click "Add CSS". You can enter the CSS code from the Son of Suckerfish tutorial there. (If you already have coding there, be sure to scroll to the very bottom before adding code.)

Make sure that you copy the correct coding. You are only copying the CSS code. HTML coding starts and ends with elements in brackets, like this:

<ul>
<li>Text</li>
</ul>

CSS coding starts with a title followed by an open curly bracket and ends with a closed curly bracket:

#nav {
margin: 10px;
}

So start in the second box of their tutorial that starts with #nav... and copy the CSS from all the boxes (including the JavaScript in the second to last box) all the way until you get to Multi-level Dropdowns.

This CSS should do something similar to what you see below to your navigation bar:

My cursor was placed over the Tutorials tab to show you the drop-down menu.

B. Clearly we need to make a few modifications. Follow along with me as I adjust the CSS. You can copy any of my changes or leave them alone depending on your preference.

First, I am going to share the simple design modifications like colors, backgrounds and fonts:
1. The CSS id #nav, #nav ul alters the entire navigation list. The "ul" refers to the large unordered list covering all the titles. (Read more about CSS "Id's and Classes" at w3schools.)

Under this id, I added a color attribute to the text. You can either add a specific color in the code or you can add a variable that will allow you to change the color in the Template Designer.

a. If you just want to add the specific color, add the following line under #nav, #nav ul {

color: #6-digit color code or HEX code;

for example:

color: #c2dbda;

*There are tons of websites that can help you find a color code for this. Here is one site that is easy to use: http://www.colorpicker.com/*

b. Or if you want to add a variable that can be changed in the Template Designer (under "Tabs Text" and then "Text Color"), add this line instead:

color: $(tabs.text.color);

*Note that this variable is for the Simple Template, you will need to find your Tabs Text Color for your specific template. My previous tutorial HERE explains the variables in your HTML. *

2. The next CSS id is #nav a. Remember the "a" that was used in the HTML to add links to everything? Well this is the same "a". It refers to all of the links in your navigation bar. We can give our links a new color whenever you place your cursor over them. This shows your readers that it is a link and not just text.

In the Template Designer, the Tabs Text Selected Color is under "Tabs Text". To include this in our code, under #nav a { you can add the same color line as in part 1 above or add the following line to be able to modify the color easily in the template designer:

color: $(tabs.selected.text.color);

*Again, remember this is for the Blogger Simple template. I can't guarantee this works in other templates.*

3. Under this same id, #nav a, add the following line to change the font:

font: $(tabs.font);

*This uses a variable instead of an actual font, so that you can modify it easily in the Template Designer. To learn how to manually add fonts, go to w3schools.*

*If you used variables for your colors and fonts, be sure to change them accordingly in the Template Designer.*

4. When I hover my cursor over my Main Titles, my Secondary Titles should appear. To make them easier to read, I want to add a background color to them. The id #nav li:hover ul is the one that modifies the "ul" or unordered list that is within the "li" or list items. So this is the set of Secondary Titles when you hover over the "li" or Main Titles. So under this id, add the following line to add a background color:

background: #6-digit color code or HEX code;

for example:

background: #c2dbda;

*There are tons of websites that can help you find a color code for this. Here is one site that is easy to use: http://www.colorpicker.com/*

5. I also wanted a border around these backgrounds to give it a crisp look. Here is the line I added to this same id as step 4:

border: #6-digit color code or HEX code solid 2px;

for example:

border: #5a908b solid 2px;

*To learn more about borders, go to w3schools.*

Here is my blog thus far:

6. Notice in the picture above that there is also a background behind the Main Title that is Selected. If you move the cursor down to any of the drop down options, it will place that dark color (or whatever color you choose) as the background to the selected link. If you like this, then leave it as is. Otherwise, go to your Template Designer and under "Tabs Background" and then "Selected Color", choose "Transparent".

Alright, now let's make some spacing modifications:

7. On my blog, I used my header image to create a background for my navigation bar. On Blog Designs by Dani, the blue scallop is part of my header.

On my Practice Blog the yellow ribbon is part of my header.

With the code as it is now, my navigation bar sits below this yellow ribbon.

In order to push it up onto my header and the yellow ribbon, I needed to add the following code to the id #nav, #nav ul

margin-top: -93px;

****Be sure to add this line AFTER "margin: 0;" or it won't work. ****

*Margin usually is used to place a margin or space between two design elements, like the header and navigation bar. However, if you want things to overlap, you can use negative numbers to move the margin in the opposite direction. You will probably need to adjust this number depending on the spacing in your blog. To learn more about margins, go to w3schools and learn about the box model and margins.*

8. If you want to move your navigation bar to the left or the right, you can adjust the margin-left under this same id as in step 7. Add the following line to do so:

margin-left: 5px;

*Positive values will move it to the right, negative values to the left. *
****Again, be sure to add this after "margin: 0;" or it won't work.****

Navigation bar shifted up onto the Yellow Ribbon on the Header.

9. When I got to this point, my drop-down menus were acting weird and when I hovered over the Main Title, the drop-downs would show but would cover the Main Titles. They were sitting on top of or even above these Main Titles, instead of below them. What is even more frustrating is that different browsers will position it differently.

Drop-downs not positioned correctly

To reset this and place them below the Main Titles, I added this line to the id #nav li:hover ul

margin-top: 0px;

*You can adjust this up or down but be careful that your drop-downs do not get too far below your Main Titles. If they do, then by the time you move your cursor down to the Secondary Titles, the titles will disappear.*

All better...almost!

Now let's do a few more spacing modifications, but this time, just altering the width of specific elements.

10. The id #nav li represents the Main Titles in your navigation bar. If you adjust the width of this, you will increase or decrease the space between your Main Titles.

11. The id #nav li ul represents the drop-down lists. Adjusting this width will adjust the width of the drop-down menus.

Finally, the last glitch I found was a pretty big one.

12. After doing all these modifications, I found that when I tried to select one of titles in my drop-down menu, the menu would disappear before I could click on it. I also noticed that my drop-down menus are sitting underneath the text of the blog, like the date header and post title.

If you add this line of code to the id #nav, #nav ul, both problems are fixed:

z-index: 999;

Drop-downs are now sitting above the rest of the blog elements.

C. If you used variables to adjust colors or fonts (as in steps 1-3) or if you would like to remove border lines, you need to make these adjustments in the Template Designer.

If you have the Simple template, make sure you are in the Template Designer and find Tabs Text. Adjust the font, font size, text color and selected color.

Then go to Tabs Background and make sure the background color is transparent (if you are using your header as your background, like me).

Then click Accents and make sure the separator line color and the tabs border color are transparent (if you are using the header as your background, like me).

D. If you still notice that there is a border line between your Main Titles, get out of the Template Designer and go to your Template page. Click Edit HTML. Do a search (CTRL-F on a PC) for Variable name="tabs.border.width". You should see the following lines:

Change the values of both so that it reads value="0px":

<Variable name="tabs.border.width" description="Tabs Border Width" type="length" default="1px" value="0px"/>
<Variable name="tabs.bevel.border.width" description="Tabs Bevel Border Width" type="length" default="1px" value="0px"/>.

Preview it and then Save Your Changes.

*There is one more problem that I cannot figure out. When I view my Practice Blog in Internet Explorer, the drop-down menus appear on the side instead of below. They are still accessible, they just look weird. They look fine in Firefox, Chrome and Safari. If any of you figure it out, let me know!


Drop-downs sit beside the Main Titles instead of below. No idea why!? That's Internet Explorer for you, I guess. :)

III. Creating a Header with a Navigation Bar Background

In step II-B-7, I showed you my header image. If you would like to know how I created my header to fit my nav bar, here is a little preview of the different elements in my header:

The ribbon consists of a ribbon from Katie Castillo's scrapbook kit at Just So Scrappy called "Fresh Squeezed". The ribbon was originally a scallop, but I cropped off the scalloped portion so that it was just a rectangle. I then added two more of the same ribbon and angled them so that the ribbon looked like it was wrapping around the middle of my blog. I placed the angled ribbons below the middle section as shown below:

Well, that's it! Here is the finished navigation bar or you can check out on my Practice Blog.

I can answer a few questions in the coming week or two but after that, I probably won't be checking in often. I will still allow you to post comments so that other readers may answer your questions. Good luck with your blogs!

Signing off soon, but first....

noreply@blogger.com (Dani) — Mon, 11 Mar 2013 23:01:00 +0000

Hello everyone,

I have been contemplating for the LONGEST time what I should do with this blog. I have so little time for it and it is hard for me to spend all of my free time here. I haven't been posting very often but I think I may have to call it quits soon. I meant to post about this and tell everyone what that means in terms of all my free designs. I also wanted to give you a few last pointers on designing your blogs and offer links to other design blogs.

However, I have had a several requests for a tutorial on my drop-down navigation bar. I don't have a lot of time, so if this isn't something that a large audience will read, I may not post it. But, if I can get a lot of comments in favor of this tutorial, I will make this my last tutorial. And then I will offer my goodbyes and my last advice to help you with your blog.

I am so very sorry to have to quit this blog, but my family must come first. :)

~Dani

7 Common Mistakes Link

noreply@blogger.com (Dani) — Sun, 17 Feb 2013 00:22:00 +0000

While perusing Pinterest, I found the following article:

Seven Mistakes Even Nice-Looking Blogs Make

The mistakes aren't necessarily about visual designs as much as they are about how accessible your blog is to your readers. It's a good read. Go check it out!

How to Make Your Own Custom Blog Template

noreply@blogger.com (Dani) — Tue, 12 Feb 2013 08:10:00 +0000

I have finally finished my tutorial on How to Create Your Own Custom Blog Template! (or at least customize the Simple Template with your own amazing design) This tutorial is based on the designs that I like to make where the header is placed above the body of the blog in such a way that it looks like it has been cut away from the background as shown below:

This tutorial is my most advanced tutorial in terms of both graphic design skills and HTML/CSS knowledge and is quite long. However, if you have had success with my previous tutorials, don't be afraid to give this one a try!

To create the graphics for your template, you can use any of your own creations or obtain permission from designers that make digital clipart or any other digital designs. I like to use digital scrapbook kits. In my sidebar are listed the digital designers that I have used for my free designs. I have permission to use their designs because I have paid the commercial license fees they required. If you find a design on the web, make sure that you check the designer's terms of use and/or email the designer to verify their permission for you to use their designs. This is especially true if you have a commercial blog and/or make any income from your blog.

Once you have graphics for your template design, you need to decide what graphics editing program you will use. I recommend either Photoshop Elements or Pixlr.com. If you are fine with a simple design, Pixlr is the way to go. If you want something more detailed, I would use something better like Photoshop Elements.

Now, let me give you a quick break down of the steps in this tutorial:

1. BACKUP YOUR CURRENT TEMPLATE!
2. Create a Repeatable Background
3. Create a Header, Post/Sidebar Background and Footer
4. Change to the Simple Template
5. Alter the HTML/CSS
6. Make a Few Adjustments
7. Add Extra Designs

Alright, let's get started:

1. BACKUP YOUR CURRENT TEMPLATE!

This tutorial can get complicated. If you make any mistakes, I am not liable, so backup your template before you do anything to your blog. Another good idea is to create an additional blog that you can practice on. That way, if anything goes wrong, your practice blog will be affected but your real blog won't be ruined. Once you create your perfect template, you can download the HTML from the practice blog and then upload it to the blog you actually use.

Here is my tutorial on How to Backup Your Template. Be sure to read the full tutorial so that you backup both your template and your sidebar gadgets.

2. CREATE A REPEATABLE BACKGROUND

This is an example of a repeatable background that I will be using for this tutorial.

To make this design, I cropped an image from a digital scrapbook kit. (This is from Just So Scrappy's kit "Fresh Squeezed" by Katie Castillo). This image will be tiled across the background of your blog so that it covers the entire screen. This type of background is best because the file size of this image can be very small. A small image size means that when a reader opens your blog, the background of your design will load very quickly. More intricate background designs can get very large and slow down the computers of your readers.

This type of background is essential for this template design but you have 2 options for how to upload your background. I recommend following step A below to get more detailed instructions on making the background design. However, I recommend following the instructions in step B to upload your design straight from your computer.

A. Here is my tutorial on How To Make Your Own Background, that shows you how to make the background as well as how to upload it to the web onto a site like Photobucket.

B. If you don't want to host your background image on the web, you can upload it to your blog straight from your computer.

i. Go to your Template page.
ii. Click "Customize" (the orange button) so that you are in the Template Designer.
iii. Click "Backgrounds" from the menu on the left.
iv. Click the small gray arrow and then click "Upload Image" in the window that pops up.

v. Once the image is uploaded, adjust the options as follows:

      a. Alignment: This is up to you. I don't think it matters where the original image starts. I have mine in the top left corner.
      b. Tile: This must be set to Tile.
      c. Scroll with page: I personally get a little dizzy when backgrounds scroll with the page so I unchecked this box. If you like the background to move up and down with your blog, check this box.

3. CREATE A HEADER, POST/SIDEBAR BACKGROUND AND FOOTER

This type of design requires a specific type of header. Here is the header I made for this tutorial:

Notice that the header has the post/sidebar background attached to the bottom of it. This is necessary to give it the continuous look. Also notice that the background behind my title is transparent. It is not white, it is transparent.

Carolynn at Makin' Cute Blogs has posted a video tutorial on how to make a similar design. She offers a video tutorial using Pixlr. The last video shows how to make the post/sidebar background. Here is her tutorial:

How to Design a Seamless Border Blog Header, Post Background Section and Footer using Pixlr.com

For a more detailed header design, you can follow my instructions below. (I am creating this in Photoshop CS4 but you can adjust these for Photoshop Elements, Pixlr or whatever program you have.)

A. Open your design program of choice and open a new file with these dimensions:

The width and height can vary depending on your preference. The resolution should be 72 pixels/inch if you are using another designer's images for your header. (The larger the resolution, the more time it will take to load onto a computer.) The background MUST BE TRANSPARENT!

B. Create rounded rectangles that will act as the background to your post and sidebars. I like to do 3 rectangles but you can do it very simply and just do one.

Notice that the bottom of my rectangles are cut off. If your program allows, you can add shadows to your rounded rectangles. I also used matching digital scrapbook paper from the kit mentioned above to fill these rectangles. (I used layer masks to fill the shapes with the scrapbook paper. There are many tutorials on the web that can teach you how to do this.)

C. Next, add other design elements from your digital scrap kit or other images that you have permission to use. (Remember, you cannot use just any image from the web on your blog. Even if you find an image that does not have a watermark, you do not necessarily have permission to use that image. Be especially careful if you plan to use an image for your logo.)

To learn how to add elements to a design, read my tutorial on How to Make Your Own Blog Button. Once you are done with your design, save your image. You must save your image as a png file. If you don't save it in this format, it will not have a transparent background. To learn what a png file is, read my tutorial on the Difference Between a jpg and a png file.

Here is another look at the header I designed for this tutorial:

Notice that the colors I used in my text as well as in the butterflies are light enough to be seen over my dark blue background.

Once your header is complete and saved, go to your blog and upload your header from the Layout page. To do this, choose Layout from the drop-down menu on your Blogger Dashboard. Once you are on this page, find the white rectangle that says, "Header". Click "Edit" in this box. A small window will pop-up. Click "Browse" and find your header image on your computer. Then click "Instead of Title and Description". Un-check "Shrink to Fit". Click "Save" and your header will be uploaded to your blog. It will not be positioned correctly or have a transparent background, but that is ok for now.

D. Now we are going to use our header image to create our Post/Sidebar background.

In your graphics editing program, use the marquee tool to select a small sliver of your header as shown below:

I've used the crop tool here so that the small sliver can be seen better. If you use the crop tool to cut out this piece, be sure to save your file with a different file name so that your header is not lost!

Once you select this small sliver for your header, you will need to copy it (possibly "Copy Merged") and then paste it into a new file that is the same size. This image can be very short because it will be repeated vertically all the way down your blog. If you use shadows around the sides of your header, like I did, then you will have to save your post/sidebar background as a png file. If you did not, you can crop your image around the image so that none of the background shows and save it as a jpg file.

Once your image is saved, you will need to upload it to a site like Photobucket. However, Photobucket recently changed things so that unless you have a Pro account, you can't upload images as wide as the ones we are making. If you do not have a Pro account, upload it to Blogger as shown below:

i. Create a new post.

ii. In this post, upload your background image as shown below:

Make sure the size is set to "Original size". Also, notice that you won't be able to see the whole image. That is ok.

iii. Next, click the button that says "HTML", right next to the "Compose" button.

iv. Copy the code right after

<img border="0" src="

then stop right before the closing quotation marks as shown below:

Do not include the quotation marks. This code is the direct link for the image. Notice that it is a web address (URL). I will be referring to it as the Post/Sidebar Direct Link.

v. Paste this code into a Word or Notepad file and label it the Post/Sidebar Direct Link. We will be using this later.

E. Alright, almost done with our images. Lastly we need to make our Footer image. If you have your header open, this part can be quite simple. Take your header image and remove or hide all of the elements except those rectangles that make up the post/sidebar background. (Make sure that you save this with a different file name so that you don't erase your header.) Then, flip your canvas or those images so that the rectangles are upside down as shown below:

I cropped this image slightly so that it was much shorter. If you would like a video tutorial for this, Carolynn at Makin' Cute Blogs has a tutorial below that shows you how to do this in Pixlr.

How to Design a Seamless Border Blog Header, Post Background Section and Footer using Pixlr.com

Once your footer is finished, you will need to save this as a png.

Finally, upload your footer to the web using a site like Photobucket or using Blogger. (Same tutorial as in Step D.)

**4. CHANGE YOUR BLOG TEMPLATE TO THE WHITE SIMPLE TEMPLATE**

This tutorial is based off of the Blogger Simple template. There are 7 Simple Templates. Choose the last one, the one that is all white.

To choose this template, choose Template from the drop-down menu on your Blogger Dashboard. On this page you will several templates listed at the bottom. Find the last Simple template and place your cursor over the image. You should see the words "Apply to Blog / Customize". Click "Apply to Blog".

If you uploaded the background for your blog through the Blogger Template Designer, you can skip the next steps (A-D)

For those of you that did not upload your background through the Blogger Template Designer, you will need to make a few adjustments to the white Simple Template. On the Template page, click the orange button that says "Customize". This will take you to the Template Designer. Do the following to customize this template:

A. Click "Advanced" from the vertical list on the left side of the screen (in the gray area).
B. Click "Backgrounds" from the second vertical list.
C. Under the words "Outer Background" you will see a white box with a downward arrow. Click this arrow and then check the box next to "Transparent".
D. Do the same thing for the "Main Background".

The Outer Background is a rectangular area covering the entire top portion of your blog from left to right. If you don't remove this background then there will be a white rectangle sitting on top of your custom background. (This is not true if you upload your background through Blogger's Template Designer.)

The Main Background is the background of your posts and sidebars. If you want a custom post/sidebar background as shown in Step #3 you will need to remove this background. Otherwise you will see white on top of your custom post/sidebar background. (This is not true if you upload your background through Blogger's Template Designer.)

5. ALTER THE HTML/CSS

Now it is time to add to and alter the HTML/CSS of your template to fit each of these design elements.

A. First, we are going to add some CSS:

i. Go to the Template page and click "Customize" so that you are in the Template Designer.
ii. Click "Advanced" from the menu on the left and then scroll down in the second menu until you see "Add CSS".
iii. Add the following code into the box:

.header {

width: 1040px;

}

.content-inner {

background: url('POST/SIDEBAR BACKGROUND DIRECT LINK HERE') repeat-y;

background-color:transparent;
background-position: 7px;

padding-bottom:10px;

padding-left:40px;

padding-right:40px;

padding-top:10px;

width: 960px;

}

.footer-inner {

background: url('POST/SIDEBAR BACKGROUND DIRECT LINK HERE') repeat-y;

background-position: 7px bottom;

width: 960px;

}

.footer-outer {

background: url('FOOTER IMAGE DIRECT LINK HERE');

background-repeat: no-repeat;

background-position: 0px bottom;

border: 0px;

padding-bottom:160px;

width: 1040px;

}

B. Now we are going to alter the HTML.
i. Go to the Template page and click "Edit HTML". (You may want to backup your blog again before editing the HTML, just to be safe.)
ii. The first change is to move the HTML for the Header outside of the "content-inner" section of the blog. This will set the header above the main portion of the blog and allow it to have a transparent background. To do this:

Find the HTML that starts with <header> and ends with </header>. (Use Ctrl-F to find this section.)
Cut this section and move it from here (right below <div class='content-inner'>:

To right below <div class='content-outer'> (Use Ctrl-F to find this section.):

iii. Now we are going to move the Footer section outside of the main body of the blog, just like we did the Header.

Find the HTML that starts with <footer> and ends with </footer>. (Use Ctrl-F to find this section.)
Cut this section and move it from here

To right below

</div>

This placed the footer section outside of the main section and allowed it to have a transparent background.

6. MAKE A FEW ADJUSTMENTS

After entering the code, you may find that your design elements do not line up as well as you would like. For example, when I first entered my code (which I found from Makin' Cute Blogs), the header, the "content-inner", "footer-inner" and "footer-outer were not lined up as shown below:

To help you know how to make your own adjustments, I will go through the CSS code from the beginning of Step 5 and explain what the different parts mean.

.header {

width: 1040px;

}

Alter this width to match the width of your header image.

.content-inner {

background: url('POST/SIDEBAR BACKGROUND DIRECT LINK HERE') repeat-y;

The DIRECT LINK is the URL/code that you copied from Photobucket or Blogger in Step 3. The code "repeat-y", repeats the post/sidebar background up and down (along the y-axis). If you forget this part it may still repeat, but it may also repeat left to right (along the x-axis).

background-color:transparent;
background-position: 7px;

If the post/sidebar background does not line up with your header, adjust the background-position. To move it to the left, choose numbers smaller than 7. You can enter 0 and negative numbers if you need to move it that far to the left. To move this background to the right, choose numbers larger than 7.

padding-bottom:10px;

The padding-bottom creates more blank space below your posts/sidebar and the footer of your blog. The post/sidebar background will fill this space. For more space, increase this number. For less space, decrease this number.

padding-left:40px;

The padding-left is important if you find that your text is too close to the left border of your post/sidebar background. Increase this number to move your text more to the right. Decrease it to move it to the left.

padding-right:40px;

You can play around with the padding-right to see what it does. It should adjust the padding on the right, but I found that increasing this number did not make any change for me. Decreasing this number will cause your post/sidebar background to be cut-off on the right.

padding-top:10px;

The padding-top will increase or decrease the space between your header and your posts/sidebar. The post/sidebar background will fill this space. If you have a navigation bar using blogger's Tabs, this space will be above that navigation bar. To increase the space, increase this number. To decrease the space, decrease this number.

width: 960px;

}

The width of the post/sidebar background should be about 80 pixels less than the width of your header but if it does not look right, you can adjust this up or down until it looks right.

.footer-inner {

background: url('POST/SIDEBAR BACKGROUND DIRECT LINK HERE') repeat-y;

Enter the same DIRECT LINK that you entered for "content-inner". The code "repeat-y", repeats the post/sidebar background up and down (along the y-axis). If you forget this part it may still repeat, but it may also repeat left to right (along the x-axis).

background-position: 7px bottom;

This background position places the background at the bottom of the "footer-inner" section of your blog. The "footer-inner" is the section of your footer where you can add text or gadgets.

The 7px places the background 7pixels to the right of this section's left border. If you need to adjust this, smaller numbers will move it to the left and larger numbers will move it to the right.

width: 960px;

}

This is the same as the width for the "content-inner".

.footer-outer {

The "footer-outer" is just the image that you created for the footer. There are no gadgets or text on that sit on top of this image.

background: url('FOOTER IMAGE DIRECT LINK HERE');

The footer DIRECT LINK is the URL or Direct Link that you copied from Photobucket or Blogger in step 3.

background-repeat: no-repeat;

We don't want this footer image to repeat, so leave this as is.

background-position: 0px bottom;

This background position places the footer background at the bottom of the "footer-outer" section and closer to the bottom of the browser window. You can remove it or choose "center". Do not use "top" or it may overlap the image above it.

The 0px places the background right on the left border of the "footer-outer" section. If you need to adjust this, negative numbers will move it to the left and positive numbers will move it to the right.

border: 0px;

padding-bottom:160px;

If your "footer-inner" and "footer-outer sections are overlapping, you need to increase the "padding-bottom". If they are too far apart, you need to decrease this number.

width: 1040px;

}

This width should match the width of your header image.

Every blog is different so I recommend previewing your changes in the Blogger Template Designer before you save your changes and click "Apply to Blog".

If your blog is looking good, it might be a good idea to backup your template again. You can save it under a new name to differentiate between your original template and this new updated one.

7. ADD EXTRA DESIGNS

The final step in creating your own custom template is adding extra design features such as a post icon, post divider, sidebar titles, blog button etc. There are several tutorials for these shown below:

How to Make Your Own Post Icon

How to Make Your Own Post Divider

How to Make Your Own Sidebar Titles

How to Make Your Own Blog Button

Also, be sure to customize the fonts and colors on your blog in the Blogger Template Designer. Go to Advanced and then click on any of the options and use the fonts and colors that look best on your blog!

Here is a final view of my custom template:

Thanks for using this tutorial. Leave a comment with a link to your blog. I'd love to see your custom designs!

The CSS/HTML portion of this tutorial was used with permission from Carolynn at Makin' Cute Blogs from her tutorial "How to Create a Seamless Border around your Blogger Blog Layout & have a transparent background behind your Header"

An Update

noreply@blogger.com (Dani) — Tue, 15 Jan 2013 06:45:00 +0000

I have gotten very behind on responding to comments but I wanted to let you know that I have responded to all those that posted questions, at least I hope I got them all! If I missed yours, please let me know. I have been very busy lately but I am working on a tutorial for How to Make Your Own Template. It's a long one but it should be good! Stay posted in the meantime!

Christmas Dream Template

noreply@blogger.com (Dani) — Fri, 07 Dec 2012 06:04: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

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 Heavenly Christmas

Photoshop Basic for Bloggers

noreply@blogger.com (Dani) — Thu, 01 Nov 2012 21:59:00 +0000

When I was in high school, I took my first Graphic Design class. It was there that I was introduced to Photoshop and I fell in LOVE with it! Since then I have tried a lot of other design software and though many of them are good, they just don't compare in my eyes.

As bloggers, it is important to have great designs for your blog layout as well as for the images you post on your blog. Thus having software that can give you those great designs is so important! I know that Photoshop can be pricey (there is a really expensive version and a cheaper version). So if you are just starting out, there are a lot of decent options for graphic design software other than Photoshop and many of them free. But if you really want to move forward with your blog, I recommend starting with Photoshop Elements.

Now many of you may be intimidated by this program. If you have never used it before it really can be so confusing! But I have found a site that I wanted to share with everyone that offers Photoshop Basics for Bloggers. Suzie at The Accent Piece has put together 31 days days of Photoshop Basics for Bloggers. It is very basic, so if you are one of the many that are too scared to try it, check out her site!

The Accent Piece

How many of you use Photoshop?
What other software do you use?
What's your favorite?
What software do you prefer that I use in my tutorials?

My Memories Giveaway Winner

noreply@blogger.com (Dani) — Wed, 17 Oct 2012 23:30:00 +0000

Congratulations to KAREN at Crafty Friends!

You are the winner of a free copy of the My Memories Software Giveaway!

Please email me at blogdesignsbydani[at]gmail[dot]com to claim your prize!

Here is the random.org number generator that chose Karen:

Didn't win the giveaway? Don't worry, you can still purchase the software at a discounted price. If you use my discount code below, you can receive $10 off the retail price of $39.97. So you only pay $29.97. Also, you get $10 to use in their store to buy scrapbook kits, templates or anything you find there!

Here's the code:

STMMMS20877

This code never expires and is posted in my sidebar.

So head over to My Memories and get started with your first digital scrapbook!

(To see my review of the software, read my post HERE.)

Thanks to everyone that entered the giveaway!

My Memories Scrapbooking Software Giveaway!

noreply@blogger.com (Dani) — Tue, 09 Oct 2012 09:00:00 +0000

Giveaway Closed

~~I am excited to announce an amazing Giveaway today!!~~
(and an awesome discount at the bottom of this post!)

Update: I am extending this giveaway to end on Tuesday, October 16, 2012 at midnight PST. Enter today!

Are any of you digital scrapbookers? Are any of you regular scrapbookers trying to make the switch to digital but don't know how? Or do you just have tons of pictures filling up your computer and you have no idea what to do with them? Well this giveaway is for you!

Have you heard of the My Memories Suite before? It is the top rated digital scrapbooking software and it makes scrapbooking so easy! I've been given one copy of the software to try out for myself and one copy to give away to a lucky reader! Before I give you the giveaway details, let me tell you about the software and show you what it can do.

When I first downloaded the software, I was worried that I was going to have to purchase kits from their store in order to make my scrapbooks. I already have tons of digital scrapbooking kits for my blog designs and would hate to have to buy them all over again. Luckily, I was wrong. It is very easy to use kits you already own to make your layouts.

I am currently working on a scrapbook of my son's first year. Here is page of his first haircut that I made in My Memories:

Excuse the blurry faces. I like to keep my baby's face private. :)
I used a kit from Katie Castillo at Just So Scrappy called "Boys Will Be Boys" to make this page.

I didn't use a template but it was still fairly easy to place the pictures and images wherever I chose. The design I did above was simple as far as figuring out how to use the program, but it did take me some time to put all of the elements together. If you are interested in putting together "Quick Pages", My Memories makes it really easy. Here is an example of a quick page I made:

(Image removed)

To make a quick page in My Memories, I simply added the photos and placed them behind the quick page image. It was SO easy. The only downside to the Quick Pages is that they are not very customizable. The photos have to fit in the frames provided. You can't resize anything.

Fortunately, My Memories has another feature that does is easy and customizable. By purchasing Templates from the My Memories store, you can create pages quickly and then customize them by moving around photo frames, changing the size and shape of those frames, and much more. The video below gives a basic overview of My Memories and shows how these template pages can be customized.

Now, My Memories is a great digital scrapbooking software program, but do not expect it to be a powerful photo/graphics editing program. It is built for scrapbooking first and editing second. But for $39.97 USD (retail price), this software really can't be beat. It does have some good photo effects like Crop, Red Eye, Sepia, Black and White, Sharpen, Blur and several more. One feature I really like is how easy it is to cut photos into the shape of your choice with just the click of a button.

Once you create your scrapbook albums, it is fairly easy to get them printed. You can either print them through My Memories or you can save the images as jpg's and upload them to the site where you would like to get them printed.If you don't want to print your albums you can keep them digital and view them as slideshows on your blog, your ipod, your computer or wherever. You can even add multimedia such as music and videos to your albums and burn the album with the embedded media onto a DVD.

For any software, the biggest test for me is how versatile it is. Can you do more than just scrapbooks with this software? The answer is yes! This week I needed to make an invitation for a church activity. I was able to put together a simple invitation quickly by making a custom project. Here is the invitation I made:

This invitation was made using Just So Scrappy's kit "I Toadally Love You".

Another project that I made with My Memories was a Calendar. There is a great calendar feature that places the dates for the month or year that you choose and allows you to customize it with your own photos or design elements. Here is my calendar for October:

This calendar was made using Just So Scrappy's kit "Toil and Trouble".

My final test for My Memories was whether or not I could create blog design elements in the program. I found that I could create backgrounds like the one below:

This background was made using Just So Scrappy's kit "Abby".

This background is made following instructions similar to my tutorial on How to Make Your Own Blog Background with the Minima Template. However, I was not able to make a background using my simplified instructions on How to Make Your Own Blog Background with the Blogger Simple Template.

Update: Since I posted this, I have tried to upload the background image above to a blog and have not had success. The header image below worked great, but I cannot guarantee that the other design elements will work when created in My Memories.

I was unable to make the simplified backgrounds because the documents in My Memories have to be at least 200pixels wide x 500pixels high. I also had a hard time cropping the image precisely so that it would repeat the pattern smoothly on my blog.

My Memories will not save images as transparent png files so the final images will have to be rectangular. Using this software I was able to make a nice rectangular header shown below:

This header was made using Just So Scrappy's kit "Abby".
You can follow instructions similar to my tutorial on How to Make Your Own Header to make a header similar to this.

So what do you think? Is the My Memories Suite Software something that you could use to preserve your memories or to create your own miscellaneous designs? I think it's totally worth it! And one lucky reader will get a free copy of the software!

Here's how you can enter to win your own free copy:

You may comment once on this post for each of the items below.

Each comment on this post is an entry for the giveaway.

1. Visit My Memories and find your favorite digital paper pack, layout or anything else you like. Then leave a comment on this post saying which kit, layout, etc. you found and what project you would make with it.
2. Follow my blog and leave a comment on this post saying that you are a follower.
3. Follow the My Memories blog and leave a comment on this post saying that you are a follower.

This giveaway starts Tuesday, October 9, 2012 and ends Tuesday, October 16, 2012 at midnight PST. The winner will be chosen randomly using random.org and will be announced the following Wednesday, October 17, 2012.

Please be sure to check back to see if you won. If the winner does not respond within 24 hours, a new winner will be chosen.

This software is available worldwide. However, it is intended for English-language computers. Technical support is English-only.

And for anyone that is interested in purchasing the software, I have a discount for you!

If you purchase the My Memories Suite using the following discount code, you can receive a $10 discount on your software purchase (retail price is $39.97 USD before the discount). That means that for just under $30 USD, you can create beautiful digital scrapbooks and other digital designs!

In addition to this discount, you will receive a $10 coupon for the My Memories.com store, giving you a total savings of $20!

To use this discount, simply go to My Memories.com and enter the following discount code:

STMMMS20877

Out with the Old and in with the New

noreply@blogger.com (Dani) — Mon, 24 Sep 2012 23:15:00 +0000

Most of you have been using Blogger's new interface for a while now and are hopefully getting used to the great new features. There are tons of new features to help you customize your blog without having to touch the html/css. However, there was one feature that I really loved about the old interface. The Minima template. This was a basic template that was so easy to alter to add custom design elements to your blog. For a while, even if you were using the new interface, you could switch back to the old interface, add the Minima template to your blog, and then switch back. Unfortunately, Blogger has finally gotten rid of the old interface. The option to switch back is no longer available.

You may remember that my Free Backgrounds required the use of the Minima template. Don't worry, I have updated my instructions to help you add my Free Backgrounds using the newer Blogger templates. You can read these instructions here:

How to Add a Free Background

If you still want to use the Minima template, you can use either of my 2 modified versions. Below are links to a Wide 2-Column template and a 3-Column template. You can use the 3-Column background code for either of these templates.

Wide 2-Column Template

3-Column Template

With the new Blogger templates, you may want a few of these tutorials as well:

How to Center Your Header Image

and

How to Center Your Header Text

Remember, to use any of my designs you must link back to my blog with my button in your sidebar (unless my "designs by dani" tag shows up on your Free Background). Here is a link to my button with instructions:

How to Add My Blog Button

Please let me know if you have any questions about my tutorials.

Thanks for visiting my blog and using my designs!!

Dani

Updated Templates

noreply@blogger.com (Dani) — Wed, 19 Sep 2012 21:47:00 +0000

Some of you may have noticed that my free templates have been acting weird. The Blogger navigation bar that you see at the top (with the links to write a new post or edit the design of your blog) suddenly jumped to the sidebar. Blogger may have changed a few settings causing the template to malfunction. Fortunately, I figured out how to fix it by just adding a few extra lines of code to the template. So, if you currently have one of my templates, please go back to my Free Templates, find the html code and copy/paste the template again. If you have forgotten how, please read through the instructions and ALWAYS backup your old template before adding a new one.

Free Templates

Thanks!

Dani

Keep It Simple

noreply@blogger.com (Dani) — Tue, 18 Sep 2012 16:57:00 +0000

I recently received an email from Longhornleads.com sharing with me a great article titled, 10 Reasons Your Site Needs to be Obvious for Users. I started this blog with the hopes of helping bloggers to create blogs that were more pleasing to the eye. Since then I have discovered many ways to make a blog really stand out and to make it easier for readers to find the information they are looking for. Read through Longhornleads' article to learn how to keep it simple and attract more readers to your blog. Then read through my Design Secrets to find the tutorials you need to help attract more readers.

Back Home

noreply@blogger.com (Dani) — Wed, 05 Sep 2012 02:01:00 +0000

If you've been following my blog you'll know that I had back surgery in May. My recovery has taken much longer than I had expected. With a very active toddler to take care of, I decided it was best if I go stay with my parents for a while to get help until I could handle taking care of him on my own. So for the past 6 weeks I have been away from home and away from my computer (and Photoshop). I was able to post a few tutorials, but not my best ones. Now that I am home I will be able to post better tutorials and some template designs. I have a lot to get caught up on in my personal life since I have been gone for so long, but I will be sure to post again soon. Let me know if you have any requests. Also, if you have emailed me or commented and I have not responded, feel free to send me another email. I may have missed it.

Thanks,
Dani

Navigation Bar - Using Pages

noreply@blogger.com (Dani) — Tue, 14 Aug 2012 18:52:00 +0000

A good blog needs to be easy to navigate. If your readers can't search through your posts quickly and easily to find what interests them, they probably won't be looking at your blog for long. There are so many different ways to make a navigation bar but I am going to explain very basic ones for now. Navigation bars can range from a very basic list of links to complicated drop-down menus. Some blogs even have their navigation bars creatively embedded in their header design.

I can definitely help you make a basic navigation bar, but I still don't know how to make the really creative types of navigation bars. I created my navigation bar a few years ago and I don't remember how I did it well enough to explain it. I do remember that it took me forever to figure out how to do the drop-down menus. I encountered a million glitches and eventually figured it out, even though the spacing in some browsers keeps it from lining up as well as I would like. However, if I have time after I finish this basic nav bar, I will look into my drop-down menu and try to figure out how I put it all together.

So let's get started on a basic navigation bar!

The easiest way to create a navigation bar and be able to customize it is to use Blogger's Pages. So let's begin by creating your own Pages.

1. To set-up your Pages, go to your Blogger Dashboard and choose "Pages" from the drop down menu:

You will then see this page:

The Pages gadget will automatically create a "Home" page which directs readers back to the main page of your blog.

2. To create new pages, simply click "New Page". You will then be given 2 options: "Blank Page" and "Web Address".

"Blank Page" allows you to create a separate page on your blog apart from your blog posts. There is no date attached to these pages and readers can't leave comments. On my blog, I have used blank pages to create a list of "Frequently Asked Questions", an "About Me" page and other pages that are set apart from my posts.

"Web Address" allows you to create a link to any website, within your blog or outside your blog. I use this on my blog but I don't use it for outside links. For example, if you click on "Free Designs" in my navigation bar, you will see all of my posts that include my free designs: backgrounds, template and headers. You will not see any of my tutorials or other posts. At the end of this post I have included instructions on how to get the web address that displays a group of posts from your blog.

For this tutorial, I am going to create a page for "Frequently Asked Questions" and "About Me" and then a link to my blog, Blog Designs by Dani, and a link to a specific set of posts on Blog Designs by Dani, my free backgrounds.

3. To create a "New Page", choose "Blank Page" after clicking "New Page". You will be directed to the following screen where you can create you page.

I entered the title for my page where you see "Frequently Asked Questions". I then typed my FAQ's in the page section. To make this page useful, I need to link each question to a post on my blog that explains that

question.

To add a link to a section of text, highlight the text that you want to be linked and then click "Link". A window will pop-up as you see below:

In the box next to "Web address", enter the web address that you want that text to link to. I also click "Open this link in a new window" so that readers don't have to leave the FAQ page to read each tutorial. However, this is optional. Once you are done, click "OK".

Now, if you do not know how to find the web address for a specific post, do the following. Go to your blog and find the post that you want to link to. Click on the title of that specific post. You will then be directed to the specific web page for that blog post. In fact, each post has its own web address. Once you are on that web page for your blog post, find the web address at the top of your browser. Copy the web address by highlighting it and then copying it (Ctrl+C or right click "Copy"). Then in the pop-up window that you see in the image above, paste the web address (Ctrl+V or right click "Paste"). (Macs have different commands for copy and paste.) I recommend clicking "Test this link" to make sure that you copied the correct web address.

4. Once you finish this page, click "Publish". You will then be directed to this screen:

At this point, you can add more pages or links. You can also rearrange the order of these pages and links. To rearrange them, hold your mouse over the light blue rectangle on the left side of each page/link. When your cursor turns into cross arrows, hold down your mouse and move it over the top of any of the boxes above or below. If you are happy with your arrangement, click "Save Arrangement".

5. To add a link instead of a Page, click "New page" and choose "Web Address". Enter a title that describes that link and the web address to that link and then click Save as shown below:

6. I have gone ahead and added the rest of my pages and links. You can rearrange the order however you like as explained in step 4. I now want to tell Blogger to place my pages/links at the top of my blog so that it will act like a navigation bar. To do this, click the button next to "Show page as" as shown below:

From the drop-down menu, choose "Top tabs" (unless you want your navigation bar on your sidebar). By placing it in the top, you can customize the look of it in the Template Designer. Be sure to click "Save Arrangement" before moving on.

7. Now that our navigation bar has been created, we need to customize the look of it. To do this, click "Template" from the menu on the left. You should see the following screen:

Click "Customize" to go to the Template Designer.

8. In the Template Designer, click "Advanced" and then "Tabs Text" as shown below:

Adjust the font, font size and style, text color and selected color to match your blog. (Those red lines will not show up on your blog.) "Selected Color" is the color of the text when the reader is on that specific page.

My changes are shown below. I adjusted the size of the text so that my navigation bar covered the width of my blog.

9. Next click "Tabs Background" to adjust the background color of each link. You can adjust the backgrounds however you choose, but I am going to show you how to remove the background colors and borders so that all you see is the text. From the color menu for the Background Color and Selected Color, choose "Transparent" as you see below:

10. Now to remove those border lines (or change the color of them if you want to keep them), scroll down and choose "Accents". Where you see "Tabs Border Color", selected "Transparent" as you see below:

If you like what you see, click "Apply to blog" and then "View Blog". Now you have a basic navigation bar!

Be sure to test out your links once you view your blog.

**At the beginning of this post, I said I would explain how to find the web address for a group of posts on your blog. Here is a short tutorial on this:

A. To be able to link to a group of posts that are all in a specific category, you need to have labels set up on your blog. Labels are set up when you create a new post. On the page where you edit your posts, there is a button on the right that says, "Labels". Click this. (If your posts are already created and you want to add labels, go to the "Posts" page from your Dashboard and click "Edit" for the particular post you want to add a label to.)

B. Now, enter the label you would like to give your post. For my blog, I have a lot of labels, but a few of my main ones are "Free Designs", "Design Secrets" and "FAQ's". So for example, on each post with a tutorial, I have added the label, "Design Secrets". Be sure to separate labels with commas. When you first enter labels, the screen will look like this:

If you already have labels set up, you can just click on the ones that apply to your post or add a new one as shown below:

C. Once your labels are set-up, go back to your blog and click on one of your labels. You can do this by clicking the label at the bottom of a blog post or, if you have the "Labels" gadget added to your sidebar, you can click on a specific label from your sidebar.

You should then see all of your posts that have that label. On my blog, if I click the label "Design Secrets", my blog will show all of my tutorials. To get the web address that corresponds to this label, go to the top of your browser window and highlight the web address. You will paste this web address in step 5 above.

If you have any questions, feel free to leave a comment. I'd love to see your navigation bars when you are done!

Blogs on Mobile Devices

noreply@blogger.com (Dani) — Wed, 25 Jul 2012 04:20:00 +0000

Have you ever looked at your blog or other Blogger blogs from a mobile device like a phone or a tablet? You may be surprised to see that the background doesn't always look right. Let me first tell you what is wrong and then show you what you can do about it.

If you use any of my free backgrounds or other similar backgrounds from other sites you will notice a problem with the size and position of that background. Below is a rough sketch of what you might see when you view a blog on a phone:

On a mobile device, the background image is shrunk down to fit the size of the screen. But because a phone is much longer than it is wide, the image does not fill the screen. You could turn your phone on its side but it still does not fit the screen right. Also, the background image stays fixed at one position on the screen. It may be at the top or centered in the middle as you see above. Either way, this means that as you scroll, the background image will not move with your blog.

So how can you work around this problem and still have a great design on your blog? Let me tell you...

If you don't mind losing the background as well as other designs (header, sidebars, etc.) on your blog just on mobile devices, then you can easily change the settings through Blogger. Here's how:

1. From your Blogger Dashboard, click "Template" from the drop-down menu.
2. You should see the following:

There is an image below the word "Mobile" that shows you a preview of your blog as seen on a mobile device. (If you see the word "Disabled", then your blog will show the same design template on your mobile device as it shows on a regular computer. In other words, you may have the problem I described above.)

Click on the button below the "Mobile" image. (The button has a circle with spokes.)

3. You should see the following screen pop-up:

If you want to have a basic template that is easier to use on mobile devices, then click "Yes. Show mobile template on mobile devices." (Click this if you have the problem I discussed at the top of this post.)

4. Click "Preview" to see what your blog will look like on a mobile device. You can change the template by clicking the arrow next to "Default". If you are happy with what you see, click "Save".

If you do not want a mobile template and want the same template that you would see on a computer to show up on your mobile device, then click "No. Show desktop template on mobile devices."

If you choose to keep the same template as on a computer, I highly recommend that you do not use free backgrounds as described above.

Instead, follow one of the tutorials below to create your own background:

How to Make Your Own Background (using the Blogger Mimima template)

How to Make Your Own Background (using the blogger Simple template)

These tutorials create background images that are repeated all over the background of your blog, thus allowing your design to fill the whole screen regardless of the size.

Update to Background Tutorial

noreply@blogger.com (Dani) — Sat, 21 Jul 2012 02:36:00 +0000

I have noticed that a lot of the free backgrounds and more decorative backgrounds can take a long time for some computers to load. In fact, I have heard friends complain that the images on some blogs take so long to load that their slow computers just can't handle it. To help with this, I have updated my tutorial on How to Make Your Own Background using the Minima template. It is a simpler background that loads quickly on computers but still looks great. In some ways it even looks more professional than the more decorative designs.

Check it out here:

How to Make Your Own Background

An Update and Tutorial Requests

noreply@blogger.com (Dani) — Mon, 09 Jul 2012 17:43:00 +0000

So it has been a month since I last posted an update and I am doing much better now. I am not fully recovered but I am doing significantly better. I have gone from lying in bed all day to sitting most of the day...still can't do much but I can sit at the computer for longer periods of time.

I still am not allowed to bend or lift more than 10 pounds and won't be able to for a little while longer. Since my toddler weighs a lot more than 10 pounds I am not able to take care of him on my own. To get the help I need, I am going to be staying with my parents for a while. I won't have access to my own computer there and won't have Photoshop to make any more designs then.

This means that anyone interested in Custom Designs will have to wait. You can email me for time frames of when I will be available again. Because of my surgery, I have gotten very behind on taking care of my house and many other personal things. So even if I am feeling up to designing again, it may take me a little longer to get caught up and be ready to design again.

However, I may still be able to do a few tutorials. I will even show you how to create designs using Pixlr or any other design software I find on my parents' computer. I want to do tutorials, but I really want to do the ones that matter most to you. I have compiled a list of questions readers have asked or tutorials that have been requested and I want to know which ones you want to see first. Also, if you have another tutorial request, please leave me a comment. (My comments are moderated, so they don't show up right away. But don't worry, I'll publish all comment requests. I just like to remove all junk and spam comments myself.) Here's the list in no particular order:

1. How to create a background around the middle posting section (like the white, orange and green background around my middle section)
2. How to change the title of your blog to not all be upper case
3. How to get your header to fit your blog better, how to center it, etc.
4. How to get your designs to look good on mobile devices (Have you ever looked at your blog on a phone or tablet? It doesn't always look as good.)
5. How to make your own social icons
6. How to add a signature to all of your posts using Blogger's new templates
7. How to make a wrap-around design like my Ultimate Design (This tutorial is complicated and will require a lot of time for me, but let me know if you are interested.)

What else do you want to learn? Don't be afraid to ask!

~Dani