Creating a Blog Button

<center> <a href="http://mothers-who-know.blogspot.com/"><img border="0" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoCANXCH5iOq5ADw7wp03DOYzW3KNzVn-KOe-p9nibV1Lq0zRoqEwUGhOC4yW2czlGmy32XTNn-UP9i0QsytqJosYwGc0Ig3TTWOhEfcRGmNlsN7K0Dv2PPQJ-QkQ_HZyst8nlJBjjB128/s1600/Pictures1-1.jpg " /></a></center>

Are you interested in creating your own blog button??

Making a blog button with a code underneath is not as hard as it looks. 

FIRST: Like with my whole blogging journey I turn to google for help.  I typed in a search "How to Create Blog Button"  Several tutuorials popped up and then it was a matter of time trying to find the right tutorial for my brain to understand.  I found it!  Here is the  {link}  I followed that really close. 

This takes time, concentration, and willingness to learn from mistakes until you figure it out.  It might take you a few tries until you can get it exactly right and how you want it.

 I think it took me three. 

I am sure there are many ways to do this... and probably better ways...but this is what worked for my brain! 

Your blog button image:

1. Choose your button image
2. Choose a photo editing site.  I use Picasa, and will just refer to them as a reference, but any photo editing site can do this for you.

Ok you have that part?

1. Upload your photo image to Picasa
2. Select your photo
3. Click collage

While creating your collage, don't worry at this point on the size of your picture.  You will tweek that later on. 

• Click "Create collage"

  This will then send you to the text editing page.

• you can select what ever kind of text you would like for your blog button. In Picasa it recognizes all of your fonts and you can really get creative with your text on your picture. You can make it all the same size and text, or you can have each letter different or how ever you like it.
• Crop your picture so the only thing you see is just the picture, no extra white around it, except for any picture border that you want.

When you have your blog button picture how you like it, click "Apply"

• Click the EXPORT folder on the bottom taskbar
• This will send you to the page where you can select the size of your picture.  They recommend 125 X 125.  This is the area I had to tweek a few times until I had it how I liked it.  125 X 125 was too small for my button.  You want it to be small so that others will want to put it on their blog, but not so small that you can't read the text.  Mine ended up at 180 X 180.
• Now click the export button --this will send it to your computer picture file where you can store it

Creating the code: Part 1

• Start a new post on your blog--you will not publish this, but will keep it as a DRAFT
• Upload your new blog button from your computer picture file
• On the LEFT, top corner of the post you will see two buttons: COMPOSE & HTML. 
•  Click on the HTML button.  There you will see a code...you will use part of this code to make your blog button code.  For right now, leave it alone, we will come back to this.

Creating the code: Part 2
For this part, you will need to open up a blank page in your documents.  This will give you a place to work on your code.  Copy and paste the code below.  Any mistake or deletion of any kind will mess up your code. Don't leave off any back slashes, quotation marks..nothing.

Copy and paste {this code}

Here are the changes you'll need to make to the above code to create a button with code underneath for your blog:

Step 1: In the two locations where you see the name of the  blog, Between Naps on the Front Porch in purple, replace that with the name of your blog. It’s okay to type it with spaces just as you see mine written. Remember, you don’t want to accidentally erase the quotation marks.

Step 2: Where you see the blog addresshttp://www.betweennapsontheporch.blogspot.com/ written in red in two places, replace that with your blog address. You can copy and paste it from the address bar when you bring your blog up on your computer. 

Step 3: In the two locations where you see the blue code, replace that code with the HTML code from your blog button post above.

Once again, you won't need the whole code.  The code you need is the code that starts with http and ends with .jpg. I’ve highlighted it in blue below on my image code. Yours should be located in about the same spot on your image code in the html view.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPavd8_u3hZSd6JSelrfMGz1k8SpDIcTEJTgoz1lwqRuQdjDsuieo2dgubT1yYyT37RA1VA13kTLK8VYqvitcxEaWQTmLbEYdk23oAhCg_wKjNZYds5oupj7GViG6ZVI7ZD-OHhDbgmcHk/s400/Chair+on+right+like+header.jpg" style="cursor: hand; display: block; height: 125px; margin: 0px auto 10px; text-align: center; width: 125px;" />

Copy just that section of your image code from the html view of your draft post and paste it into the two places where you see the blue code for my blog button, replacing my code with yours.

That’s it…you now have the code for your blog button. Save this in your word document where you can find it when you need it.

Step 4:

Copy and paste this whole new code into yout HTML/javascript on your add a gadget side-bar.  If you have a test blog you can try it out on there first to see if it what you want.

 Now you have a blog button that represents YOUR blog  with a code underneath for others to share your blog from their site.

<center> <a href="http://mothers-who-know.blogspot.com/"><img border="0" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoCANXCH5iOq5ADw7wp03DOYzW3KNzVn-KOe-p9nibV1Lq0zRoqEwUGhOC4yW2czlGmy32XTNn-UP9i0QsytqJosYwGc0Ig3TTWOhEfcRGmNlsN7K0Dv2PPQJ-QkQ_HZyst8nlJBjjB128/s1600/Pictures1-1.jpg " /></a></center>  

YOU DID IT! Do a victory dance.  You deserve it.