Bloggy Help:

 photo socialmedia_zps413c1040.png  photo helpdeskbutton_zpsb16b6c42.png  photo instagram_zps73b3c07a.png  photo header_zps97df3d3e.png  photo needamakeover_zps6d19d8a9.png

How To Add Button Code & Code Box To Your Blog



Learn to add button code and a grab box to your blog!



Above: Here's an example of a button with a code box beside it.

If you want to watch a video of this process click here. This is a more intermediate skill level.

Create a Button for your blog using our tutorial here (updated soon!)

Learn how to place a button from another blog into your sidebar.

You will want to create a Photobucket account if you don't already have one. Photobucket is a handy tool to keep your blog images on...you can also use Blogger's Picasa or other image hosting service.

Upload your new button (.jpg or .png) to Photobucket and save.

When you hover your cursor over the button a box should appear (as shown above). See the options available? You want Direct Link to create your code.

If you click on the button image itself this will lead you to a larger page that looks like this, that essentially houses the same information (notice the Links in the upper right hand corner of the page below):

Now when you go to your image you can click in the box on Direct Link, now copy this code. It will look something like this:

http://i892.photobucket.com/albums/ac123/yourblogname/a6c27771.jpg

Next open a Text Editing page (do not use Word as this creates extra text in your code) to copy and paste your code into. I find Sticky Notes to be easy to open, there are many that are free on your computer already. Follow the directions below and paste into your text editor:

A. To create the button's link code (or a clickable image actually) for your blog you will need to take the code you just copied from Photobucket and paste it into this code where it is red. Where it is blue, copy and paste the link of where you want the button to link to:

<a href="http://www.yourblognamehere.com" target="_blank"><img src="http://i892.photobucket.com/albums/ac123/beautifymyblog/a6c27771.jpg"/></a>


B. To create the box below the button with grab code in it, paste your code and link into this code:

<textarea readonly rows="10" cols="20">
<a href="http://www.yourblogname.com" target="_blank"><img src="http://i892.photobucket.com/albums/ac123/beautifymyblog/a6c27771.jpg"/></a>
</textarea>

Now copy and paste all the code from Letter A. into the HTML gadget of your blog's sidebar. Click Save. Then check to see if your button has appeared. If it appears you may proceed to adding the code box.
Copy and paste code from Letter B. below the Letter A. code. It doesn't have to on the next line to work...but you can eliminate extra spacing. We like our buttons centered, so notice that we also added CENTER code - <center> open and </center> closed.
 Click Save. Your code box will appear beneath the button in your sidebar.
This is what ours looked like:



Above: This is what your Sidebar Code Box & Button area will look like.
Title it something funny, like - Grab My Button or leave Title blank.

Tip: If you want your code box to be larger or smaller just change the numbers in the code to the size you prefer...go up (or down) in increments to check how it looks. Always remember to Click Save. It is also "draggable" in the corner for users to make larger or smaller.

If you find glitches in these instructions please let us know and we will do our best to improve them. Good luck and happy blogging!

