Blog Face lifting How-To

So you want to have a pretty blog? You want to do the stuff professional blog makers do? Without paying the money? Most if it is really quite easy… and only a few things made me get a few grey hairs…(they are gone now no worries) So I thought I would just break it down real quick some of the tutorials I used and some of the tips I learned along the way. Then in no time you can have the blog of your dreams 🙂 Not that I am a professional of course, I am just to cheap to hire one 🙂 

So first things first someone asked what template we used to get our blog wider. Sadly I don’t think I have the best answer for this since I wish my blog were a tad wider… however I do use the blog template called ethereal. Then I changed the settings in template designer. I set the side column to 250 pixels and the main blog to the max 1000 pixels. This allows me to make my pictures X-large without them overlapping into my side bar. 

Next up let’s talk graphics… I so wish I were a graphic designer… alas I am not, nor do I know where to begin. I created the header in Photoshop creating a blank file that was 980 pixels wide and 300 pixels tall (the size that I decided I wanted really) Then I played around with words and colors to get our name the way I wanted it, then it was time for graphics. The web is full of free graphics to use (not sell just use) I found the site “The Graphics Fairy” She has a ton of great graphics that you are free to download and use. That is where I found all the graphics used on the blog I simply changed the color of them to match my blog in photoshop. She has some great graphics for crafts as well like this one that I already have an idea for…

Grab the graphics and design away. I added text to the scissors graphic for each of my headers and then I added them to my side bar as a picture and selected it from my computer, you can add a web page to link them to so when someone clicks it takes them to the page. (almost like a button) 

For the “tabs” at the top of the page I followed this tutorial HERE it takes awhile the first time to get everything set up and I actually set up a second blog “the archive” for the pages that are created for this, because other wise the linked in widget would pull up those posts and that was annoying me… I can be crazy like that. So all the “behind the scenes” posts are actually held on a separate blog and linked it all here. 

Now for the last two they were the ones that gave me some trouble but now that they are done, they weren’t that bad. They are the favicon (the little picture up by my website address) and getting rid of the blogger navigation bar… Why get rid of it? well I just like how it looks better without it… 

TO make the navbar go away you copy and paste this code:

<style type=’text/css’> #navbar-iframe { display: none; } </style>

Right above the tag </head>

 

To get there click go to edit your template in HTML then select the expand widget. then if you are using a mac you can hold down command “f” and a little serch box will pop up enter that tag and it will find it for you. Then paste the code save the template and you are done. If you are not on a mac you may have to find it yourself… it is near the bottom of the HTML code. 

Next the Favicon. 

This one is actually fairly easy once I figured a few things out. 

Start by making a favicon by creating a blank file that is 100 pixels by 100 pixels. I used photoshop but GIMP works the same and is free. Design it how you would like and save. 

Next go HERE

Upload your favicon and it will turn it to a favicon file and host it for you. 

Then you should get a screen that looks like this Copy the direct link code.

Go into the template editor just as you did before expand the widget. Then search for ]]></b:skin> and </head> you want to paste your code right in between those two tags. Save and you are done. 

Whew! Ok it took some time to put together but it really wasn’t bad! If I left something out that you are still wondering about go ahead and ask and I will try and answer… and if you give your blog a face lift leave us a link we would love to come check it out!