Wednesday, February 25, 2015

How To: Create & Install Category Buttons on your Blogger Sidebar

DIY blog design, blogging help
When you build your blog's sidebar you want it to be engaging. It is a good idea to have some of your best content featured. When you get a reader that likes what they see you want to be able to entice them to check out older content too. And, the easier it is to get those clicks the better. I really like showcasing my favorite categories with mini clickable photos. So, today I will show you how you can do the same thing with your blogger blog.

The first thing you need to do is design your graphic. I go with the mini photos, but you could also design a graphic with just the names of your featured content. I'm going to show you how to do it with pictures.

You'll need to have the content you want to feature in mind, and a photograph to represent each saved in your pictures folder. You'll also need to know how wide your sidebar is (blogger > template > customize > adjust widths > it will say your blog dimensions).

Go to picmonkey. Open up the first photo. If it needs any editing tweaks do those now.
DIY blog design, blogging help
Click on 'crop'. Type in the dimensions you want under 'actual size' and select 'scale photo'. Adjust your box however you want your photo cropped. My sidebar is 330 so I always use 300 for any sidebar graphics I do. I have a lot of favorite content I like to list on my sidebar, so I tried to keep the height of each button pretty small. If you have fewer buttons you could go bigger.
DIY blog design, blogging help
You'll want to add what your content's name is. I added a faded rectangle using the color scheme of my blog design behind the title. Do whatever tickles your fancy. Repeat for each one of your desired content buttons.
DIY blog design, blogging help
So, you've got all your mini photo buttons designed. Now you need to merge them into one graphic. Go back to picmonkey's main page and hover over design, click custom, and type in the desired dimensions. Use the same width as all of your mini photo buttons, and then for the height add up how tall they would be stacked together and tack on a few pixels so you have some room to work with.
DIY blog design, blogging help
Once you have your blank graphic go to the 'overlay' tab (the one that looks like a butterfly), and click on 'your own' at the top. That will open up your pictures folder. Add in each of your photo buttons until you have them all.
DIY blog design, blogging help
Drag each photo button to exactly the graphic width, and then space them all out in the order you want. After the whole thing is perfect go back to the 'basic edits' tab and crop out those extra pixels you don't need. Basically you don't want any extra white at the top or bottom. Save your graphic.
DIY blog design, blogging help

Now you need to map your graphic so that it is clickable.

Go to your photobucket and upload your perfected graphic. Copy the direct link.

DIY blog design, blogging help
Go to image-maps.com and paste in your direct link in the designated box and then click 'start mapping'. When it loads click 'click to continue'.
DIY blog design, blogging help
Have all your content links handy. Right click on your graphic and select 'create rect'. Drag the box to cover the entire area you want clickable and then replace image-maps.com with the link that matches up with that particular area. For example, I dragged the box to cover my sweet sunday mini photo button and then copy pasted in my 'sweet sunday' label blog url. Click save. Repeat for every mini photo button you have.
DIY blog design, blogging help
The box turns red for each area. So when your graphic is completely mapped, right click again and select 'get code'.
DIY blog design, blogging help
If you don't see anything pop up scroll down until you get to the coding box. Click the second tab option 'html code', and then copy your code.
DIY blog design, blogging help

Now you have your graphic coded to be clickable. Time to install it onto your sidebar.

Go to your blogger homepage. Select 'layout'. Click on 'add a gadget' and then pick 'html/javascript' from the options. Paste your mapped code into the content box. You can leave the title blank. Hit save. Drag your new gadget to the proper spot and click preview to make sure everything is where it is suppose to be. Then save your arrangement.
DIY blog design, blogging help
Now open up your blog and admire your new sidebar category buttons. Click on all those links to double check that they go where you want them to go, and hover your mouse around the whole graphic to make sure all the clickable boxes are where they are suppose to be.
DIY blog design, blogging help
And, that is it you are done!

If you have any questions please don't hesitate to ask me. I'm happy to help in any way I can. I'm definitely not a graphics or coding pro, but I do like being able to do my own blog tweaking and design.

Also check out my other how to posts: How to Create & Install a Blog Button and How to Create an Inspiration Board with Picmonkey.

Tuesday, February 24, 2015

[Guest Post] Getting to Know Laurie from andiamo

