A nice young lady asked me to help her make a Blog Button, so I thought this would be a good learning lesson!

What we are going to do is use the image that I have created here to the left and turn it into a clickable button in a text box do that people can grab your button to put on their blog

First create the image, and upload it to a Blogger post, click the box for "No Layout" before you upload it. Save the post as a draft.

That will be the image that sits on your blog (Your personal image doesn't need to be clickable because it resides on the place that they are going to click to) so we won't add the blog link to yours.

To make a clickable image in the text box that you put below your personal image so that people can grab the code. Follow these steps:

We will be using the code for this blog's button for our example!

Take the image code, remove the blogger address (code highlighted in grey) that is in the first set of brackets You will keep the code that starts with <img...


<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKdYkaG4oIvSN5oeqPw7TVAHdgYOyhqArfokYDsP8kctZNEHffzbr2mUexmFj9sQFeSViIl0SuTQ3-kluMJAELdT4_6-MZ6JtdLtpPg8gakNlSB0krUqV34EQLkWYs_VT_OTcJ/s1600-h/Blogbutton.jpg"><img style="cursor:pointer; cursor:hand;width: 186px; height: 126px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKdYkaG4oIvSN5oeqPw7TVAHdgYOyhqArfokYDsP8kctZNEHffzbr2mUexmFj9sQFeSViIl0SuTQ3-kluMJAELdT4_6-MZ6JtdLtpPg8gakNlSB0krUqV34EQLkWYs_VT_OTcJ/s320/Blogbutton.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5415908285347859266" /></a>


In front of that code you will add the link for the place that you want it to click to...written in this format: <a href="URL of Blog"> (Added in the grey highlighted code).


<a href="http://howcanidothat.blogspot.com/"><img style="cursor:pointer; cursor:hand;width: 186px; height: 126px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKdYkaG4oIvSN5oeqPw7TVAHdgYOyhqArfokYDsP8kctZNEHffzbr2mUexmFj9sQFeSViIl0SuTQ3-kluMJAELdT4_6-MZ6JtdLtpPg8gakNlSB0krUqV34EQLkWYs_VT_OTcJ/s320/Blogbutton.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5415908285347859266" /></a>



Then wrap that whole piece of code in a textarea box, using <textarea name="HTML for Picture" rows="4" cols="20"> at the beginning....and </textarea> at the end.


<textarea name="HTML for Picture" rows="4" cols="20"><a href="http://howcanidothat.blogspot.com/"><img style="cursor:pointer; cursor:hand;width: 186px; height: 126px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKdYkaG4oIvSN5oeqPw7TVAHdgYOyhqArfokYDsP8kctZNEHffzbr2mUexmFj9sQFeSViIl0SuTQ3-kluMJAELdT4_6-MZ6JtdLtpPg8gakNlSB0krUqV34EQLkWYs_VT_OTcJ/s320/Blogbutton.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5415908285347859266" /></a></textarea>


The rows...and columns (cols) can be changed to change the height and width of the box.

Then take the original code that you got when you uploaded the image, and add the textarea box underneath it, and viola! It comes out looking like this on your blog:



<a href="http://howcanidothat.blogspot.com/"><img style="cursor:pointer; cursor:hand;width: 180px; height: 122px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwBckeA1fiVtIBHG612Jt2mSQid7LGkoD1rSsNHeBxQ9HPbstW7-KsX5IriUS2mXGHa5jtracsNVMcaDD8ibIrKK-Y28nG9HrI6B9yXzZNE4m1aHRDMtII5Spr_u0dJKW9n6Cm/s320/Blogbutton.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5415917550402078946" /></a>