Your Carfty Girl Header

. .

Sunday, March 24, 2013

Adventures in Blogging #3

#3 Design Elements

So, I've gotten a few questions on my blog design. No I didn't use a designer just a lot of trail and error. (lots of choice words yelled at my computer)

1. I used great tutorials from Ashton at Something Swanky, She has a few DIY Design post you should check out.

2. She suggested to have a second blog, you use to host your blog pictures and design elements. A blog just for your eyes. I do that and love it, I often use it to test out things without worrying it will mess up my blog. 

3. Header  
I followed Ashton steps in; How to Create Your Own Social Media Icons, Make A custom Header and How to link multiple URLs to One Image. I also got my social media icons from Carrie at CarrieLoves.

A. I used PicMonkey to create my header, which includes my header, media icons and NavBar all together as one picture. 

B. I then posted the picture on my test/design blog to get the URL, so I could load it up to Image Maps. I used Image maps to link all my social media icons and NavBar (pages) to the one picture. I then got my HTML code and posted that to my test/design blog.

note: Make sure you link your main blog page to your header. So when you click on the feet picture or family picture you get taken to my main blog page.
Also, when linking the mail social media button use, of course change it to your email address.

C. I then used the steps in Make a Custom Header to get rid of the generic header and NavBar in blogger and install my custom mapped header.

4. Signature
I used PicMonkey to make My Signature as a image. I used Image Maps to link my social icons. I then posted it to my test/design blog for easy access to it when I create a post. 

Image Map

5. About
My about me was created in PicMonkey. I first went into create a collage and added the pictures and where the words are I left blank. I saved it like so.
Then went back into PicMonkey as edit picture to add words to give me this.

Tip: I went into my template (template - customize - advanced) to get the exact colors of my background and I use them in all my blog design elements to keep my blog looking cohesive. For example I found my blue to be #35b8c3 and when I'm in Picmonkey I can click on the color and enter in #35b8c3.

I hope this info helps you. If you have any questions on any of it please ask. Happy Blogging.

Image Map


  1. Replies
    1. great I hope it helps, if you have any question please ask. I'm not a expert but maybe I can save you my mistakes.

  2. There are some great tips here! Thanks!


  3. Hi! Followed you over from The Life of Jennifer Dawn blog hop. These are great! Love couples game nights. Pinned and now following you via GFC and Bloglovin'.

    Jackie @ The Non-Martha Momma