Clickable Links in Your Header: Image Mapping

What's the first thing you look at when you click on a blog? The header, right? If you like that blog, what is the next thing you look for? The follow {or subscribe} button! Wouldn't it be nice to have it all in one place? I was recently asked how I did the clickable buttons in my header, so today I thought I would show how you can do this! I have to admit, that my previous header was the first time that I played with image mapping. I found a great tutorial here when I was in search of how to do it. And although I was thrilled that I managed to make it work, I wasn't happy with how the banner turned out. So I decided to make a new header first (if you've followed me for any time at all, you know I like to change the header quite a bit!) Here is what my banner looked like before...

The colors made it hard to see what each link was, and I also couldn't figure out how to make the buttons not look transparent. Even though they were white, on a white background. So I started over, and I am much more happy this time! I'm going to try to explain what I did without confusing you too much, but feel free to email me with any questions. Here goes....

CREATE BUTTONS (OR HAVE YOUR BUTTONS)

The first thing I did was look for a color combination that I liked for the design. Pinterest is a great place for that! I used the Chrome extension Color Picker to find out what the hex #'s of each color were. It's really an awesome thing! Your able to place your arrow anywhere on the screen and by clicking on the color, it gives you the hex# (the html color code). You can find that extension at the the Chrome Store (it's free). Then I designed my buttons. There are tons of places to find great icons, so don't feel like you have to make your own. For all of my header including the buttons, I used Inkscape. Another free image creator/editor. I used Gimp for the last header, but I really loved using Inkscape! Here are my buttons......

Each button is 64x64

One thing you have to remember when using Inkscape....make sure that when you save your image, save it as a .png file. Inkscape will automatically save it as a .svg file if you don't change it.

CREATE YOU HEADER

Then I made my header. Here is my header without the buttons....