45 comments:

  1. Thanks Sarah, That is really great information and maybe sometime you could tell us techie challenged how to make a PNG file instead of a JPG, That would be great! Hugs, Marilou

    ReplyDelete
  2. PS Sarah, You are rapidly becoming my new BFF instead of someone named Sarah! Lol Thanks again

    ReplyDelete
  3. OMG! You are too funny!! HEE HEE!
    You would have a PNG if you created it as such (like in the button tutorial). If you have a photo you want to make the code for, you can do that too...it would probably be a JPG.
    It doesn't really matter in this case.
    You can use this coding method for any image you want HTML (direct link) to link with.
    Hope this helps!

    ReplyDelete
  4. Worked like a charm! Thanks a ton!

    ReplyDelete
  5. Yea! I did it. I'm so excited! Thank you, thank you, thank you!!!

    ReplyDelete
  6. It is late tonight and I getting ready to nod off but that id it for me, No I didn't try the PNG yet but will tomorrow and if it works then that is a done deal you Will be my BFF, I'll let you know tomorrow but I'm sure you made the cut!! Thanks BFF to be!

    ReplyDelete
  7. Thank you so much! I was trying to do this way to late last night and couldnt get it...woke up this morning and made my button, Done! Yay. Thank you!

    ReplyDelete
  8. Finally!!! I have a button, this tutorial worked perfectly, and I was able to follow directions.

    blessings,
    jilly

    ReplyDelete
  9. thank you so much for doing this tutorial! at last I have a buttton :)

    ReplyDelete
  10. What a fabulous tutorial. The best I've found - and I did it!!! Thank you from the bottom of my heart!!! Shalom ya'll!

    ReplyDelete
  11. Thank you, thank you, thank you! I've been trying to do this FOREVER and this is by far the easiest and best tutorial I've found, worked like a charm! Thanks a bunch!

    ReplyDelete
  12. SOOOO Helpful! I wish I had found you weeks ago! Thank you for sharing your knowlegde and not charging us for it!! ;P

    ReplyDelete
  13. I really can't even thank you enough for this super valuable tutorial. I just finished making my button, and I honestly don't think I could have done it without you! I could just hug you and cry!!! Thanks so much!!!!!!!!

    ReplyDelete
  14. It worked! It worked!!! I wrote my first official piece of code because of you gals and just blogged about it. Hooray!!! Thank you ladies.

    ReplyDelete
  15. Thank you so much I have been trying to figure out how to do this all week and it was sooooo easy.

    ReplyDelete
  16. Great information,
    can anyone tell me if you could use it on Facebook as well

    ReplyDelete
  17. THANK YOU so much for posting this...you totally helped me with something I should have done a LONG time ago!! :)

    ReplyDelete
  18. This is the ONLY tutorial that worked and made perfect sense. Thank you so much. My only question is that the code does not come up under the button just an other button comes up. what should I do?

    ReplyDelete
  19. Finally, the perfect directions to get me a button on my blog. Thanks so much.

    ReplyDelete
  20. Thank you sooooo much! I love you for this!! ^^

    ReplyDelete
  21. Thank you so much for this tutorial! I now have a button for my blog!
    Jo-Anna

    ReplyDelete
  22. Thank you! Just the tutorial I was looking for.

    ReplyDelete
  23. Worked like a charm! Thanks!
    Michael
    bluevelvetchair.blogspot.com

    ReplyDelete
  24. Woot! Woot! Worked like a charm...even for us "older folks" that are computer challenged! Yeah! Thanks ever so much!
    Kathy
    www.shawkl.com

    ReplyDelete
  25. Thank you so much for your tutorial! It was very helpful and super clear!

    ReplyDelete
  26. Thanks! It worked! Great tutorial!

    ReplyDelete
  27. omg YAY! it worked!

    thank you so much i was searching all over trying to figure out how to do this! i'd seen and admired them on so many blogs! Thank you!! <3

    ReplyDelete
  28. These were great, thank you so much! :)

    ReplyDelete
  29. Thank you! I have tried making my own button before following other tutorials but I was never successful. I am so excited to finally have made one.

    I'll definitely be bookmarking your site!

    Much thanks, Elisabeth

    ReplyDelete
  30. Thank you so much! I knew making a button had to be possible without hiring a "graphics god". Thank you for posting this!!!

    ReplyDelete
  31. Wow!!! YOur tutorial is simple and AWESOME!!!
    Thanks a million and my blog button is beautiful :)

    ReplyDelete
  32. Thanks for the tutorial it was very easy to follow, but now that picnik is closed down I used picmonkey :)

    ReplyDelete
  33. i have used this over and over because i seem to forget how to do this every time! my question this time is, is there an addition to the code that will have the link open in a new window instead of taking you to the link away from the current page?
    thank you !!! love your blog

    ReplyDelete
    Replies
    1. Briana! Yes, there is a way to have the link open in a new page:

      after the linking URL add this - target="_blank" - and remember to add your closing tag. Good luck!

      Delete
  34. I love, love, love you ladies! After just starting my own blog about a month ago, I realized that I also needed a grab button - before moving any further!

    I've followed your directions and everything seems to work perfectly - except for one thing - my Grab button is off on the right hand side of the margin.

    I've tried using the "center" coding like you had shown for Part B, in Part A, however, the button is still hanging off on the right hand corner (my code button below is thankfully not however!).

    I can't thank you enough for posting this. Seriously. I know nothing about code, have never worked with it and can't even believe that I have my own grab button (after a few hours of fiddling and following your awesome links and instructions!). I have a lot to learn, but thank you for it all...especially the reference to Photobucket and print screens you included regarding the code. I had never used that either - and now I'm off to the races!

    Enough babbling...but wondering if you can help me to understand what I may need to change to move my grab button back to inside the margin on my blog. Let me know if you need me to email you the code separately? THANK YOU, THANK YOU. This one post has changed my night and day!!

    Cortney (@organicallyopulent.com)

    ReplyDelete
  35. Hi! I am trying to do this by storing my button in a blog post (Picasa). I read where Photobucket will charge after so many clicks so I have been trying this way. When I put the code in for the box below the image, Blogger keeps deleting everything after the first line so I am getting a blank box without the code in it when I save and look at my blog. Thanks for the great tutorials.

    ReplyDelete
  36. I followed the directions...I thought! I've gone back several times to double check and redo. I have an image and a box, but no code in the box. When I go into my HTML gadget to edit (btw, using Blogger), the code I saved in there has completely disappeared. I'm a newbe! Thanks!

    ReplyDelete
  37. Thanks for the button code! I followed all the directions but somehow blogger just deletes everything in the code box. What should I do? help!!

    ReplyDelete
  38. Sarah,

    It is me again. :)


    Look what I stumbled on...

    http://www.mycoolrealm.com/sandbox/gbgen/

    This solved my empty code box problem!

    ReplyDelete
  39. Thanks for this, I NEVER would have thought to do it this way, I would have done it in some convoluted way! Took about 10 minutes to do two! :D

    ReplyDelete
  40. I'm a book blogger and I've seen the code boxes on reading challenge posts but never knew how to do them.
    Thank you so much for the understandable explanation!

    ReplyDelete
  41. Thank you so much for these guides! I'm not all that computer savvy but you guys really have made it easy to create and post these buttons.

    You've made my day!

    ReplyDelete
  42. I would like to watch the video on the blog button with the code beside it but it says the video is no longer available. Right now my code box is underneath my blog button. I'd like to move it beside. I was hoping the video would help? Thanks!

    ReplyDelete

Comments are how we stay connected as bloggers. Let us know how you feel and we'll return the favor...stay calm and blog on!!! And guess what? You'll never find Word Verification on our blog...it gets kind of annoying when you can't read what WV wants you to verify right?

Outbrain