How to Create and Add a Button to Your Blog

So, I decided to join up with this 31 Day Challenge this year and part of it means I have to make a button for my blog. This was a new challenge for me in itself and I got help from various sources but, when it came to adding it to my blog, I had to figure it out mostly on my own as most of the tutorials I found were for the old blogger format and, as a result, were hard to follow. They also weren't visual enough for me (even though I did manage with them). So I thought I'd attempt to come up with my own little tutorial. :)

So first things first: making the image for your button.

I used PicMonkey for this as I found that the easiest to use. You can also use Canva.

In PicMonkey, you will hover over the "design" link and it will give you some options. Choose "custom".

Next, it will want you to select your dimensions. Change the numbers they have to 100 x 100 (or 125 x 125 works too). Then click "Make it!"

Now you're in the image editor section. You will click the butterfly icon, as this will allow you to use one of the overlays they provide or add your own picture.

For the sake of this tutorial, I'm using an overlay they provide (most of them are free so make sure you just choose the free ones ... unless you really want to pay them). :) I also changed the canvas colour, which you can do in Basic Edits (the first option in the left hand menu).

Now, at the top of your screen are some words and images: Open, Save, Share, etc. The first arrow is "undo", the second is "redo", the third (with what looks like little papers and an arrow pointing down) is the button you want to save your work so far. It combines everything together. So go ahead and click that. A little monkey head should pop up on the left and say "combined". :)

Now click the "Tt" button/icon on the left menu. This will allow you to add text. A text box will show up on your image. Select your font on the left hand menu, select colour and size in the right hand menu that pops up. Click in the text box to add your text. Resize the text box if necessary. You can drag the text box to place it where you want it. Once you are happy with how it looks, click the combine button in the top menu again (the down arrow by the little papers). :)

Next, you're going to click the save button in the top menu and this is what will show up:

Give it a name where it currently says "untitled" and click "Save to my computer".

Next go to either Photobucket or Picasa Web Albums. I personally prefer Picasa (so this tutorial will show you how to use that to get your URL) as I find the Photobucket URLs unreliable - people end up with a picture of a question mark on their blogs where the button image should be (meaning the code can't access the image in Photobucket). In Picasa Web Albums, you will either add a new album or click on an existing album. Since I already have an album called "Buttons" I will use that.

Click "Add photo" at the top menu, find the image wherever you saved it on your computer, choose it, and add it to the album!

As you can see above, I have added my newly created "Live, Laugh, Love" button.

Now, click on the image of your button. It will open to a new screen. Then right click your image and you will get a drop down menu. Select "Copy Image Address". This will copy the Image URL to your clipboard.

OK, now you are ready to generate your code! YAY! :) So we're going to go this lovely site called Grab My Button. It will look like this:

In the space "Your image URL", paste the image URL you just copied from your image in Picasa Web Albums. Then you can add your blog name in the "Your website/blog Title" and your blog address/landing page in the "Your website/blog URL" space. For the sake of this tutorial, I'm using my daughter's blog. :)

Ignore all the information under "Choose Your Colors and Code Box Options". Instead, scroll down and click "Preview". You'll get a lovely pop-up image of your button and code. 

Click the green "Get Code" button. This will close the image and bring you to the section where you can select and copy your code.

OK, now that I have my code, I need to go back to my blogger blog (in this case, Annalise's blog), to add the button.

So, you will go to your blogger blog and select the layout in order to edit it.

As you can see in the image above, there are little spaces that say "Add a Gadget". You will choose one of these to add your button. I will choose the one in the side-bar because that's where I want the button to appear.  When you click "Add a Gadget", a number of menus of options will appear. The first option menu being "Basics". Scroll down in that menu until you see the one that says "HTML/JavaScript".

Once you click that, a text box appears for you to add a title and code. Give your button a title and, in the "content" section, paste the code you generated in the Grab my Button page.

Click "Save", which will bring you back to your Layout page, then click "Save Arrangement" which will save the button to your blog. If you want to move it around, you can drag it where you want and then click "Save Arrangement".

Now view your blog and you will see your button on the right hand side bar!! :

You did it!! Go celebrate (and maybe take a Tylenol for that headache you might now have)! :)

The above tutorial shows you how to make grab code for your button. If you want to make your image have a code that will simply bring the reader to the collection of posts related to that topic, I suggest this tutorial by Faith @ Sweet Violet. :)

FMF: Because I'm a Mom...