I left the space on the right blank for my buttons. I also left space at the bottom, so that I can add pages there another day (update: I've added pages!). I saved it as a png file, then uploaded it again (so that all of the layers are now one image).  On Inkscape you have to import the buttons (on gimp you add the buttons by adding layers). Once I had my buttons where I wanted them, I saved it again.

MAPPING YOUR IMAGE

 Now being new to Inkscape, I'm not sure how to map the buttons, so I went back to gimp for this part. 

This can seem a bit tricky, but you can do it! 

 Upload your image, click on filters, web, then Image map

Here is what your screen should look like....

Next, click on Mapping, and choose the Rectangle (or circle if your buttons are circle. Click on the corner of the button (one at a time), that will create a square around the icon like in the picture below. A window will pop up and you will add the URL of the link of the icon. Do that for each button (it doesn't have to be exact). 

By clicking on the area #, you will be able to open the box for that image. As you add the URL's, you will see them appear to the right. I have 9 for mine (areas #1 through #9). 

With the same box open that you put your URL's in, click on the the Rectangle. If you don't have the box open anymore, just double click on the url in the box to the right. You will need to adjust your pixel size for each of the images. Mine is easy since it is square and I know that each button is 64x64, so I was able just to type that in the width and height.  

Now your finished mapping your image!! Not that bad, right?? Your not quite finished though. You will have to turn the image map coordinates into an html code. You can do it! Save you image (it will be .map)

CONVERT INTO HTML

You'll need to use a text editor. I used Komoto Edit (free also!). Once you have installed Komoto, Open your .map. Copy all of the text starting with < map

The next step is to .....

ADD IT TO YOUR BLOG

Go to Design, Layout, add a gadget, HTML/Java Script

Paste your code

SAVE.

ADD IMAGE TO LAYOUT

Go to Design, Template, Customize, edit header, upload new image, and apply to blog

the final step....

EDIT HTML

I know we all get a little scared when it comes to making any changes to our html. Just make sure you back it up. Go to Template, Edit HTML

Expand Widget Template and scroll down until you see the text < div id='header-inner' > 

delete the line below that and the line above < !--Show the Description'>

*note* mine was already deleted when I did this, so you don't see it in the picture below.

Then after you see block' add this text:

usemap='#map'

make sure you keep   />  after '#map'

You now have clickable buttons in your header!! 

You'll notice that your header isn't clickable anymore. When I first did my previous header, someone told me that it would be better if my header would still take you to my home page. I totally agreed, but forgot to change it. So I did on this one. To make it clickable to take you to the home page (if you don't do it at the same time as your buttons), upload your image to gimp, use the rectangle to outline the coordinates (minus the area your buttons are in) with the url of your blog, upload the .map file to Komoto and highlight only the portion beginning with

and ending in /> copy and paste that into the same html widget that you used before before and your header will be be clickable to your homepage!

You don't have to redo the entire process every time you change your header. As long as your buttons stay the same size and in the same order, just make a new image and upload the image into your blog. The rest stays the same!! 

[Continue reading...]

Advise for New Moms: from Tales of Beauty for Ashes

Have you entered the HUGE GIVEAWAY from my amazing sponspors?? I'm even giving away a set of 3 boutique burp cloths!! Meet Becky and then go enter!!

I know A LOT of us are moms, some new moms, some not so new moms. But we can all relate to what new mama (to that beautiful little girl!!) Becky is going through! If your a soon to be mom, here is some great advise! Becky is one of my great friends that hangs out on my sidebar, and I would love for you to check out Tales Beauty for Ashes. She has great posts, and for a busy brand new mama, I'm amazed how she is keeping up!! So show her some  ♥LOVE♥

You can find her here:

Blog ~ Twitter ~ Facebook 

So, you're a new mom…Now What?

I wish I could sit down and have a coffee date with all you new mamas out there. There are so many new and confusing things about being a new mom. Here are some things I wish someone would have told me:

1. You are going to be hormonal. That is perfectly normal and completely okay. Remember what life was like when you were a preteen and a teenager? You would be FURIOUS at your best friend for something stupid. Then an hour later, you and your BF would be laughing together and talking about boys again. Post partum hormones are like a box of chocolates, to quote Forest Gump - you never know what you're going to get.

2. It is okay to NOT know what to do. I think most moms feel this way. You have a brand new bundle that you are entirely responsible for. You need to hold their head to make sure it doesn’t fall off (okay not really, but that's how it seems at times), you need to produce enough milk to help them regain their birth weight. AND…you need to know their needs at ALL times. That last one, is not gonna happen. And it's OKAY. 

3. Let your emotions out – a nurse in the hospital did tell me this one. It was a huge lifesaver.  As women, we often feel like we need to be strong and hold our emotions in. Honestly, that is what can lead to postpartum depression. When you feel like crying – cry. It is okay, and good. I realize that for some reason my emotions/hormones peaked around dinner. My hubby and I had plenty of dinners with tears. After dinner, everything would be great! Let them out girls! 


Look at the bright side, you won't be the only one letting all your emotions out! 

4. It's okay to say no. Maybe I need to say that again. Maybe I need to READ that again. This is one of the hardest ones for me. People wanted to come over. People wanted to let their little children hold my two day old newborn. Sick children at the doctor's office wanted to come and stick their face in my little one's. I finally reached a point where I realized, I was putting what people thought of me before my own baby's safety. I realized that when my little Gracie was sitting on the lap of a two year old, and she started rolling off, that I didn't have to agree every time someone asked me. (This is one I have to keep telling myself though, the desire to people please is a strong one.)

5. Listen to your body. For a week after the birth of my baby, I felt incredible pain. I walked around and tried to do what I could, even though my body felt like all my innards were falling out of me. I told the doctor in the hospital. She said it was a hemorrhoid. I told the nurse, she said it was normal. Finally, after being home for a few days, my hubby checked me. Not everything was right. After going in and getting stitched back up again and put on meds for infection, things finally started to heal. A week late. I knew something was wrong with my body, but I trusted the doctors and nurses that it was nothing. If your body is telling you something is wrong – LISTEN TO IT!  
6. Turn the T.V. off – matter of fact, turn anything off that would distract you. These first few weeks are so precious. Your little one is going to start staring into your face, studying you. Let her see your eyes, your smile. Let her hear your voice. If you are distracted by the T.V. or other things, she and you will miss out on some incredible bonding.

I Love this post Becky! So true!! Your baby is beautiful!! Congratulations to your new little family :) Thanks for hanging out with us today Becky!

[Continue reading...]

HUGE {July} GIVEAWAY!!

It's time for an awesome #giveaway with lots to win! One lucky winner will take all! You'll get awesome prizes and ad space on 4 awesome blogs!! So don't miss out on this one! Thank you to all that contributed! Please make sure that you complete the mandatory entries to qualify (all entries will be verified). This giveaway will go on till Monday July 30th at Midnight, and a winner will be announced on Thursday! Thanks for entering!!

Boutique Burp Cloths from I Know the Plans I Have for you

Blog ~ Twitter ~ Facebook ~ Bloglovin'

Large Ad Space on The Day I Stopped Making Cents

Blog ~ Pinterest

8x10 Print and 1 month of medium ad space by Singledou[b]t

Blog ~ Twitter ~ Facebook ~ Bloglovin'

$5 credit to Pamela's Heavenly Treats and 1 month of medium ad space from

Pamela's Heavenly Treats

Blog ~ Twitter ~ Pinterest ~ Bloglovin'

$10 Mary Kay Credit by Operation: Simple Life

Blog ~ Twitter ~ Facebook ~ RSS

2 months of large ad space on Chalk in the Rain 

Blog ~ Twitter ~ Facebook ~ Bloglovin'

a Rafflecopter giveaway

[Continue reading...]

Lace Crown for a Princess {a tutorial}

Having two girls, I have so much fun searching for those great little pretties that are out there to make! My poor son gets a bit of the short end, but it's no different than going to the mall....girls stuff is just more fun! It's been a super busy month here, with celebrating my middle daughters birthday a few weeks ago, my anniversary a couple of weeks ago, my husbands birthday last weekend, my youngest daughters birthday on Wednesday, and my sons' birthday this Sunday! Phew!! I am tired just listing them! Now as much as I have a blast getting the family together {wink wink}, I'm not really interested in having a party every weekend in July! So this weekend, my son has been a great sport, to share his party with his baby sister. Thank God he just LOVES her, cause if he didn't, I'd have to endure the family get together another weekend (Thanks baby...mama loves you!). My little one turned 2 and my son will be 9, so having a shared party is a little difficult for me. Unfortunately (for him) I am having a hard time getting myself to make him any decorations. That's because I am having so much fun making hers!!

I've seen a few lace crowns around blogland, and who doesn't love a beautiful crown?? So when I helped  my sweet, older neighbor (who is basically me in 40 years! A total craftin', sewin', repurposin', reupholsterin', diy'er) move a few weeks ago, she gave me BAGS full of fabric, vintage lace, thread, upholstery supplies, and TONS more, I knew that I just had to make a couple of crowns! (She's a bid of a hoarder, but in a GOOD way!! Shhhh ;-))
So I started to go through her collection of lace, it wasn't hard to decide which to use for the crowns, I just had to decide how many I wanted to make. I decided that I was going to make 3 of them, in case it didn't work out. I could always make more if they did. I had all of the supplies except for fabric stiffener. Some people use Mod Podge, but I figured spraying the stiffener would be much easier. I found a great tutorial on the Joyfolie blog that you can check out.

Here is how I made mine:

Supplies:
♥ lace (of course)
♥ wax paper (it's to have something to lay the lace on when you spray the stiffener so you can use anything)
♥ tacky glue (just what I chose to use to glue the crown together. Any glue is fine)
♥ scissors
♥ tape measure

Optional:
♥ paint (any kind of paint. I used acrylic paint)
♥ hair dryer (I'm not patient enough to just let it air dry)
♥ flower, pin, feather (what ever you choose to make it extra pretty)

For my flower:
♥ satin fabric (maybe its rayon, I'm not sure)
♥ scissors
♥ lighter
♥ button
♥ hot glue/glue gun

Here is the lace that I chose...

The wider lace is very soft lace, so I wasn't sure how it would work. But it was such beautiful lace, that I wanted to see how it would look. This is the fabric stiffener that I used. I purchased it at Walmart for 4 or 5 dollars.

My daughter was sleeping on the couch, so I measured her head (in the shape of the crown) while she slept :)! I made them about 13 inches.

Now because I can never do anything at a reasonable hour (I started at 12:30 am) I wasn't about to wait an hour for each coat of stiffener to dry! So I used a hair dryer. This process, though easy, got on my nerves a bit. The lace wouldn't stay flat with the dryer, so I just held each piece and they flapped in the wind :) I did this about 4 times with each piece, and for some reason I wasn't expecting them to completely soften with each spray. So I felt a little like I was starting over every time I decided to put on another coat. I also knew that the crowns didn't get completely hard when finished, and  that they would have some give, but I thought that they would get stiffer than they did.

Anyway, once the lace is dry you can either leave them as they are, or paint them. I decided to paint mine, but I think unpainted can be really beautiful too!

I didn't wait for each side to dry, I just flipped it over and painted the other side. I love how the paint brings out the detail! I used a metallic silver and used the hair dryer to dry the paint too. 

I had planned on making 3 crowns, but once they were painted, I decided to place the 2 strips of lace in the picture above together with a bead of the tacky glue along the flat edge. That gave the crown much more structure! Then I glued the ends together and placed them around a large upside down glass to dry overnight.

They had stiffened up a little more overnight, but the thick one was still pretty flimsy. Next time, I will definitely use 2 layers of that! 

For the flower, I cut the fabric in a circular shape (doesn't have to be perfect). How many you cut will depend on how you want the flower to look. I think I used 9 pieces. Sorry that I didn't take pics of this part!
Then using the lighter, melt the edges. Be very careful with this part because is can easily become shaped weird or light on fire! The heat will do this pretty quickly! 

Once all of my petals were done, I just layered them from bottom up, and put a dot of hot glue on the bottom of the each petal.

Add a button, pin, broach, or anything that you want to the middle and either glue the flower on with hot glue, or if you choose a pin, you can pin it on to the crown. And you have yourself a pretty little crown, for a pretty little girl. (I didn't put the flower on the big one, because it didn't withstand the weight of the pin I wanted to use on it. So what you see above, it what it still looks like)

Tip: If some of the petals aren't the right size, once you have it put together you can cut them to size, and use the lighter again to get the shape that your going for. If it is close to the right size, but you just don't like the shape, just use the lighter to get the look you desire. 

This was super easy, and I will be making more for sure!! Thanks for stopping by!!

[Continue reading...]

Mini Canvas ♥ Note: A quick tutorial

Last night before I went to bed, I thought that I would like to leave my husband a little love note that he could find when he got to work. I have had this mini canvas that I had already painted red, from my 365Alphabet Photography project. This little love note took me literally 10 minutes to make!

So here is the super easy peasy rundown:

Optional:
Glue coordinating scrapbook paper to the back to make a nice cover. (I did do this, but for some reason I forgot to take a picture)

TIP: If you get hot glue on the canvas (which you will), take a lighter and carefully heat up the excess glue. This will only take a second or two, then with a clean cloth, wipe clean!!

And your finished! I put this in my husbands briefcase so that he could find it when he got to work :)

[Continue reading...]