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!

7 comments:

  1. I love your new look. Thank you for the great info. on how I can make some clever changes to my blog- all on my own :)
    2 Smart Wenches

    ReplyDelete
  2. Thanks for the great info! I constantly change my blog [DIY-style!], and I've always been curious about the image mapping thing. Can't wait to try it out.

    Meg
    Third Grade in the First State

    ReplyDelete
  3. This comment has been removed by a blog administrator.

    ReplyDelete

Thanks SO much for stopping by! I appreciate your comments and any ideas you share! Have a wonderful day : )

Related Posts Plugin for WordPress, Blogger...