blog design for dummies. taught by a dummy

i said i was done with my blog tips.

and I am.



but then I did my little makeover.



and I for some reason got it in my head that I CAN DO THIS MYSELF.



stubborn...and dumb.

deadly combo.



so after many late nights trying to figure out what the 'h' i wanted....



i am here to share what I have learned...so instead of 45 hours...you only need to spend oh..24. (give or take)



now...is it really necessary to put a disclaimer..?

okay i will...in case we have any first time readers here.



I DON'T ever know what i'm doing.



and don't look at my blog and judge me. I know if i handed it to the pros it would look a bazillion times better...but i figure i'm going to be blogging until i die...i had better figure it out. (isn't that something to look foward too...me blogging about keeping my depends from riding up my crack)


before I start..if you are reading this to learn...and not just for the witty commentary..and you are in google reader..you might want to come over to the blog. I'm going to be mentioning things on my blog so it would be helpful if you know..you could ACTUALLY see them.
let's begin.


FIRST:

decide what you want. basic ideas. go to you favorite blogs and find out what you like about them. do you like all the info across the top....or down the side of the bar.



I love disney's sidebar ( I guess I should mention that her blog is ruffles and stuff)

i thought about putting all the links but my blog is a little more (what's a polite way to say hot mess) her's is a lot more cleaner....



and I also loved linda (craftaholic anonymous) about...and how she puts all her buttons right there nice and neat.

and i loved this header...which is just a photograph:

and cheri's is adorable too....

i also love the colors of tomkat

but in the end stayed with the pink and gray.

i have saved these little pictures in my folder...so when I would sit down and play with it I would go there for inspiration....

NOW: i tell you this not to copy...but more as a reminder that you don't have to have the "normal" setup. you can branch out and be creative..and as long as it's easy to find you way around your blog...than more power to you.

[ tip junkie has some great advice about this]

second:

you have a basic idea.....basic color and style...

know your limitations.

I KNOW what my little skills can do...

and can't do.

like i wouldn't even know how to begin on this one.....but i love it!!!!

i don't know how to get fancy.

and I don't have photoshop

that's right folks. free all the way.

thank you picnik

and photobucket.

so keep that in mind.

I opened up a picture in picnik and I know we have talked about how to get a white blank photo to start with

 you can go HERE to read the basics of picnik

then come back.

let's start with my header.

I took my blank picture and cropped it so it was long and skinny (you can resize it if you know the exactness you want)

warning...if you crop it....and it's small....if you resize it bigger than it could be blurrier...

which is exactly what i did here

see...looks nice.

but it's not as crisp. learned that lesson the hard way.

i think the general rule is 250 pixels tall...

make sure you unclick keep proportions and then you can type in whatever dimensions you want.

so you have you blank canvas....

let's say you want it all one color.

there's an app for that.

oh wait.

no.

 I just go to stickers and click on the rectangle (basic shapes) and stretch it to cover the whole

i added some triangles and turned them and added colors. see how the yellow is up.

sometimes when you have a big thing and you are trying to click on the small stuff....you will keep getting the big rectangle. so i just move it out of my way until i'm ready for it.

you can also add it last...you just right click on it and choose send backwards.

as you go along...sometimes it's nice to save as you go. do a step and save it. and then push continue editing.

that way you think you like something, save it, load it as your header picture and discover it's too small...then you are totally not up a creek.

then i added some words...

you can be pretty creative. the hard part with making my header was finding the same color for each text box....that is why i did the fade...i knew I would never get it the same...so i didn't even try.

to add pictures:  I take my background.

and upload it to photobucket along with the pictures I want to use....

then I loaded my background first...click done add more photos and just shrunk them down to fit on my green rectangle.

then I save it to my computer...head back on over to picnik....and add in some text. back and forth back and forth back forth.....

then you just go into your blog design and add it as a picture right up top!

(now, I jumped around a lot between picnik and photobucket. if you want you pictures to have a frame....go do it at picnik and upload it at photobucket.

for my header I had the background and the title....uploaded it to photobucket....added my picture.

uploaded it to picnik...added the heart (two hearts..the gray one to outline it)

and then saved it and uploaded it to photobucket to add the glue gun.

whew. photobucket might actually do some of things...but I know what picnik has and am comfortable with it so I just did it my way (not necessarily the RIGHT way...but nonetheless.....I did have a disclaimer.)

MOVING ON...

let's talk about the little tabs along the top..

ONCE YOU KNOW THE BASICS....YOU CAN DO ANYTHING...TABS...BUTTONS...SPONSORS...THE SKY IS THE LIMIT!!!!!


now. i had the girl creative do my first intital makeover. so she entered in all the codes.  and I have slowly figured out the the html.

once you have the codes for the top part....the buttons...my stalker station...or for like the sidebar on my advertising...(see how they are all together?) well...once you know them....you just need to know what part of the info you need to change to make them work.

now...here is the hard part. it's super hard to show you..cause once you type the codes in...they turn into your picture....so I have copied and pasted them onto a google document...you can go HERE then you can just copy and paste them into a html on your blog design.

so...let's figure out how to change them...

this is the code on my sidebar...I have one for each advertiser...same with my tabs across the top...one for each.

now...see the info between the quotation marks. The first one..."http://www.etsy... see it? once you cut and paste this code onto a html on your blog design page: (it will look like this:

then you just delete all the words in between the quotation marks. 

then on the first one you are going to add the web address.

where ever you want to link to...a sponsor...if its for your tab bar you will want to have that specific page address. like the tab for tutorials looks like this:

http://kimboscrafts.blogspot.com/p/tutorials.html

now! the second set of quotation marks..

this is going to be your picture code.

you take your picture (we will talk about that later)

upload it to photobucket...and it will give you a code (actual it will give you four...you will want the direct link)

(or you could start a new post...upload all your pictures to a post and then find the code for your pictures there..for full how to on that...head over to 733 blog... (this is a nice way...so you don't have to worry about this:

you will add that code in between the second set of quotation marks.

and then you can hit save...and check to see if it worked!

(if not..go back...make sure the quotation marks are in the right place. that's the frustration thing about this...it's got to be EXACT!)

then you just copy and paste the code...change the two sets of quotation marks and there you have it.

(sidenote: when doing a button...you will need to add in  TWO sets of each..two web address and two codes for the picture.)



Okay. moving on. (you still with me..?) to make the little tabs at the top..

I do the same as the header...white blank...and then I resize it SMALL...I had a lot of tabs up top...so I did super small....you are just going to have to try it yourself to see what fits..you can always go back into picnik and resize if it's too big.

so I have my blank copy...you are going to do what you please with it (same as header) color...shape....polka dots....what have you.

Then you click on text..find a text you like...and write your first link title
then you are going to save it.

AND --THIS IS IMPORTANT.
click continue editing.

click on text...and change the words to your next link..

save..to a different name(I did like tab 1, tab 2,
and then PUSH CONTINUE EDITING.

and repeat.

(if you want them different colors you can change that too..

this way...they are all the same size...same cohesive look...

I made sure when I did my first tab button that it was the largest word.(like tutorials or advertise..so i knew it would fit...and then i just kept that same font size.

now..you could do all different fonts..all colors...all sizes. it's call creativity people. DO IT!

once you have them all done...upload them ALL to photobucket...leave it open...go into your blog and start adding the codes all in between the quotation marks.

for the sponsor buttons...I just had to resize them to make them all 150 x150....then I just did the same thing.

for the facebook/twitter buttons...I decided to do some circles....and just made my own. (remember...have to be pretty small!)

HERE is also a great way to resize buttons from 733.

AND this link

http://www.mycoolrealm.com/sandbox/gbgen/

will give you a code for your button...I've heard it's easy but never have tried it....

so let's review....

photobucket.

picnik

make your pictures...

code (email if you need it)

change the yellow/green to web address or link...change the blue to the direct link....push publish...

got it? good.


completely lost? sorry.