Day 11 of plague and pestilence. Send coffee and food. Aria is feeling better. Not great, but better. Chris is still feeling like death. I have so far avoided contamination and even earned my gold medal in catching throw up with a burp cloth. So that is why I've been seriously lacking in the posting department around here. Maybe we will all be better by the weekend? Pretty please...

In the meantime, let me point you in the direction of one of my fave bloggers who is actually posting these days to tide you over. Today I'd love for you to get to know Laurie from andiamo. She has the blogging trifecta - three adorable children, a super handy husband, and a love of Disney. All good things, all good things. If that didn't sell you she also drinks all the wine and coffee, does Christmas up right and decorates like a pro. You should absolutely hop over to her blog sometime and take a look around, but first scroll down to see our little Q&A!

Thanks for saving my empty blog today, Laurie!
[Guest Post] Getting to Know Laurie from andiamo
[Guest Post] Getting to Know Laurie from andiamo
[Guest Post] Getting to Know Laurie from andiamo

Make sure to stop by her blog today, and tell her Courtney sent you!
 

Wednesday, February 18, 2015

It's the Little Things: Pink Car

It's the Little Things, mini cooper ride on power wheels
It's the Little Things, mini cooper ride on power wheels
It's the Little Things, mini cooper ride on power wheels
Somebody (along with her stick) is finally loving their birthday present from mom and dad!!

We hadn't brought the little pink car out in weeks, so I told Chris he should give it a try since it was such a lovely day. And, guess what? She was totally into it. She hopped right in and rode around for a long time. Out back, out front, and then she asked to drive it to the park but it didn't have enough juice to make it there and back again.

It wasn't even a fluke. She's been out in it a couple times since. Winning!

Naturally I caught a little snippet of her adventures on video...

Linking up with Ashley at Words About Waverly and Jess at Sadie Sky Boutique:
littlethingslogo

Monday, February 16, 2015

Sunday, February 15, 2015

Sweet Sunday

February 8th - 14th
All of our simple and sweet moments from the past week.

hopscotch
A little hopscotch in the afternoon. Usually followed by 'moms turn'. 

toddler yoga
After hopscotch we do yoga!

licking the door
An IG repeat but too funny to pass up. Practicing her crazy window faces.

stacker toy, green toys
Just a little stacking.

opening Valentine's cards
And, of course a whole lot of Valentine fun all week.

Have a Sweet Sunday!

Saturday, February 14, 2015

The Valentine's Day Blogmopolitan Quiz

The Valentine's Day Blogmopolitan Quiz

Happy Valentine's Day!

click here to download your very own blogmopolitan quiz =)

Friday, February 13, 2015

Oh Hey, It's Five on Friday: Happy Valentine's Day

Sharing all the Valentine fun we've been up to this month!

Arts & Crafts:
arts & crafts for Valentine's Day
arts & crafts for Valentine's Day
The 'love' canvas is from last year, but we added some new finger paint artwork to the cabinet.
arts & crafts for Valentine's Day
Aria made daddy a Valentine card, but hasn't given it to him yet so this is just a sneak peek.
quick and easy heart banner for Valentine's Day
I made a quick heart banner and Aria helped me hang it across the window.

Balloon fun:
heart shaped balloons for Valentine's Day
heart shaped balloons for Valentine's Day
heart shaped balloons for Valentine's Day

Mommy & Me time:
reading Valentine's book
 Reading Aria's Valentine's book - Doc McStuffins My Huggy Valentine.
mommy & me painted pink toes
Matching pink toes!

Festive food:
strawberry cheesecake muffins
Aria and I made strawberry cheesecake muffins. I didn't chop the strawberries small enough so they were a little big in the muffin, but apart from that they were really good.
heart shaped Valentine food
Heart shaped food!

Sent & Received Valentine's:
Sending and receiving Valentine's cards
Sending and receiving Valentine's cards, making 'stained-glass' toddler art
Sending and receiving Valentine's cards, making 'stained-glass' toddler art
Sending and receiving Valentine's cards
We made a couple types of Valentine's this year, because toddler attention spans and all. Sticker heart cards, sprinkles printable, and a heart shaped 'stained-glass' window craft!
Sending and receiving Valentine's cards
Sending and receiving Valentine's cards
We also received a bunch of Valentine's - check out this post for more on the blogger Valentine exchange we participated in.

I hope you all have the best Valentine's weekend with the ones you love!