The Magic Code: How to make a button with code underneath

I love to make buttons.  I spend way too much time playing on Scrapblog.com and fiddling with my buttons.  Here are a few I’ve made.






One of the questions I am asked most frequently by you all is how do you make a button with the code underneath?  So today, I will reveal to you….the secret code.  I’m not going to go into how to make the actual button today, but I will tell you try to make it as square as possible in whatever program you’re using.

1.  Do you have a photobucket account?  If not, open one.  
2.  Upload your button to your photobucket account.
3.  Figure out how to click edit which is not at all intuitive and always takes me forever to do.
4.  Crop your picture and get it down to 125×125, if that’s the size you want.
5.  Save your pic.
6.  You’ll see all these codes to the left of your pic (or underneath it depending on the page you’re on).  You’ll want the direct link one.
7.  This is the magic code below.  What you’ll do is plug in your photobucket direct link code of your picture where I’ve highlighted in yellow.  You’ll put the link to your blog, or the post you want, where it is highlighted in blue.  That’s the only thing you’ll change in the code.  
8. Open your blogger layout.  On your sidebar, click add a gadget, choose 3rd party html from your options, and then plug in your code!  Voila!  A button.   
9.  If it doesn’t work, or you have more questions, just holla!  Happy button making!  (Oh, and if you don’t want your button to be centered, just delete all the “center” words below.  There are four of them to delete.)

****Vignette Party is NEXT Wednesday, March 31st! I didn’t realize there was yet another Wednesday in this long month. Get your mantels, tables, windowsills, consoles, hutches, flat surfaces ready and come back and link up!****
Home Stories A to Z on Facebook Home Stories A to Z on Twitter Home Stories A to Z on Pinterest =

Parse error: syntax error, unexpected '}' in /home/homestor/public_html/wp-content/themes/headway-2013/library/core/functions.php(90) : eval()'d code on line 1
24 Responses to The Magic Code: How to make a button with code underneath
  1. Debbie
    March 24, 2010 | 11:28 am

    It seems pretty easy. I tried when I first asked you, but I did not know all the code stuff…I wound up having mine made….but this helps for the future button I may want to make….Thanks:)

  2. Carmen
    March 24, 2010 | 11:59 am

    You are so tech savy!! I still need to figure out how to make a button but I will bookmark this for later. Thank you for this tutorial!

  3. Jennifer
    March 24, 2010 | 12:08 pm

    I totally bookmarked, too! Someday I'll work my way up to a button.

  4. Pink Princess
    March 24, 2010 | 12:23 pm

    Bookmarked this too, just in case I might need it one day :)

    Huhs

  5. Amanda @ Serenity Now
    March 24, 2010 | 1:10 pm

    Thanks, Beth! I found a tutorial awhile back, and it was great for teaching how to get the code for a button, and I was able to make a box to go underneath, but the "copy" portion of the box code wouldn't work. I'm going to try your way. :)

    Did you do a tutorial on making buttons in Scrapblog? I've used it for a blog banner before, but never for a button. Do you have to choose a special size to make the button in Scrapblog?

  6. My name is PJ.
    March 24, 2010 | 1:39 pm

    This was unbelievably nice for you to share, Beth! It's part of what we all love about you. You make beautiful things and you explain how we can make them ourselves.

    Thank you for doing that!!

  7. Chris
    March 24, 2010 | 1:43 pm

    I followed it to a "T" :) , and it worked perfectly! You're so smart!

  8. MOM OF 2
    March 24, 2010 | 2:25 pm

    Thanks for the help. I must be a moron..I can get the button and when I click on it on my page it comes back to my page, but I can't get the little box underneath…help…what did I do wrong?

  9. Kat @ measuring my life in l-o-v-e
    March 24, 2010 | 2:28 pm

    Thank you for the tutorial – sounds easy peasy, can't wait to try it out!

  10. Wendy
    March 24, 2010 | 4:28 pm

    Great tutorial! You explain it so well, I might actually be able to attempt! Thanks :)

    Wendy

  11. Jenglamgirl
    March 24, 2010 | 8:02 pm

    I CAN'T stand when I can't do something… grrrr… I have tried numerous times from many tutorials on how to make a button. I've made buttons and I upload them to photobucket.. I still for the life of me can't get it! I know if someone walked me through it.. I would feel like an idiot.. because it was that simple, but I just can't do it. GRRRR AGAIN! where do you get that full code you are showing? sighhhh, its not you… its dumb ol' me! ;(

  12. Jemsmom
    March 24, 2010 | 8:49 pm

    You go, MIss Technologically Savvy, girl!!!!! I am so not there yet!!!

  13. Destination Seaborn
    March 24, 2010 | 11:44 pm

    Thank you dear Beth for this tutorial! I have been wanting to make a button and for the life of me cannot figure it out! Your directions are great. Hopefully I can make it work!
    ((Big Hugs))Lisa

  14. Craftify It!
    March 25, 2010 | 4:58 pm

    I wish I had your talent! I did make my 1st button for my clock blog, but it is nothing fancy!

  15. Candace@craftysisters-nc
    March 25, 2010 | 7:33 pm

    I will have to open a photobucket account and try making some buttons. I really need help in those areas, so thanks for the info!

    And, your spring arrangements are oh so lovely! :)

  16. pk @ Room Remix
    January 24, 2011 | 8:28 am

    Thank you so much for the tutorial, Beth! I just followed it and it worked great! It was so kind of your to share it – much appreciated. :-)

  17. Laurie@TheBakingBookworm
    August 12, 2011 | 10:08 pm

    YOU ROCK!! I had my button all made and it’s code but couldn’t figure out how to make the code box. I couldn’t, for the life of me, figure out what ‘my code’ was supposed to be to make it a link. Thank you so much!!! :)

  18. Carol-Anne (Use The Good Dishes!)
    August 13, 2011 | 2:43 pm

    So I’ve been feeling like a loser because I just couldn’t understand ANY of the tutorials I read on how to make and post a button….until I saw Just a Girl’s post, which then directed me to your post and now I’ve done it! Hurray! I now feel really grown up and tech savvy!

    Hah!

    Thanks for taking the time to post this! I really appreciate it!

  19. Rachel
    August 13, 2011 | 4:39 pm

    I must have done something wrong. Can you help?

    1. After I add the code as a gadget the picture says “this image has been moved or deleted-photobucket” (but the image is still there in my photo bucket account)

    2. When I put the code into a post for readers to grab and share it just shows the blank box and the picture doesn’t load.

  20. Bethany
    August 13, 2011 | 9:48 pm

    I want to thank you so much for this tutorial!!! It took me a few times to get it right, but now, thanks to you, readers can get a button from my page to put on theirs!!!! I’m so excited now!

  21. Liz F
    August 28, 2011 | 3:14 pm

    Thanks for sharing! I’ve been trying to do this for a while and your “magic code” finally made it work!

  22. Jody
    January 4, 2012 | 10:34 pm

    Thank you so much for sharing this. I am in desperate need of a button, but must be a complete idiot on getting it to work or maybe should be in bed (its only 1030p). I can’t seem to get a picture to show only the link to add my button. Any suggestions?

    • JoAnna
      March 15, 2012 | 1:48 am

      Did you ever get your picture to show up? I am having the same exact problem, if you could help that would be great!

  23. Skye
    February 20, 2012 | 10:52 pm

    Thank you SO much for this! Way easier to follow than some of the other tutorials out there and I was able to achieve it with little stress. [:

Leave a Reply

Wanting to leave an <em>phasis on your comment?