New Blog Template

I hope you like the new blog look.  It really was about time.  It had become increasingly obvious to me that my blog, which I started 3 years ago, was looking terribly dated.  Everyone and their mother (literally) had better and more professional looking blogs than me.

Yep, that's bad.  I hate those sides.  And the page tabs.....just don't get me started.  So I thought I'd try and add some social contact buttons to the right hand side to make it look a bit more professional.  Let me tell you, it was like putting lipstick on a pig.  The buttons I found (free because I'm cheap) were the wrong size and color.  I added them, but the blog was starting to look like a Frankenstein blog.  There was only one thing I could do and that was to start afresh.

Now that's a totally scary thing to do.  After all blogger isn't exactly user friendly sometimes.  You click on the wrong thing accidentally and bam, it's a whole different look.  Good job I did my research and decided to back-up my old template just in case the new one didn't work out.  Umm, well even though there's a lovely back-up button right there on blogger, could I get it to work for me?  Nope, came back with a bunch of errors which might as well have been written in Chinese.  So I cautiously decided to try a different method of back-up where I went in and copied all of the HTML code for the template and pasted it into a word document.  Luckily that did the trick.

But I still wasn't about to let loose on my old blog just yet.  Blogger doesn't let you keep the old blog template so any changes you make go live right away.  I didn't want to risk doing "open heart surgery" on my blog without having a clear plan as to how it was going to look in the end.  So I created a dummy or trial blog to work on.  Now you're probably wondering why I didn't just pay someone with a lot more experience with design and with blogger.  Well, for one thing, timing.  I always want something done like yesterday, and I knew I'd be getting a lot more traffic tomorrow because my blog is being featured on Brooklyn Limestone.  So excited.  If you're visiting from there, welcome!  Another reason, money.  I know it only costs a few hundred for a nice design, but I don't make any money from my blog so the least amount of money I throw at it the better.  And finally the main reason is that I love a good challenge and am not frightened of a bit of DIY whether it's tiling a fireplace, reupholstering a chair, building furniture or indeed redesigning a blog.  And with so many resources available online, how hard can it be?

Well, it is quite hard.  Blogger makes it hard.  Why isn't there a center button for headers or titles?  Seems pretty obvious to me.  So you have to go in and add code.  Sometimes this works and sometimes this doesn't.  If you want those fancy social media buttons you have to add them yourself.

To center the blog title:
Go to Design - Template - Advanced - Add CSS
Then type in the following

#header-inner img {margin: 0 auto !important;}

#header-inner {text-align: Center ;}

To center page tabs:
Go to Design - Template - Advanced - Add CSS
Then type in the following

.PageList {text-align:center !important;}

.PageList li {display:inline !important; float:none !important;}

To add social media buttons:
Go to Design - Layout - Add a gadget - HTML/Javascript
In the content box type

<a href="URL Goes Here"><img src="Image Direct Link Goes Here" /></a>

Copy & paste the URL that you want the button to link to, e.g. your Pinterest account.

Go to Photobucket and find social media icons that you want to use (or I believe you can upload them in there yourself).  Click on the icon and a pop-up should appear that gives the Image Direct Link, select and copy this link and paste it in the code above.  Do this for each button.

If you want a button to link to your email type "mailto:youremailaddress" in the URL Goes Here part.

When I was somewhat satisfied with how the new blog was looking I copied the HTML and posted it over the old blog.  Scary moment!  But thankfully it worked.  It didn't save everything and I had to go in and put the social media buttons and a couple of other things in there again, but apart from that it was looking pretty good.  There are a few things I'll probably change.  I'd like the Blog Title to be larger, but the default only goes up to that size.  I also don't like the box going around the tabs.  When I tried to go in and change the size of the Post Title it wouldn't let me, so I guess I'm stuck with the size it is (it needs to be bigger).  I'm also sure that professional blog designers would be horrified with the amount of different colors I have used in the blog.  I think I'll keep on tinkering with it as the weeks go on, but for now it's a huge improvement.

I'd love to know what you think.

Oh I just realized I need a fancy signature at the bottom of each post.  I'll have to add that later.  But for now TTFN.

*Update
So this is what the blog looked like after I implemented the changes above.

I was frustrated that the preset tools in blogger only allowed me to have a Blog Title of 80px.  As I had been playing around with the HTML all day, it didn't seem so scary to me after all.  I knew that I could always revert back to the old template as long as I was careful.  I realized that because of the method I used to upload the new blog template I was unable to change any of the font sizes or colors.  I'd have to go in to the HTML code and manually change them.

It's a bit like looking for a needle in a haystack, but I managed to locate the code that I needed to change.  What I was most excited about was being able to get rid of the boxes around the tabs.  I'd seen a lot of other blogs that simply had a line at the top and bottom; far cleaner looking than the odd size boxes.  My husband who is a software engineer couldn't believe that I was manually searching for the code insisting that they have tools for that, but I'm impatient and I just wanted to get it done.

And here's how it looks as of now.  I'm sure I'll be changing or tweaking it again.  I'd like to make my photo round to offset all of the boxy lines.  I think I'll have to use photoshop or some other photo editing tool.