Welcome to another instalment of Five Minute Friday where I join Kate Motaung and many other wonderful people world-wide to write on a word prompt given to us by Kate. Come join us! Either read the posts already written or write your own to add to the link-up! :) It is a wonderful writing exercise, sometimes more challenging than other times but always worth while to participate in!

This week the word Kate gave us is "because". The following post is not the post I intended to write but, as I sat in the salon chair this morning (yes, I know it's a day late), this is the post that came out. so I guess that means it was the post I needed to write.

START

Because I'm a mom, my life is often centred around children. My pre-mom life was too, being an elementary school teacher. But this is different - this is 24/7. (Teaching was more like 18/7 ... except in report card season! ;) )  And this also involves more of the heart (though, when I was teaching I wouldn't have thought it was possible for my heart to be even more involved in someone's life.)  But, being a mom (and a wife) makes your focus in life chance. There are new roles in which to bring glory to God and the weaknesses I have are suddenly more apparent, making that glorification more challenging. What's amazing its hat my husband and girls (and God) continue to love me through it all!!

Because I'm a mom, I start caring about more than myself. Though I care more about myself too - because if I don't take care of myself, how can I expect to take care of my family? Because I desire to take care of my family, it means making changes. It means a simpler life. It means removing clutter from my life: physical clutter (things; activities), emotional clutter (attitudes; people who bring you down; but doing things like downsizing Facebook use; and/or instead, surrounding yourself with positive, like-minded people), spiritual clutter (attitudes here too!; anything that keeps me from drawing closer to God; people with really messed up theology; instead, spending more time in the Word, in prayer, with God).

Because I'm a mom & wife who wants to take care of my family, it means saying "no" to many extra-curricular activities (even when all your peers are putting their kids, preschoolers and toddlers included, in various activities & playgroups nearly every day and evening of the week!!), saying "no" to participating in various groups, not jumping on every popular bandwagon that everyone around you seems to be jumping on. For me, it also means: making an effort to keep the house tidy, making healthy meals, cooking & baking from scratch. It also means not hovering over the kids and spending every waking moment with them but, instead, letting them learn to entertain themselves and develop their own imaginations.

Because I'm a mom ... things (blog posts?) can be late! :)

STOP

Bunn's Creek Trail

Today the girls and I went on another nature walk and, even though the weather didn't end up being what we expected, it was a gorgeous day for a walk! This time we took my sister and her youngest daughter along. :) A highlight of this walk is that there is a playground at the end of it so the girls were quite excited about that! We chose to walk today on the Bunn's Creek Trail. We did purposefully did not do the entire trail. My sister lives close to the trail and the walk from her places kind of forces us to start part-way through the trail. This is fine as it makes the trail more manageable for the little ones. We started up on Rothesay and ended up at McIvor Park. :)  The creek was much higher than I've seen it in the past in autumn ... but I haven't been there for a few years so things may have changed in the mean time. It was nice to see it flowing so freely, not so nice to see some of the trash people left around it. Let's take care of our trails, people!!  With the autumn season being upon us, we were able to see so many varieties in colours on the trees and it was fabulous! The kids were thrilled to experience all the beautiful nature! Before we left our own home, I pulled out a bag for my oldest daughter and gave her instructions to find samples of nature. She LOVED doing this and had very willing help from her cousin! :)  It was wonderful to see the girls running along the trail finding beautiful treasures of nature. I, personally, enjoyed seeing the wildflowers, the old trees (some fallen across the creek), and mysterious looking side trails that, really, only look mysterious because of the colours and light. :)

Of course, pictures are necessary:

The start of the trail (or at least our start of the trail). :)

These are not wildflowers - planted but still pretty!

     

Look at those colours! Greens, yellows, reds!

Old trees fallen over or evidence of beavers?

         

The beavers were here!

"Look-it!"

         

         

I took this photo because it had some strange white mouldy stuff growing on it and that seemed odd. :)

Walking so sweetly down the path!

                               

Beauty everywhere!

           

Wildflowers! Annalise thanked God for these today! 

Again, such beautiful colours!

           

Stopping to smell the flowers. :)

           

Loved this view - the colours and reflections!

I will have to draw these at some point! :)

           

The glee with which they run! :)

        

Silly antics at the top of the hill! :)

                         

Continuing their exploration run! :)

                           

                           

This sign made me laugh - considering the green grass around it. :)

Acorns!

     

Oak Tree!

                             

What amazing nuts, really!

Emilie enjoyed the slides!

                           

Ducks!

                           

Emilie's Nature Collage

A collection of nature samples

Annalise's Nature Collage