Monday, June 30, 2014

Loving my new blog look--you too can DIY!

Hey everyone!  If you have been a visitor before you might notice a new look!


There are some things I've changed about my blog this weekend.  It all happened because I wanted to hire someone to make great changes and my husband said "no".  That turned into me getting inspiration from styles I liked and coming up with what I wanted to change.


Here was my old header...
but I wanted something more interesting and had the links in it.  First I designed the new look on paper getting inspiration from The Cutest Blog on the Block Custom Designs Simple Style.  I still think it is so awesome how they blend the header to be part of the blog (I am still working on this a bit--I keep on having a little gap between my header and the rest of the blog).

Just for those of you who have never changed your blog before, some of this is a little advanced, but nothing that you can't figure out with googling tutorials.  The easiest way to make big changes is to go to your blogger dashboard and choose template > customize (under your mini picture of your blog > Advanced (which puts you in Blogger Template Designer).  From there you can change a LOT of stuff--the font and colors/size of your text, the width of your blog, etc.  You should definitely try it!  Now onto some more details...

Once I had my design I used the Google Drive and created drawings to add create elements for my header.  I created these...

I saved them as a PNG file and opened up the free drawing editing software I use--GIMP.  I have used it before but there are a ton of tutorials on how to use it if you are new to it.

The tricky part was making it have links in the image.  The first think I came across didn't work very well... It instructed me to cut up my image and then add it as a gadget with HTML abutting the images next to each other.  It was close, but it wasn't working.  Then I found this site which told about image mapping--where you keep the image and specify where on the image links are. I did end up using image-maps.com to make the map but then changed the source location of the picture (since they charge a subscription fee if your image stays on their server).

I put up my image but I really wanted my image to be seamless to the background.  This took some searching, but after making my image have transparency I did find this useful site which was very helpful!  It helped me to get rid of my header background being white.

That is basically how I changed my header and changed some of the fonts.  Now, the fun find that I stumbled upon was this very easy trick with images.  I wonder if everyone will start doing it.  I think the hover over feature is so fun!

Good luck with your DIY blog stuff.  I still have some elements I want to add, but for me the header was a big one.  I'd love to hear if any of this helped you : )  Have a great week!

Related Posts Plugin for WordPress, Blogger...