How to Create a Blog Button with HTML Code Box

Last week I showed you How To Make a Blog Button the Easy Way using the online photo editing tool PicMonkey.

Now that you have that awesome blog button, you need to add some HTML code to it so you can post it on your blog.

Want people to be able to grab your button too, like this?

<a href="http://ellisonlane.blogspot.com" target="_blank"><img alt="Ellison Lane Quilts" src="http://i1127.photobucket.com/albums/l623/ellisonlanequilts/buttons/elqbuttonwords125.jpg"/></a>
No worries! I've got you covered. Here we go.

To add your blog button to your sidebar in Blogger, you simply go to your Dashboard, Design, Add a Gadget, click on Picture, upload your blog button from your computer and insert your blog url in the box provided.

Now, to make a blog button with a grab box of code, follow me. 

First things first. Upload your button to Photobucket.

Once you do that, click on the link on the right that says "Direct Link." It will turn yellow and tell you it copied your link for your button. You should paste it into a word document to have it on hand. 

Now, copy and paste the paragraph below into that new word document.

<div align="center"> <a href=”IMAGE DIRECT LINK” target="_blank"><img

alt="NAME OF YOUR BLOG" src="IMAGE DIRECT LINK"/></a> </div> <div

align="center"> <form><textarea rows="6" cols="20"><a href="URL OF YOUR BLOG" target="_blank"><img alt="NAME OF YOUR BLOG"

src="IMAGE DIRECT LINK"/></a></textarea></form> </div>

Now, CAREFULLY, change the colored sections into the appropriate text or links. Be careful people because if you add a space or delete something, the code won't work. Keep all characters, including quotation marks, in tact!

IMAGE DIRECT LINK: this is the Direct Link you cut and pasted from Photobucket.
URL OF YOUR BLOG: example: http://ellisonlane.blogspot.com  (be sure to include the http://)
NAME OF YOUR BLOG: Ellison Lane Quilts (obviously use your own but you can and should use spaces here and only here.)

Your code should now look like this:

<div align="center"> <a href=”http://i1127.photobucket.com/albums/l623/ellisonlanequilts/buttons/elqbuttonwords125.jpg” target="_blank"><img

alt="Ellison Lane Quilts" src="http://i1127.photobucket.com/albums/l623/ellisonlanequilts/buttons/elqbuttonwords125.jpg"/></a> </div> <div

align="center"> <form><textarea rows="6" cols="20"><a href="http://ellisonlane.blogspot.com" target="_blank"><img alt="Ellison Lane Quilts"

src="http://i1127.photobucket.com/albums/l623/ellisonlanequilts/buttons/elqbuttonwords125.jpg"/></a></textarea></form> </div>

Now, that looks like a bunch of gibberish but once you cut and paste that into HTML, then you will have this: 

<a href="http://ellisonlane.blogspot.com" target="_blank"><img alt="Ellison Lane Quilts" src="http://i1127.photobucket.com/albums/l623/ellisonlanequilts/buttons/elqbuttonwords125.jpg"/></a>

Awesome, right? 

So, now what to do with that? Well, you can insert it in a blog post as I have by pasting that code you created into the body of the blog post.  First you must click on the Edit HTML tab and then paste the code into the body of the post. Then switch back over to the Compose tab. 

To add this button to your sidebar in Blogger, go to your Dashboard, Design and Add Gadget. Click on Add HTML and in the box that opens, paste the entire code you created. Click SAVE and then you can preview it on your blog and move it to the perfect location on your sidebar.

If someone wants to grab your button, all they need to do is copy the code in the box and paste in an HTML gadget and they're all set.

You now have your very own blog button with a grab box. Way to go! Be sure to upload it to the Inspired By Ellison Lane Quilts Flickr Group because I would LOVE to see it.

Be sure to check out Part I of this tutorial: Making a Blog Button the Easy Way!

PS: Did you enter The Intrepid Thread giveaway?
xo,
Jennifer