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.

Beginner Bloggers: How to add a Twitter badge to your blog for FREE!

I have seen badges (buttons) on blogs that say "Follow Me on Twitter" and when you click on them you are linked to their twitter page. So I joined Twitter a little while ago and have been wanting to add a twitter badge to my blog but the dilemma is how to do it myself with minimal tech knowledge. So I searched Etsy and found a few badges but they were all for sale and I was wanting to do it myself for FREE.

Next On my quest I Google searched "twitter badges for your blog" and came up with several helpful tips and sources for free twitter badges.
I chose my free twitter badge from:

• Siah Design

but some of my other favorite sources for cute twitter badges included:

• Vincent Abri.com
• Limeshot.com
• Randa Clay Design

So the next step was how to use or set up the badge graphics so it would work on my blog.

Here is how I did it:

1. I chose my graphics badge here.


2. I right clicked on the graphic image that I chose and saved it to a file on my own computer.


3. Then I navigated to my Blog home page and clicked on "Customize" in the top right hand corner of the nav bar at the top of my blog.



4. Under "Layout" tab that opened up I clicked on "Add Gadget" for my right hand sidebar area.


5. Then I scrolled down until I found "Add Picture" and clicked on it.


6. This brought up the "Configure image" menu.


7. In another firefox window I went to twitter and clicked on "Profile" to bring up my personal twitter address and then I copied the address.


8. Back in the Configure image menu I titled the image "Follow me on Twitter", then I pasted the address I had copied from twitter into the box where it says "Link". Then I "Browsed" my computer for the saved image file I had chosen for my twitter badge (what I selected in step 2).



9. Here is what my "Configure image" window looked like when I was done.


10. All I did then was hit "SAVE" on the "Configure image" menu and voila I have my own functioning link to help others find me on twitter.


11. Last but not least I select "Save" on the "Layout" menu then select 'View Blog". The END!

*** This tutorial is for beginner bloggers with little tech knowledge like myself. I only hope this will save someone a little time and money. This tutorial is meant for Blogspot bloggers and I used Firefox as my web browser for the tutorial.