I have managed to avoid all sorts of housework in my obsession to create this little darling.
For you my friend. I will boil it down to three easy steps.
Number 1 - Create a 150 by 150 pixel button. Make sure the writing covers the entire area or it cannot be read. I uploaded to google plus and used their photo editor.
Number 2 - Create a post on your blog which will never be published. Well you can publish it. However, the purpose of the post is to upload the button using the WYSIWYG part of the post. Then switch to HTML to get the URL of the post on blogger.
For example: The HTML for my button is
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-Of9CFRzSPao/UQvd2fGERSI/AAAAAAAAD50/ngrxxW9thag/s1600/DSCN0029.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-Of9CFRzSPao/UQvd2fGERSI/AAAAAAAAD50/ngrxxW9thag/s1600/DSCN0029.jpg" /></a></div>
<br />
The URL for the button is listed twice in the code. I highlighted the first instance in orange and the second time in green. You only need to copy the URL once to insert later in the Grab Button Code.
Number 3
I used the code from the following website, Calamity Anne's Adventures.
Her site also tells how to create the button using photobucket. She does a good job explaining. She is short and to the point. However, it is not so short that information is left out.
This is the code.
<center><a href="http://YOUR WEB ADDRESS/" target="_blank" title="BLOG TITLE"><img alt="BLOG TITLE" src="http://IMAGE WEB ADDRESS"/></a> <center>
</center>
<center><textarea id="code-source" rows="3" cols="13" name="code-source"><center><a href="http://YOUR WEB ADDRESS/"><img border="0" src="http://IMAGE WEB ADDRESS"/></a></center></textarea></center>
</center>
<center><textarea id="code-source" rows="3" cols="13" name="code-source"><center><a href="http://YOUR WEB ADDRESS/"><img border="0" src="http://IMAGE WEB ADDRESS"/></a></center></textarea></center>
This is the code I used for my button.
<center><a href="http://annbennett2.blogspot.com/" target="_blank" title="So Much To Choose From"><img alt="So Much To Choose From" src="http://2.bp.blogspot.com/-Of9CFRzSPao/UQvd2fGERSI/AAAAAAAAD50/ngrxxW9thag/s1600/DSCN0029.jpg"/></a> <center>
</center>
<center><textarea id="code-source" rows="3" cols="13" name="code-source"><center><a href="http://annbennett2.blogspot.com/"><img border="0" src="http://2.bp.blogspot.com/-Of9CFRzSPao/UQvd2fGERSI/AAAAAAAAD50/ngrxxW9thag/s1600/DSCN0029.jpg"/></a></center></textarea></center></center>
Mucho Gracias, Calamity Anne. I read so many examples today and then I found you. I created the button with code but the text box was not that easily found. Thanks.
Too cool - I've been wanting to learn how to do this. I looked for other posts to figure it out, but yours seems to be more detailed. I will get on it in the next few days. If I have any problems I wonder if you would be open to questions. Thanks for posting this.
ReplyDeleteI would be glad to help. It took me all day of trial and error to puzzle it out. After making so many mistakes, I can do it now for sure. lol.
Delete