Navigation Bar - Using Pages

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!

Blogs on Mobile Devices

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

Update to Background Tutorial

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

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

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

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)

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!

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

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!

How to Make Your Own Background (Simple Template)

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:

Customizing the Blogger Simple Template, Part 1

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!