Blog Series - Design Basics

posted on: 12.04.2011

Hey New Bloggers,


I hope that my first post helped with making your blog! Now we will go strait into the basics of design. In this segment i will be getting your blog ready to customize to you like! Lets get started!

If you already have a blog and its somewhat designed i suggest you start fresh! So basically you will need to log into your blogger account and click the design button! The design button is on you dashboard in the list of links next to your profile picture and under where it shows your blogs name (If you just made your blog follow these steps as well! EVERYONE wanting a new blog design follow this!!)

You will now want to click "Template Designer" or you may be taken directly to the template designer. This is what i want you to click when your in the template designer -
(click to enlarge | Click the area of the photo without the "share" text)

Basically i want you to click the "Simple Theme" then click the last one in the row that is black and white. Your blog will look PLAIN but this is our fresh and clean palette to add out paint to :) As you can see it will give you a preview below theme settings so you can see what your blog will look like. My blog looks so UGLY right now but we will get it looking better and better as will you.

You will now want to click the "Adjust Widths" button in the left nav links. This is what i mean -
 After you click the "Adjust Widths button you will want to adjust the widths. This is totally up to you but i decided to go with these settings for my blog -
I may adjust them later after i start designing and adding custom elements but its super easy just to come in your template designer and change the width of your blog with a click. When i designed my blog (scrappyhappiness.com) over a year ago this feature was not available so i had to html code mine larger which was a PAIN!

Now you will want to pick a layout. I suggest the layout with 1 post section and 1 right sidebar and 3 footer sections. Like this -
I do not suggest a left sidebar as we read from left to right and we will start at the sidebar and run into an empty area at the right. The only way you can have a left sidebar is if you choose the Body Layout with a left and right sidebar! Its totally up to you but i suggest just 1 Body post section and 1 Right sidebar with 3 footer sections or 1 footer section as shown above.

--------------------------------------------------------------------------------------------

Now you will want to click the "Advanced" button in that left nav menu. This advanced tab will allow you to change fonts and colors.

*** I SUGGEST YOU MAKE A SAMPLE POST! Simply click the "Apply to Blog" button in the top right corner and wait for it to save. Then click return to blogger. Then click "new post" and add a title, a description that is random and a picture! This will help us when we use the advanced setting because we will be able to see the changes below the advanced features like we were able to see the templates preview below the menu. Does this make sense? Anyways just write a post and come back to the "Template Editor" and click advanced again***

Now this part is TOTALLY UP TO YOU! You will be able to pick your own fonts, colors and font sizes. Click each option and change them to your liking. The changes you make will preview below the menu. Here is a sample of what i put for page text!

 You will see previews below which is nice because you don't have to switch back and forth between your blog and this editor to see your changes. Once you have edited all the options (ex. links, blog description, tab text etc.) YOU WILL NOT NEED TO EDIT -
- Backgrounds
- Tab Text
- Tabs Background
- Custom CSS

Now you will have a blog that should look somewhat like this -

 I hope this helped and stay tuned for the next post about blog design where we will be making a header!! Don't forget to leave your blog link below that way we can see what you did!


Thanks so much
Drew

6 comments:

  1. Hey Drew; do you use Photoshop or something to create your images?

    ReplyDelete
  2. yes i use both photoshop elements and photoshop Cs3
    thanks
    Drew

    ReplyDelete
  3. Hi Drew, I have had a blog of my own for a year now but I still struggle with the design so I want to follow along with your design tutorial! Looking forward to finally learning how to keep up my blog! Thanks

    Anitra

    ReplyDelete
  4. Thanks for starting this tutorial.

    ReplyDelete
  5. Thanks for doing this. I'm thinking of redesigning my blog at the beginning of next year. This will help me rebuild it.

    ReplyDelete
  6. Thanks Drew, cant wait for the next lesson.

    ReplyDelete