Blog Designs by Dani

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

Doing Well

noreply@blogger.com (Dani) — Fri, 08 Jun 2012 02:32:00 +0000

Hi Everyone,

I wanted to thank all of you for your well wishes! I had major back surgery 2 weeks ago and spent over a week in the hospital recovering. The surgery went well, but I was pretty sick while recovering in the hospital. I am home now getting lots of rest and doing much better. I finally was able to sit at a computer today and check emails. I can't sit at the computer long enough to respond to your comments and emails, but please know that I will get to them eventually. I may need a month or 2 to recover completely.

Thank you for your continued support. I apologize that some things have not been working, my templates in particular. Please be patient with me. I will be sure to reply as I continue to improve in health.

~Dani

Time Away

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

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

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

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

Thanks to all of you for supporting my blog!

~Dani

How to Add a Post Icon (Simple Template)

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

Customizing the Simple Template - Part 4

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

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

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

Let's get started!

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

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

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

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

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

Adding the Icon to Your Blog

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

If you choose to use Photobucket, you need to login to your account and click the green Upload button. Click the green button "Select photos and videos" and Browse to find your png file. When the image is uploaded, click the small box next to the file name so that there is a check mark. Then click "Choose action" and select "Generate link codes for selected".

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

(If you accidentally saved the image before getting the link code and you are now in your album, hover your mouse over your image until a list of options appears below the image. Click the code next to "Direct Link". Clicking this automatically copies the link for you.)

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

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

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

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

h3.post-title {

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

height: 45px;

padding-left: 50px;

padding-top: 15px;

margin-bottom: -10px;

}

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

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

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

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

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

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

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

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

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

Customizing the Simple Template - Part 3

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

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

Let's get started!

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

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

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

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

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

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

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

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

3. In this box, enter the following code:

.post-footer {

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

height: 215px;

margin: 20px 0px -50px;

padding: 5px 10px;

}

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

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

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

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

The margin is a little more tricky:

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

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

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

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

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

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

Click here to read Part 4 of Customizing the Simple Template: Creating Your Own Post Icon.

How to Make Your Own Background (Simple Template)

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

Customizing the Simple Template - Part 2

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

Let's get started with the background:

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

How to Make Your Own Background (Detailed Design)

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

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

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

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

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

**This tutorial is for the Blogger Simple template. If you would like to make a similar style of background for the Blogger Minima template, read HERE.

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

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

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

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

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

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

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

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

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

On the next screen, click "Select Photos and Videos".

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

The following screen should pop-up:

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

(If you accidentally saved the image before getting the link code and you are now in your album, hover your mouse over your image until you see the option "Share". Click "Share" and then click "Get link code" from the pop-up window. Click the "Direct link" code until it is all highlighted and then copy it by choosing Edit, Copy or by pressing Ctrl-C on your keyboard.)

6. Alright, now it is time to put the code into your blog. But here's the best part. You don't have to go into "Edit HTML". No more worrying about ruining your blog.

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

Now enter the following code into the box:

.body-fauxcolumn-outer {

background: url(Your Direct Link) fixed;

}

.body-fauxcolumn-outer div {

background: none;

}

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

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

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

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

Click here to read Part 3 of Customizing the Simple Template: Creating Your Own Post Divider.

Customizing the Blogger Simple Template, Part 1

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

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

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

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

Ready to get started? Here we go!

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

How to back-up my template

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Your blog is now ready for customizations.

Click here to read Part 2 of Customizing the Simple Template: Creating a Custom Background.