Tutorial: HTML Button with Code Box for Sharing!

Well I have wanted to add a Blog Button like the one seen above to my blog and I wanted it to have a code box attached beneath so that others can post it to their blog easily. I searched for quite some time to figure out how to do this and I used these two links to help figure it out:

1. Zakka Life
2. This forum post

I then had to figure out how to make the code box smaller so that it would fit in my sidebar as the code for the "code box" was making it too wide. I thought I would try to compile a tutorial here to show all the steps I took to do this. Part A. shows you how to create your customized code for your button. Part B. shows you how to use that customized code to create a code box below your button so others can have access to your code to copy and paste on their blog.

Part A. To create the code for my button:

First I selected an image and uploaded it to photobucket.

then I followed the steps outlined in Zakka Life's tutorial as follows:

click on the photo in photobucket that brought up this box (seen in image above) at the bottom right of the screen. I then copied the HTML code seen highlighted in blue.

Then I pasted it in a blank "Word" document. I replaced the highlighted part (see image above) with my blog URL address.

and replaced the highlighted portion above with my shop name.

So the final customized button code looks like this (see image above).

Part B. Create your code box

Now you have to get the code to for the actual "code box" shown here: (See image below)

I pasted this into the same word document just below the previously edited code for my button. I pasted my button code in place of the blue highlighted code seen above.

Then I had trouble getting the code box to fit in my sidebar so I had to figure out how to make it narrower. For this I just tweaked the number shown above in blue (I made mine 15) and it fits fine.

Once again here is the entire final edited code above as seen in my word document once all editing was complete.

Finally I went to my blog and went to "Layout" and clicked on "Add a Gadget" in the right hand sidebar then scrolled down until I reached "HTML/JavaScript" and then I copied the code from my word document pasted the final code (both parts) into the "Contents" and clicked SAVE!

POOF there it is in my right sidebar! I spent two evenings figuring this all out so to save others time I thought I would share my learnings.