Tuesday, January 6, 2009

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.

33 comments:

Little Lovables said...

Thanks fo this! My code box is broken, so I need to do a new one and this will help out tons!

LoopsDesigns - Sarah Dible said...

Your welcome.

Pfeiffer Photos said...

Thanks, I'll look into this!

Journey on! by Kelleye said...

OOhh cool blog- -Tara @ pigtails got me on to this place- love it!

LoopsDesigns - Sarah Dible said...

Thanks Kelleye! Your family is adorable!

Girly Do's said...

So I found your blog just because I was trying to figure out this whole button thing. Yours has been the best explanation. Thank you!!! Mine is still having problmes. The code can not be highlite, but I think if I spend a little mroe time on this I can figure it out. Thank you for the help.

LoopsDesigns - Sarah Dible said...

Girly Do's; I tried to make the code available on my tutorial but as soon as i put it into the paragraph it disappeared and the code box appeared. I could not get it to quit behaving like code and just be text for those that needed to copy it. the code is available here in highliteable form here.
http://www.trap17.com/index.php/html-tag-code-box_t26398.html
Copy it from this forum thread and paste it into word document to do to do your editing.

Hope this helps!

All the code in my tutorial is provided by screen shots (photos) that is why it is not highlighting for u.

Bella Casa said...

You're awesome! I will be back later to figure this out for my 2 blogs!

Bella
Bella Casa blogs

Alicia said...

Oh my gosh..you rock!! I was looking around all morning trying to find clear instructions!!! Thank you!

Sedie said...

Thank you for sharing this information. I've seen these button boxes on several blogs and wondered how to make them. I haven't had time to do the research, then I found this. I really appreciate your generosity in sharing.

momstheword said...

Wow. You are awesome. I looked all over trying to figure this out and couldn't. I guess I need to figure out what I want my button to look like first. I have no clue. Thanks for posting this. You are so sweet to be so helpful.

You mentioned Photobucket? Is that something that's free? I have no idea how to even select an avatar or whatever it's called.

Did you do your three columns yourself? I have thought about doing mine but I keep reading that people did it and lose everything so I am afraid to try it.

Anonymous said...

Thank you for this, I have been trying to figure this out for so long it's embarrasing. Your instructions are really easy to follow.

LoopsDesigns - Sarah Dible said...

You are all welcome!

Momstheword: Yes photobucket is free and it is just a place to store and share your photos online! It allows you to copy code for your photo for HTML use. You can also use it to edit and re-size your photos for online use.

Scrapping Servant said...

Thank you SO much! I have been looking for coding for a box or table that could hold coding in it forever!!! We actually I gave up a while ago and recently found you from Alicia at More than Words :o)

God bless you!

sundownbeaddesigns said...

You're the bomb!! I used your instructions to make a button for my blog...it worked like a charm!!

Thanks

Alicia said...

THANK YOU! This was the most simple tutorial on this! Thank you Thank You!

http://theladyisablogger.blogspot.com

Sam said...

Thank you so much for sharing this information. I will trying to figure out this whole button thing.

Adore Design Studio said...

Thank you! I've never written html before and I had mine up and running in like 20 minutes! Great tutorial! Saved me lots of time and drama!

Miss V said...

This was SO helpful! Thank you so much! I had the same problem with the text box being to large for the sidebar and your tutorial helped out a ton! Thanks again! :)

Debbie said...

Thank you very much. This save me lots of time.
Debbie
www.sweetdogorganics.com

Renee' said...

Thank you so much, a friend sent me here and its fantastic :)

Collette@Jesuslovesmums said...

Your tutorial was spot on and so easy to follow! It really is simple when you know how isn't it?
Love Collette xxx

Maria said...

Thank You For Your Toturial. I do with my glittering image code at http://blingee.com.

Kelly @Tabithas-Team said...

You just saved me a LOT of time - I was trying something much more complicated - Thanks!

Keralapressassociation said...

Tnx alot..........very usefull information!!

Lanie Ree said...

I wish I had found this sooner! I just spent 5 hours trying to make a button. 5 HOURS. And then literally 5 minutes after I stumbled across this on google, I had mine up and going! Thank you so much!

Anonymous said...

Если кому интересно, лучший способ обезопасить себя от назойливых телефонных звонков - приобрести Подавители мобильных

Liz said...

WOW! Thank you so much! I got it all done in less time than it took me to make a post. You are awesome for sharing this information! :)

Liz
Loving This Mom Stuff

Ali said...

Thanks a billion! That was easy enough, once I saw how to do it.

Ali

RoseMarie Massaro said...

I just randomly found this tutorial through a search and I can't thank you enough for it! It was the only one I found that included the button AND the code box and it worked! It's amazing this info isn't easier to find these days! Thanks again--hope your son is doing okay!

Amy @ Journey Mum said...

Thanks for sharing this, I found you through a google search on how to add my blog button and code. You'd think it would be easier to find!

Lisa said...

Thank you so much for this tutorial! I've been searching how to do this all day!

Melissa said...

Thanks for this tutorial!
www.pathb4me.blogspot.com

LinkWithin

Related Posts Plugin for WordPress, Blogger...