Blogger Tips, Tricks & helpful sites!

I had such a good time working on my new blog design & had some great help from awesome blogs. {There were also some people I reached out to for help, that wouldn't help me} so I want to pass along some good info! I have to give a shout out to my new friend Lauren for ALL of her help. Go check out her blog - it's amazing!

I hope these sites help you - there are so many little things that I probably won't get to document because I just sorta learned them as I went & probably won't be able to explain how I did it {it was just magic!} but if you have any specific questions, email me and I'll try to help you figure it out. I did all of my sidebar titles, link bar titles, header & buttons in Photoshop CS4, but a lot of the stuff {like the fun fonts} doesn't require Photoshop. The Cutest Blog on the Block also suggests the program GIMP {a free editing program - they say similar to photoshop}.

My blog is a 3 colum blog & that was the first thing I did to change it up. It requires a lot of HTML & CSS code, but I did it all with the help of this tutorial:

from The Cutest Blog on the Block

however, I did end up changing the numbers in my html code to make it bigger, etc. here are my numbers: {I also added a third sidebar (one on the right & one on the left) so there are 2 places for sidebar} basically $endSide = right and $tartSide = left side

Instead of a 860 header wrapper, mine is 940px {that means my header is as long as my main wrapper {where all the text/sidebar items are)

My numbers are a little different than the #'s it suggests in the cutest blog on the blog tutorial, but at least that gives you a place to start! I've put in red the numbers in mine that are a little bit different.

/* Outer-Wrapper ----------------------------------------------- */ #outer-wrapper { width: 950px; margin:0 auto; padding:10px; text-align:$startSide; font: $bodyfont; } #left-sidebar-wrapper { margin-$startSide: 10px; width: 200px; float: $startSide; background-color:$mainBgColor; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ } #main-wrapper { width: 450px; margin-$startSide: 10px; float: $startSide; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ } #sidebar-wrapper { margin-$endSide: 10px; width: 200px; float: $endSide; background-color:$mainBgColor; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

}

It is SO confusing at first - and a lot of it I just sorta had to mess with the numbers. Here are the run downs on what all this means:

#outer-wrapper - This defines the entire blog
#main-wrapper - This defines the main column
#sidebar-wrapper - This defines the sidebar

Always remember to save your template before you start messing with your HTML. If you go to Edit html there is a place you can save your entire template to your computer. I actually started a "practiceblog" while I was doing my re-design and then moved it all over last night :) That way I could do as much as I wanted and when I got it just like I liked it, I moved it! You can do it with your same email address & even make it private so no one can find it (under permissions tab).

Ok, so after I changed my template - I picked out a free background! I did follow some tutorials to make my own in photoshop, but I didn't like them as much as the ones I found online for FREE! There are so many sites that offer these:

Cutest Blog on the Block

Shabby Blogs {Where I got mine!}

Aqua Poppy Designs

Lee Lou Designs

**Now remember, if you changed your template to a 3 column, you need to get a 3 column background! Just look for it on the site, they should all have 3 column backgrounds.

Ok, now that you have a background & a new 3 column template - get to work! There are so many ways you can customize your blog! I had a few people ask me about my header size: 940px by 350px. If you want your header to be the length of your blog, than look and see what your header wrapper is in your edit html section. {you can hit ctl F and it pulls up a search box in your html so you don't have to keep scrolling around to find what you are looking for}

Since I have photoshop, I opened up my image, went to "image size" and put in those dimensions. Then I opened a new document with the same dimensions & copy and pasted my image over there. Then I just put a text box over my picture and added words. Then I hit "save for web & devices" and uploaded it to photobucket. I would suggest getting a photobucket account (it's free!) because you can easily upload your pictures/graphics and then get the "direct link" to put into your blog. That is waht I did for my header!

Ok onto FONTS! kevinandamanda.com is a HUGE resource!!!

There she has FREE FONTS!!!!

On this post she tells you how to apply a new font to your blog! It is so fun - it's a longer tutorial, and takes some time {and maybe some frustration there!} but it works! just follow her tutorial & you can have a new font for your post title, dates, and sidebar! If you go with a 3 column blog, make sure to follow her instruction to add the other sidebar to your account at webs.com so you can have the font on both sides. And don't worry, every time I did this process I got frustrated, but just hit refresh or wait a while and it always shows up! maybe it just takes some time to load...

{another fun trick - if you have problems moving your page elements around, get firefox - it's so much easier & then you can look at your blog in safari and see what it looks like!}

OH and another note - while picking the color for your font, it's so much fun to match it to your background color. firefox as an application called Colorzilla that you can download for free. It works like an eyedropper tool, once you download it, it will appear at the bottom of your firefox browser window - so click it, and then click a color on your background and it will give you a 6 digit color code! When you get to the part in the tutorial to change around the color of your fonts, enter that code {write it down so you will use the same color around your blog} I used brown, green & pink and I think it makes my blog look unified that the colors are all the same.

Ok I feel like that was TOO much information for 1 post. I will keep working on these little tutorials & please let me know if there is something on my blog that you want me to give you the info from. Here are a few more things I will document for you {so be on the look out!}

1. How to link your facebook, gmail, twitter {like mine under "contact me"}
2. the tutorial that helped me make my linkbar {under the header that says "about me", "home", etc}
3. how to make a post divider
4. how to make a signature
5. and if you have photoshop {or a related program} I can try to tell you how I made my sidebar titles {like the ones that say "my posts", "my friends", etc}

How does that sound? I hope I can help give you the information you need to change up your blog! It took me WEEKS to compile all of this information & from there it was just sorta touch and go with what worked and what didn't. I will try my best to give you the resources you might need to spruce up your blog! Let me know what else you want me to explain & I'll try my best!