First, before anything, make sure that you have a blog, a login, and a password...Ok.

The best thing to do is to just design your blog and don't worry about the code yet. If you worry about code at this point, it will just slow down your creative process and in the end, lower the quality of your design.

In this example, I am going to take the Tendenci blog. Our main goal was to design the blog to match the branding of www.tendenci.com:




After the design is complete, plan out the areas of your build and export important pieces into a folder on your computer.
In my case:
1. The main background repeating along the x-axis at the top
2. The header
3. The content background (left column - white, right column - grey)
4. The new logo



Once you have that set and exported out, just go ahead and upload the images to your blog.
Login, and go to the files section of your blog which will be located in the control panel. Find the folder that you want your files in or create one and upload your files on the right like below. (You can upload multiple files at once).

After you have done that, locate your styles sheet.
** tip: When you create your blog, it will have styles that attach to the template that you choose. You can open this to edit and create your blog design. It is probably best to choose a template that closely matches the formatting of your design first and apply that. Then edit.

After you locate your styles sheet, click it and save the styles sheet to a folder on your computer.




You can either open and edit your styles in Notepad, or go the easy route and open it up in Dreamweaver. You can then go to the blog, view the source code of the page, copy it, and paste it onto a page and save it down in the same folder as the styles sheet.

Attach the styles sheet to your new page and you will start making your changes from here.




At first, you might  be a little overwhelmed when you see the amount of styles but it's really not too bad - you will only edit a small amount. Find the styles that are doing major things and start with those.
** tip: the best thing to do is locate the images first and edit those. In Tendenci's case, I only edited:

body
    {margin: 0; color: #000000; background: #fff; font-family: Geneva, Arial, sans-serif;
    background-image: url("http://blog.tendenci.com/images/bg_main.jpg");
    background-repeat:repeat-x;
    font-weight: normal; font-size: small; line-height: 150%;}

#container-inner
    {position: static; border: 0;
     background-image: url("http://blog.tendenci.com/images/bg_content.jpg");}

#banner
    { height: 130px;
    background-image: url("http://blog.tendenci.com/images/tendenci_blog_head.jpg");
    background-repeat: no-repeat; text-align: left;}

a
    { color: #7d1b1b; text-decoration: underline; }

Towards the bottom of your styles, you will notice lots of notes that look like this:

/* moblog1 tweaks */
/* moblog2 tweaks */
/* timeline tweaks */
/* one-column tweaks */
/* two-column-left tweaks */
/* two-column-right tweaks */
/* three-column tweaks */
/* three-column-right tweaks */

These are to edit a blog depending on which template you started with. So be excited, yuo only need to edit one section. In Tendenci's case, it was /* two-column-right tweaks */.

Within this section here are my edits. I only had to change the background image, width of the left and right columns, and the padding:

.layout-two-column-right #container {
    width: 700px;
    background-image: url("http://blog.tendenci.com/images/bg_content.jpg");}

.layout-two-column-right #alpha
    {width: 500px;}

.layout-two-column-right #alpha-inner{
    border: 0; padding: 15px 14px 15px 14px;}

.layout-two-column-right #beta {
    width: 200px;}

.layout-two-column-right #beta-inner {
    border: 0; padding: 15px 14px 15px 14px;}

Since you have pointed your new page to the style sheet, you can basically see what your layout will look like before you upload it to you blog. This is the main advantage to using Dreamweaver to make your edits.

At this point, you are done and ready to import your new styles sheet. Go back to your control panel and in the files section, go to the folder that holds your styles sheet. Click the browse button in the upload files section and locate your style sheet:



After you hit upload, one more message will come up asking to overwrite your file. Make sure that you have the original copied down first, and click 'replace older file'.



You might have to clear your cache first, but hit refresh on your blog and your design is implemented.

But wait...there's more. You will also have to edit your about page which acts differently.
Go to the about section of your blog (when editing):




You will see a section that uses an about page template and below that, a custom template section. The recommended part is the default template but if you want to customize even more, go to the bottom section. Since you have the styles sheet in Dreamweaver already, do this:
1. Save your main blog page down as about.htm
2. Copy and paste the styles into your about page using the embedding code:
<style type="text/css">
<!--
    ***styles***
-->
    </style>

3. decide which information will go where and put in Typepads tag code. (below is more information about this. This example uses
<$MTUserBio$>
<$MTUserInterests$>

It will appear like this:




For more information about the Typepad tags, here is a link to a support page.

Once you have everything where you need it, paste all of your code into the space provided by Typepad. It will look like this:




And that is that. You should have a beautifully designed blog all coded by you. congratulations.