|
How to Create
an Adoption Button For Your Blog
(If you get stuck,
feel free to
contact me )
-
Choose a
picture
-
Add text using
your favorite photo editor. Ask a friend if you need help with
this step.
-
Resize the
picture to fit nicely on a web page. 120x120 pixels is a good
size. Remember it needs to fit on other’s blogs without being
invasive.
-
Go to
www.photobucket.com and create an account. (You need to
have your picture hosted online somewhere for your button to
work.)
-
Login to
your new account
-
Click on
Choose Files button. A new window will open.
-
Browse to
the image you just created and click Open.
-
Scroll
down to the image on your main photobucket page. Click
Share.
-
Click on
the “Get link code” tab
-
Copy the
entire line under the “Direct link for layout pages” title.
It should look something like this:
http://i243.photobucket.com/albums/ff316/shaneandmegan/AdoptionButton.jpg
-
Using the
following HTML code as a reference:
<a href="http://yourblog.blogspot.com"
target="_blank"><img border="0" alt="Hoping to Adopt" src="http://www.photobucket.com/yourimage.jpg"/></a>
-
Replace
http://yourblog.blogspot.com with your adoption website or
blog address.
-
Replace
http://www.photobucket.com/yourimage.jpg with the address
you copied from photobucket in step “f” above.
-
You now have
the final code to pass on to friends and family. Make sure you
keep it as one continuous line to avoid problems. You can email
this code to friends and family, post it on Facebook, or put it
on your blog. Here is the Facebook post I made as an example:
Any of you that would like to add our adoption button to your blog,
copy and paste this code into an HTML gadget in your blog layout:
<a href="http://www.meganandshane.com/" target="_blank"><img
border="0" alt="Hoping for Another Miracle!" src="http://www.meganandshane.com/MiracleButton200x120.jpg"/></a>
Thanks for helping us spread the word!
·
Optional: To make it easy for friends and family to add your button,
here is example code for putting an HTML gadget on your blog with a
text field containing your button code for easy copy & paste (Change
bolded areas to match your button):
<h2 class="title">Add Our Adoption Button to
Your Blog!</h2>
<a href="http://www.meganandshane.com/"
target="_blank"><img alt="Hoping to Adopt" src="http://www.meganandshane.com/MiracleButton200x120.jpg"
border="0" /></a>
<pre>
Copy and paste the following code into an HTML
gadget in your blog layout:
</pre>
<pre>
<textarea rows="4" cols="22"><a href="http://www.meganandshane.com/"
target="_blank"><img border="0" alt="Hoping for Another Miracle!"
src="http://www.meganandshane.com/MiracleButton200x120.jpg"
/></a></textarea>
</pre>
It will look something like this in your sidebar
Add Our Adoption
Button to Your Blog!
Copy and paste the following code
into an HTML gadget in your blog layout:
|
