How to Make a Blog Button

Would you like to create a blog button with a grab box underneath, so your blog friends can grab your button to display on their blog?  A blog button with the button code displayed underneath is a quick way for those who read your blog to capture your blog button to display on their sidebar, giving them a quick link back to your blog.

Creating a blog button can be a bit tricky.  When I first learned how to create a button with the code underneath, it took me several tries before I finally got it to work.  The directions I found back then were not real clear.  It really isn’t hard but it can be confusing when you first attempt it.  I’ve broken it down into a few easy-to-follow steps, in case you would like to make one for your blog.

First things, first:
There are two things you must have prior to creating your blog button

1. An image you want to represent your blog


2.  A place to “host” or store that image.

The Image:
If you’re handy with Photoshop or some other photo editing site (you’ll find a list of them HERE) you may wish to create your own button image.

When making the image that will act as your blog button, you don’t want it to be too large because that could discourage folks from taking it to display on their blog or sidebar.  Usually 125 x 125 pixel image is a nice size for a blog button.

A Place to Host or Store the Image:
Once you have the image/picture that will represent your blog, it will need to be hosted some place.  Just as the photos you upload to your blog are stored or hosted on a server somewhere (images on Blogger blogs are hosted at Picasa,) the blog button you post on your sidebar for others to take will need to be hosted or stored some place, too.

If you blog on Blogger, I have found the easiest place to host images is with Picasa, since that’s the same place the pictures you use on your Blogger blog are hosted.  The easiest way to have your blog button stored or hosted in Picasa is to create a “draft” post, and upload the button image to that post.  You’ll never actually “publish” the post, it will remain a “draft” post forever because there is no need to actually publish it.  You just need it stored somewhere and Picasa will do just fine.

There may be another way to host a blog button in Picasa without creating a draft post, but this way has worked well for my needs.  It’s the same place I host the Metamorphosis Monday and Tablescape Thursday party buttons.  I have one “draft” post saved in Blogger where I upload all the button images I need to host.

You can also upload/host your button image with Photobucket but after the button has been taken and placed on a lot of sidebars, you’ll get a notice that you’ve exceeded your bandwidth/storage space with them and they will start billing you.  I know because it happened to me.  That’s why I store my button images in a draft post with my blog host now.

Important:  If you create a draft post for storing your blog button and future party buttons, make the title of the post “DON’T DELETE:  Blog and Party Buttons” or something that will prevent you from ever accidentally deleting the draft post.  If you accidentally delete the draft post, it would remove your blog button from any place it had been posted.

Next Step:
So, you’ve created your draft post and you’ve uploaded your 125 x 125 jpeg button image to it.  Now you’re ready to create the code.  Don’t be intimidated…it isn’t that hard.  Promise.

Here’s how:
Open a word document and copy and paste all the code you see below onto the document.  You’re going to be making some changes to the code, so copying and pasting it to a word document just gives you a place to work on it. So, let’s get started.  Go ahead and copy and paste all of this code to a word document…I’ll wait.

<center><a href=”YourBlogAddress target=”_blank” title=”Between Naps On the Porch“><img alt=”Between Naps On the Porch” src=” /></a><center>


<center><textarea id=”code-source” rows=”3″ name=”code-source”><center><a href=”YourBlogAddress><img border=”0″ src=” /></a></center></textarea></center></center>


IMPORTANT:  I’m also showing my code below because WordPress does weird stuff and turns the quotation marks backwards when you copy code in to the Visual side of a post.    When you copy and paste the code above, you’ll see quotation marks going backwards.  Arrggg.  So, click on the picture below to enlarge it for a better view and make sure your quotation marks in your code are turned the same way as what you see below.

Okay, got that done?  Now, it’s very important to follow the directions carefully for this process to work.  If you accidentally erase a set of quotation marks or get a character out of place, your button will not work or look as it should.  Unfortunately, with code there’s not much room for error.  If you should accidentally delete something, don’t fret.  Just start over and give it another go.

Here are the changes you’ll need to make to the above code to create a button with code underneath for your blog:

Step 1: In the two locations where you see the name of my blog, Between Naps on the Porch in purple, replace that with the name of your blog.  It’s okay to type it with spaces just as you see mine written.  Remember, you don’t want to accidentally erase the quotation marks.

Step 2:  In the two locations where you see the blog address for BNOTP written in red, replace that with your blog address.  You can copy and paste it from the address bar when you bring your blog up on your computer.  Again, don’t leave off the forward slash or any of the other parts of the address and don’t add any stray marks.   Just keep referring back to the code above that represents my blog button to see if you’re leaving anything out.  You just want to replace the part in red with your blog address.

Step 3:  In the two locations where you see the blue code, replace that code with the code that represents  your button image.  How do you get this?

Here’s how:
Open up the draft post where you’ve uploaded/stored your blog button image, just as if you were going to “edit” the post. Flip from the “compose” view over to the “html” view.  Have you ever visited the html view of your posts?  If not, it will just look like a bunch of code…similar to the code shown below.

The code you need is the code that starts with http and ends with .jpg and is located in the lower part of the image code.   I’ve highlighted it in blue below on my image code so you can about where you’ll find it in your image code.  (Note: there are two sections in the the image code that start with http and end with jpg.    You want the second one…see where I’ve highlighted in blue below.)

Copy just that section of your image code from the html view of your draft post and paste it into the two places where you see the blue code for my blog button, replacing my code with yours.  Again, be careful to not erase the quotation marks or if you do, replace them.

That’s it…you now have the code for your blog button.  Save that word document where you can find it when you need it.

Step 4:
Now, you just need to add all the code you’ve created to your sidebar using the “html/javascript” gadget.  Once you’ve uploaded it as a gadget to your side bar, click on “save” and it should look like this below: an image that represents YOUR blog (your blog button) and some code underneath that folks who visit your blog can copy and add to their blog’s sidebar (again using the html gadget) for a quick link back to your blog.

If for any reason your button doesn’t look right or part of it is missing, just start over fresh.   Once you make one button, it’s a cinch to make others.  You can use this tutorial to make a blog party button for folks to grab whenever you are hosting a party on your blog.  Of course, you may want the image to be a bit larger for a party button.

Hope you found this tutorial helpful!

 Never miss a Between Naps on the Porch post! 

*Subscribe to have updates delivered to your Inbox. 


  1. Desire Empire says:

    Thanks Susan I'm bookmarking this as I am starting to run ads on my blog and it may come in handy. Appreciate the share
    Carolyn xx

  2. Annesphamily says:

    I am so technically clueless. I am always looking for help! I still can't figure out how to get my name on my personal photos! Ha Ha! enjoy your evening and thanks for the share. Anne

  3. Thanks so much for posting this information. I've often wondered how to create a button for my blog. I'm going to start looking for the perfect picture now!

  4. ButterYum says:

    Oh Susan – this post is fabulous! You always share the most helpful blogging tips. You my dear, are a class act!


  5. Michele @ The Nest at Finch Rest says:

    Your tutorials are awesome, thanks again, Susan!!!

  6. Susan!! I have been wanting to do this forever and just didn't know what to do! You are the best. I SO enjoy your blog. Thank you so much for this post!!


  7. SheilaG @ Plum Doodles says:

    thanks so much, I've been wondering how to do this. Will it work the same for a wordpress blog?

  8. Susan BetweenNapsOnThePorch says:

    Sheila, I think so. I'm not exactly sure how you add things to a sidebar in WordPress…but it should be the same since html code is html code, no matter where it's displayed.

  9. Cre8ive Motives says:

    What an awesome tutorial! Thanks so much for sharing Susan.


  10. Katy @ Live Laugh Love Craft says:

    You must be a mind reader! 🙂 I was so wondering how to get the "grab box" under my button today.. And now you've posted instructions.. Awesome! Thanks so much for sharing!!

  11. Thank you so much!! It worked!

  12. Susan BetweenNapsOnThePorch says:

    Yay, Karla! Thanks for letting me know!

  13. Susan BetweenNapsOnThePorch says:

    Thanks, Erin!

  14. Maria Elena says:

    Susan, you just made my day! I have been trying for days to make a button and for the life of me, I can NOT do it. So frustrating! I am a newbie and still trying to learn it all.
    I was so happy when I saw your post this morning.
    I plan to sit down today and follow your awesome step by step tutorial.
    Thank you so much for taking the time to post this! You don't know how grateful I am!

  15. Susan BetweenNapsOnThePorch says:

    Maria, thanks! I bet you'll have it done in no time, now!

  16. Heaven's Walk says:

    THANK YOU so much for this great tutorial, Susan! You are such a life saver! I've always been so intimidated by trying to make one of these, but you have broken it down so perfectly that I think I will actually attempt making one today! 🙂

    xoxo laurie

  17. Hey- I saw this in the Georgia Bloggers Daily this AM and thought I'd share with you my way- which is kinda less confusing for those of us who don't speak html. lol
    you can delete it if you want, i just thought id share it! XO!

  18. Susan! I googled "How do I make a blog button" this morning and your blog was the first one that showed up. And I am so glad it did! I could not have hoped for a clearer tutorial, and am so excited to make buttons for my blog now! And I may be your newest stalker, your blog is so wonderfully darling. Totally following and will be back for sure!

    Jessi from Hopes and Dreams

  19. I am LOVD says:

    Ok, how do you know what I'm thinking? I've been wondering this very question for months now!!!! Thank you!!!!

  20. Emily [On the V Side] says:

    This was so super helpful – it totally worked. Thank you for your help, I really appreciate it!


  21. Bettsi McComb says:

    Hi Susan. You are such a wealth of good information! Thank you for this- can't wait to make my own button!

  22. Thank you so much, Susan! Your directions were very clear.

  23. Thank you so much Susan.
    I tried to do this once on my own but failed.
    Now with your easy to follow directions I know I'll be able
    to create my own button.

  24. Rosewalk Cottage says:

    Thank you Susan! I was just searching for this same information this morning.

  25. Yellow Rose Arbor says:

    Thanks, Susan! This is great, hope I can do it!!


  26. Shelley from Ground Beef Budget says:

    Thanks for sharing. I have done this before and couldn't remember how I did it. I needed one for my new blog. Thank you so much. Directions were clear and easy to follow! It took me all of 5 minutes!

  27. ❁Velma ~Down Our Country Road❁ says:

    In the past, I had created a button using Photobucket but it seemed that others couldn't use it so I deleted it. Believe it or not, I have never used Picasa so I'm going to give this one a try. Thanks Susan!

  28. Rosewalk Cottage says:

    It worked! Thanks Susan.

  29. Susan BetweenNapsOnThePorch says:

    That's great, Clara! So glad!

  30. Susan BetweenNapsOnThePorch says:

    Velma…it should work for you…good luck!

  31. Maria Elena says:

    Susan, I did it! It worked and it was so easy to do following your wonderful step by step instructions. Thank you sooo much! You are the best!

  32. Jo @ To a Pretty Life says:

    Wow, thanks for this tutorial! I wanted to create a grab box for my Proud Canadian Blogger badge but had no clue how to do it. But now it's done!

  33. Best instructions I've found! Thanks you so, so much!

  34. Thank you so much for the best instructions I have found for this! I finally have buttons on my blog, I am very happy!

  35. Susan BetweenNapsOnThePorch says:

    Thanks! Glad they worked. 🙂

  36. Susan BetweenNapsOnThePorch says:

    Thanks, Jessi!

  37. Classy Clutter says:

    Just used this to create my linky party button! Thanks so much!!

    Mallory @ Classy Clutter

  38. The Childrens Nest says:

    Ohhhh you made this soooo easy!!! Thank you soo much! I tried making a blog button a few days ago following another persons tutorial and my picture came out as big as the computer screen!! hahaha… but now its perfect thanks to you!!

  39. This is so, so, so great! Thank you!!! I've been trying one tutorial after another and have been confused the entire time. Thanks for making it so that I finally understand!

    ♥ Bethany

  40. Susan BetweenNapsOnThePorch says:

    Bethany…so glad this helps!

  41. Susan BetweenNapsOnThePorch says:

    Yay…so glad it worked!

  42. Linda at teacherdance says:

    I've worked all day trying other site directions & yours is the first that worked! Thank you very much for the clear & easy directions!

  43. Susan BetweenNapsOnThePorch says:

    Yay! So glad, Linda!

  44. Helen's Decor says:

    Susan, thank you very much for such a detailed explanation of the directions. Notice, that I needed the detailed info that you gave us and not just the directions, that I had read other places. That's a huge difference. I really appreciated your time creating such a needed piece of info in blogland. You're kindness is very much appreciated.
    Helen of Helen's Decor

  45. You are amazing. I have tried following tutorials before but yours actually work! It worked the first time. Thank you.
    Let's Add Sprinkles

  46. Susan BetweenNapsOnThePorch says:

    Thanks, Helen!

  47. Susan BetweenNapsOnThePorch says:

    Yay! So glad it worked, Katie. 🙂

  48. Antiques And Teacups says:

    Oh my goodness it worked!!!! Thank you sooooo much!!!!!

  49. my vapor life says:

    as a newbe blogger, this is a wonderful tool!!! your instructions were so easy to follow. the color coding was a BIG help. thank you so much.

  50. Sara Kovach says:

    I have played with various tutorials for creating the blog button, and yours is by far the easiest to follow. Thank you so much!!!!

  51. I agree with Sara. I've been trying different tutorials today, and finally your tutorial helped me greatly. Thanks!

  52. Donna Patrice says:

    Oh WOW! A super-duper gigantic THANK YOU for this tutorial!! I can't believe how easy you made it for me – a totally inept html-code gal to make my very OWN blog button! Thanks again!

  53. Zuni, Chickadee Home Nest says:

    Ditto, ditto, ditto to all the comments above thanking you for these easy-to-follow directions. Thanks to you, there are many of us out there with our very own blog buttons now!! Your detailed instructions in all your tutorials are wonderfully easy to follow. Thank you, Susan!

  54. IT WORKED!! Thank-you so much. Your instructions were soo easy to follow. The only part that I had to research a how-to on google was down-sizing the botton to 125 jpg. I wasn't sure on that part.

  55. Christie Daugherty says:

    I've been over and over it again. The button works but my jpg image will not show up. Any suggestions?

  56. Susan BetweenNapsOnThePorch says:

    Christie, send me the code for where you have you image stored and I'll be glad to make it for you. I'm not sure what's not working…but will be glad to make it, then I'll send the code to you to put on your sidebar. 🙂

  57. Susan BetweenNapsOnThePorch says:

    Susan, glad it worked! Usually you can resize it in one of the photo editing sites…but the scale has to be correct for it to look okay. Glad it worked for you!

  58. Natural Babes says:

    wow that was great, thank you so much for that Info you are amazing!!! 😀

  59. The Fickle Pickles says:

    Thank you SO much!!

  60. Lesley Austin says:

    I am so grateful for this tutorial and found it much clearer than the others I came across today. So I send you my thanks.

    I am having an odd thing happen, tho', once I have created everything and checked it in preview (I am on a blog) if I switch to the Visual editing box, to write something, or when I save or publish, the box of code below the button is then lost and my page shows simply two of each of the buttons. Now, I am not putting these in sidebars but adding them to a page on my membership site for my members to copy and use on their blogs.

    Do you know how I can keep the button code boxes intact? I hope to unveil the buttons to my members sometime tomorrow.

    With thanks again,


  61. Susan BetweenNapsOnThePorch says:

    Lesley, it sounds like it's reading the code and showing it as it would when someone takes the code to their blog and adds it to their sidebar. It's removing that first part (of the second half of the code) that has the wording: "center…textarea…code source" etc… and it's removing the part at the end. It's just interpreting the code so it's displaying the button, instead of showing the code itself. Since I don't blog on WP, I'm not sure exactly how you would add this to WP. You may need to Google "make a blog button with grab code for wordpress blog" and see if something will come up that will clear up that issue. If you find something, please let me know. I'll add it to this post. Sorry it isn't working right…let me know what you find out.

  62. Thanks! You're awesome!!!

  63. Alicia Helsley says:

    Awesome! Just created a button for my blog!!! Thanks for sharing!

  64. Lesley Austin says:

    Thanks so much, Susan. I never could find information about why it was happening. In the end, not wanting to spend anymore time looking for answers, I just made sure all the text was correct, recopied and pasted the links (thanks to your lovely help!) and immediately published. I think it will "stay" now, as long as I don't go to the Visual editor ever again. : )

  65. Susan BetweenNapsOnThePorch says:

    Oh, good. Hopefully that will work! 🙂

  66. All Ways Designing says:

    It worked – first time!!! I'm so happy that I have a Blog Button, since I'm about to "OPEN" my NEW Blog! I've been Jan & Tom's Place (when I started a blog 4 years ago)…then Rose Haven…then Jan Tanis Designs and then I added PuppyKids Boutique. So, to reflect what I'm doing now, I wanted an altogether different Blog – a New Address! So, with that, a NEW Blog Button! Thanks for the directions!

  67. The instructions were perfect! Thank you for posting/sharing this!

  68. Beautifully Coastal Design Blog says:

    Well I made my button and I'm so grateful for your EASY TO FOLLOW tutorial! You're the bomb! Thanks much!!!!

    Lesli @

  69. Thank you soooo much! I've been trying for hours… with other tutorials. And then I tried yours and succeeded on my first attempt! You made it fool proof! Thanks again!

  70. Thanks so very much! I've been trying for hours, days, weeks to get this done with other tutorials too! Then I found you, and I've had success. You made it so much easier than others have for blogger! I'll be bookmarking this in case anyone asks how to do it. 🙂

  71. Susan BetweenNapsOnThePorch says:

    Thanks, Sherrey! Appreciate that…would love for you to share it. I remember when I first tried to make a button…the directions I found were not easy to understand. So glad this tutorial is helping! Makes my day to hear that! 🙂

  72. Laura @ my green pen says:

    Thank you thank you thank you!! Your guide was the easiest to follow 🙂 I tried a couple of others before I landed on your site!! If anyone asks I know where I'll send them.
    Thanks again!!

  73. Thank you so much. I just created my blog button. Your tut made it easy.

  74. Thank you, this tute was great. Instead of putting all that code in a word doc I entered into the draft post where I placed my image, that way I could work from the one spot. Got my button working first try, kudos to you!

  75. Ishita aka Fishy says:

    I tried it on a wordpress blog and it wont work 😛

  76. Susan BetweenNapsOnThePorch says:

    Ishita, read a bit further down in the comments here. Leslie couldn't get it to work on her WP blog at first but then she figured it out. Skip past her first comment on down to her last comment where she says she got it to work. Here's what she left further down the page in her last comment after she got it to work:

    "Thanks so much, Susan. I never could find information about why it was happening. In the end, not wanting to spend anymore time looking for answers, I just made sure all the text was correct, recopied and pasted the links (thanks to your lovely help!) and immediately published. I think it will "stay" now, as long as I don't go to the Visual editor ever again. : )"

    You may want to email her or visit her blog and asked her what she did that got it to work on her Word Press blog. Hope she can help.

  77. Thank You!! After trying for two hours with other blog tutorials, I finally understood it by reading yours 🙂

  78. Thank you! I used your tutorial to post a button at my blog,

  79. Thank you, Susan for this great tutorial! I have been reading other how-to's and trying a few but found them difficult to follow. I was careful to do just as you explained and just made a button for a first time link-up on my blog. It worked without a problem!

    Kindly, Lorraine

  80. Katie @ My Darling Days says:

    Do you seriously even know how much you rock? You saved my life, er blog life that is. Thank you soooooooooooooo much!!!!!! 🙂

  81. Susan BetweenNapsOnThePorch says:

    lol Glad it worked! 🙂

  82. Thank you!!! That worked perfectly. Your explanation worked really well.

  83. SheilaG @ Plum Doodles says:

    Yay, I finally got up the nerve to try it and it worked on my WordPress blog. I just uploaded the picture into my media library and copied the address that automatically shows up in the edit box of the picture. Oh, and to resize, I opened up Windows Picture Manager and resized there- very easy. The button isn't anything fancy, but it'll do for now. So much to learn! Thank you for getting me one step closer to at least LOOK like I know what I'm doing. 🙂

  84. Pat's Pink Apron says:

    I had to thank you for the tutorial on making a blog button. I actually was able to make two. I just wanted to say Thank You! Pat from Pat's Pink Apron

  85. Princess says:

    It worked!!! Thanks so much! As I learn more and more about the "blogger" world, i'm stoked that I finally have a button!! Yipee! Thanks so much!

  86. Laila Daniella says:

    SO HAPPY! It worked like a charm! thanks Susan! (CHECK OUT MY COOL BUTTON!) 🙂 So proud of it!

  87. Great tutorial, mine worked the first time on blogger. Thanks for sharing… I can see myself having alot of fun with these 🙂

  88. Great tutorial for bloggers, thanks for sharing!

  89. InteriorGroupie says:

    This is fantastic! Worked like a charm – thanks so much for making this easy (especially the photo hosting part!)

  90. Judy Bigg says:

    Thanks for this tutorial, Susan, I made a button for my blog today and it turned out perfect.

  91. georgia b. says:

    thank you so much for posting this! i needed to know how to do this and i needed to figure it out quickly for my post today. your explanation was top-notch! very easy to follow and understand. thanks again!

  92. Thank you so much! Your directions were the best for me to follow. Thanks again!

  93. THANK YOU!! Your color coded directions were just the tutorial I needed. I created my Thankful Thursday badge and it is up and running.

  94. I just wanted to say THAnK YOU! THANK YOU! THANK YOU! THANK YOU! Your directions for the grab button were so GREAT!!! I can not thank you enough for the help. I am new to blogging and it can be a little overwhelming setting everything up. Thanks again. 🙂
    Mariann with

  95. Thank you so much!!! This totally worked for me!

  96. Susan,
    Thank you ever so much… this worked great for me and was something I'd been trying to figure out for some time. You are a LIFESAVER! Thank you Thank you Thank you!!!!!!


  97. Thank you sooooo much for this super easy to follow instructions. I have successfully made my self a button with content box underneath. you are way awesome.
    I hope you can check out my blog to see the button I made with your help.

    Thanks again.


  98. Kerry B says:

    THANKS GOD! You are the 4th person I found and the easiest!! Although my button doesn’t look so pretty I’m happy to have it! Thank you so much for the brilliant tutorial! If you get a free second check out my blog button, I would love any feedback on how to make it a little nicer.
    Thank you again,

  99. I have no idea what i am doing wrong but it is not working for me 🙁 the box comes up but no picture!!

    • Krystal, if you’ll send me the address for the picture and your blog name and blog address, I’ll be happy to try my hand at making it. Email those to

  100. If someone wants to copy your button code and share it where would they post it? When i post the code into a blog post it only comes up as a code and not the linked picture, do you know why? I was going to post your button on my blog. Do you have to post it as a gadget is that why?

    • Krystal, maybe something didn’t transfer over correctly with the code. I’ll have to try it out and see. Thanks for the heads up. I’ll try it tomorrow and let you know if it works for me. Normally you just copy the code and when I blogged on Blogger, I pasted in onto the sidebar using an html gadget. My blog designer placed it here on BNOTP, but maybe the code is no longer working. I’ll have to check it to see.

    • Krystal, I just tried to post my button and the code I have beneath the button on my sidebar did work. You need to make sure you pickup all the code showing beneath the button on the sidebar if you wish to post it. You have to sort of scroll down or hit Ctrl a to make sure you get it all. To add it to a WP blog sidebar, you use a text/html widget. To add it to a Blogger sidebar, you use an html gadget. Hope that helps.

  101. I tried the button 4 times and I keep getting a symbol instead of a picture with the box and code below it. It is one on those images that you click on t see image. I am so confused???

  102. Hi Susan! I can’t copy and paste the code because it’s showing up as an image on your blog with nothing to copy and paste. Any suggestions?

    • Elizabeth, I’ll have to figure out another way to do it. When I moved the blog from Blogger to WordPress, wordpress jumbled all the code. I’ll try to go back in and copy and paste the code in…then you can refer to the image to straighten out or fix anything wordpress messes up. WordPress always turns the quotation marks backwards. Have no idea why it does that. Let me see if I can copy in the code again.

      • Elizabeth, I just copied and pasted it in again. When you copy and paste it, the quotation marks may be turned the wrong way. If that happens, just fix them where they look like in that image of the blog button code.

  103. I just added a button using your instructions. It came out great. Thanks tons.
    If you’d like to check it out, the button is on the right side column.

  104. Thank you so much! Worked like a charm 🙂 I do hope it is okay but I added your button to my blog roll! Can’t wait to come back and learn more!

  105. Thank you so much for this tutorial. This has been so helpful and I now have a blog button in place! Unfortunately, I am not on google+ (yet) but I did link back to your article here:

  106. OMG thank you so much for this! You make it look not so hard after all 🙂 Only thing is, I did every step and finally went to preview the button but it doesn’t look right. I have tried to do it 3 times now and don’t know what I’m doing wrong. Any advice? Here is a link to my site – – and my button is on the right sidebar. The code is showing up but the photo isn’t. I did what you said… copied the url from the draft post in html mode to get the url for the photo I want to use. Here is the code I am using too… I’d appreciate any help on this! Thanks so much 🙂

    • Desi,
      Check each of your quotation marks to make sure they are going the right way. You may need to redo it a time or two…I had to the first time I made one. If you get one quotation mark out of place, it won’t work. I can’t look right this sec…knee deep in category stuff. lol But send me the image/picture code for the picture you are using and send me your blog address and I’ll make a blog button for you. My email is: betweennapsontheporchatgmaildotcom.

  107. Great post! Thank you for the easy tutorial. I made one, and put it on my blog. My only question is, when I click on the blog button it takes me to my blog but the page says “Sorry, the page you were looking for in this blog does not exist”. Any ideas why it would do that?
    Here is the link to my blog, maybe you can figure it out. 🙂

    • Deanna, check to see what link to your blog you put in the button. Make sure it’s to your home page. You may have a stay mark at the end of the blog address of something that’s keeping it from going straight to your home page.

    • Deanna, send me the whole code you created to betweennapsontheporchatgmaildotcom…so I can see all of it. I’ll take a look. 🙂 I can only see the part folks grab to take your button right now.

  108. Thanks for the tutorial! It was very easy to follow. The only trouble I had was when I pasted the code into a word document, it didn’t want to allow me to reverse the quotes. But when I fixed it directly in the html gadget, it worked perfectly. Thanks again!

  109. Hey!! Thank you so much for the very understandable tutorial!!!

    It is showing up in my blog…….just not the picture…I am not sure what is wrong. If you get a chance, take a look and let me know what you think. It seems like the link is broken to the image, but I pasted the image URL into the search bar and it came up on the internet.

    • Dana, just send me your image code and your blog address and I’ll email ya back the completed code. That’s the quickest way I know to get it going for you. You can upload it to your sidebar and you’ll be all set. My email is

  110. This is a FANTASTIC tutorial…loved the helpful notes as I went through the steps!! I am having the same problem as Dana though. I seem to be a day later is all :o) I will email you my code, if that is alright. I am guessing I am missing something?
    Thank you!,

  111. Hi Susan. I had previously made a blog button with the right size and such before I found this, so I was good on that part of it. I first tried to use Photobucket to upload it, but it took to long. So I tried Picasa, and it said that the file can only be an image of video. It is an image! I used Photoshop to make it, but now I’m stuck.. Help?

    • Halley, not sure what that message means. When I’ve uploaded an image to Photobucket, it went quickly. Easiest thing to do is just upload the image to a “draft” post and save it…never delete it. Emailed me the image code from your draft post and your blog address and I’ll make a button for you.

  112. *or* ^

  113. Thanks so much for this tutorial. Worked for me! My only problem is that I can’t figure out how to make a 125×125 image without it being super distorted. So my image is larger, but hopefully that won’t be a huge problem for me. I don’t have Photoshop; I use a Microsoft Image editing software, so maybe that is my limitation.

    Hope you are having a great week! 🙂

  114. Thank you so much!!! This tutorial was AMAZING!! I have been trying to make a blog button for what feels like FOREVER and finally with your help I did it! 😀


  115. Thank you so much Susan! Your tutorial was really easy to follow. Thanks to you, I’m now the proud owner of my very own blog button! 🙂

  116. Just started my blog and trying to figure this world out. Literally worked on my button and trying to be able to share it for HOURS! So many confusing directions but yours were incredible! Worked so well and I feel like I’ve checked a major thing off my list to get my blog started. Thank you so so so so much! (oh and LOVE the blog. jealous haha)

  117. Hey Susan, great tutorial!
    I came by to check out the social media buttons – they look great!
    thanks for your kind words and the follow x
    (lovely blog you have here)

  118. Dear Susan,
    I have problems making my button so I need Your help.
    I send you ( by email) my image code and my blog address.
    Thank you for your help!!!

  119. Oh my gosh it worked! I have tried so many different codes a million times but you made this so easy! Thank you thank you!!

  120. MUST say THANK YOU!! I was able to do this – you made it so easy! For those of us who’ve never had any computer training, navigating this stuff can be so frustrating…but your instructions were great!

  121. It worked! It worked! Thank you!

  122. Thanks for the tutorial, it worked!!

  123. I love the step by step instruction, but for the life of me I can’t get it to work! Would love some help!

  124. This was was a breeze to follow. This is an amazing tutorial. Thank you so much for sharing this. I am a button making machine now 🙂

    • That’s great, Emma! Once you make one, it’s super easy to make more. The first one acts like a template for the others and you just fill in the information for each one.

  125. Thanks SO much!!! It worked great!!

  126. Dear, dear Susan, thank you so very much for this tutorial, it was a great help! But..(there’s always a but) I keep getting text link instead of a button image, and I’ve tried more than 10 times, over and over 🙁
    If you could be so kind and help me in understanding what I’m getting wrong…I keep doing every step from the beginning and every time it’s a text link instead a photo..
    Best regards from Serbia!

    • Ivana, it’s probably WordPress turning the quotation marks the wrong direction. Send me your image code and a link to your blog and I’ll make one for you and send it back to you. Just email it to me at betweennapsontheporchatgamildotcom.

  127. You are the bestest of the best! It still took me an hour, but I got it!!! Thanks so much Susan! You’re a life saver. xox

  128. This was an incredibly helpful and easy to follow tutorial! Thank you so, so much!!

  129. Thank you so much! This was a great, easy-to-follow tutorial. Thank you!

  130. I have been at it for an hour with no luck:( Your tutorial is so simple, I can not understand what in the world I’m getting incorrect. I get the code box to come up, but my image is not displayed correctly. Any suggestions??? I use Blogger. Any help is much appreciated:)

  131. Thank you so much for posting this! I have been having a heck of a time getting code to work, but yours did 🙂

  132. Kelli @ Swing Shift Mama says:

    Thank you so much! I am kind of proud of myself for figuring this out…with your help of course!

  133. Whow, with your instructions it was a piece of cake! Thank you so much!!

  134. thank you so much for this post! it really works!

  135. Awesome! But I have a question: How do you resize the button and code to fit your sidebar? Mine came up too large.

    • Hi Jessy,
      Your button will be whatever size your the image is. So before you store your image in a draft post or Photobucket or someplace, size it down to 125 x 125 pixels or 150 x 150 pixels or whatever size you want it to be. You can use any photo editing software to do that. I resize pics with Microsoft Picture Manager and Adobe Photoshop. Do you have a program you can use to resize it? If not, email me your pic and I’ll resize it down and email it back. Then you can upload it to wherever you’re planning on hosting it. You just want to make sure the writing on it is large enough that it will still look okay sized down.

  136. Heather J says:

    I tried. I failed!

  137. Thanks! This worked like a charm!

  138. THANK YOU!! i know that a lot of other comments before me said the same, but this is a great tutorial! 🙂 for someone with very limited knowledge about design/html, this was very clear.

  139. Thanx for the inspiration! I’m just starting out. I really appreciate the breakdown of how to create a button for your blog. I may try it myself!

  140. This helped me so much! Thank you for the awesome tutorial!

  141. Victoria Meyers says:

    Thank you for this! I am new to blogging, just decided to get serious recently, and I really appreciate this info! BTW I have grabbed your button!

  142. Thanks so much, Susan! I am going to be giving some G+ love to this post, definitely!

    Have a wonderful week.

    ~Mary Beth~

  143. Thanks so much for this tutorial. After a bit of working at it and double checking the html…I got it. Thanks so much!

    • Excellent! Now that you have the code, you can just replace the “image code” section anytime you wish to make a new button. Or, the address if you wish for it to link to a specific post, etc… Glad it worked for you! I wish WordPress didn’t mangle the quotation marks.

  144. THANK YOU! I have successfully completed my first ever button and button code box. I’m bookmarking this page for future reference because it was the easiest tutorial on html coding that I’ve found to date! YOU are an angel 🙂


  145. I have been working on this for a few weeks now and your tutorial helped me the most. You are a great teacher. Thanks so much Susan!

  146. I made a button and wanted to share it with others but didnt know how until I found your post. Thank you so much!
    Blessings to you and your family!
    Jessica U

  147. This is a great tutorial! Thank you for the step by step. I was able to create my button and put it in a widget. However, every time I put the code for the grab box and hit “save” wordpress automatically takes out the code that creates the box and just leaves the code for the button. Then it shows two buttons in the sidebar. Any ideas why this is happening? I checked all of my quotation marks. hummmm

  148. This is so helpful but I think I’m stuck. Have a look at my site….at the very top is my button but the code doesn’t look all tidy (in a box) like yours does 🙁

  149. Just emailed you. I’ve been struggling for an hour. I’m clueless!

  150. Thanks you so much for this tutorial; it was a big help! I am a beginning blogger, and I have no idea how to do html.

  151. Took me several times but I finally got it. The direct code from phtobucket didn’t work but the html did. Thank You so Much. I will come back and review!

  152. Loved the tutorial. It was excellent. We use WordPress and host our own site so we had to change the quotation marks and wala, everything worked like it should! Now I have to find one on how to create a button for someone wanting to advertise on my site.. 🙂

    Thanks so much for this helpful post.


  153. Thank you for this user friendly tutorial and for your assistance.

  154. Perfect!! Love my new button!!

  155. wow… I have my new button…!!

  156. Really nicely explained. Everything except from the image itself works for me. I’ve even tried uploading it to Picasa outside of a post! I made sure to make it public too! It just looks like a question mark in a blue box, on my blogger blog 🙁

  157. This has got to be the easiest tutorial on buttons I have found yet. I tried four other websites before I found you, and none of them made it this simple. Thank you for saving me so much stress. I’ll be back to learn more from you for sure.

  158. Thank you! This worked perfectly for me.

  159. THANK YOU. AWESOME directions.

    Mine came out all except the code in the box below the button.

    Any thoughts on what I did wrong?

  160. Thank you so much! I have been looking for this, I can’t tell you how much I appreciate your help. Now, I have a blog button that works! Visit me at Everyday Alaska Blog, Again, thank you!!

  161. Thank you so much. I am starting a linky on Wednesday, and I couldn’t get mine to work, you fixed it. WordPress turning the quotations around tricked me. Thanks for sharing this. Hopefully I might see you link up to my new party called “melt your heart moments” on Wednesday!!!

  162. Hi Susan,

    I’d love to have your blog button in my Blog Button Directory as a great example of how to create a button that is well branded. I can either add it in or you can, let me know. It’s free of charge. Thanks!

  163. Ah! You just saved my life! Well, my blog’s life, anyway 🙂 Thank you so much!!

  164. Hi! I loved this tutorial…but I think I have done something wrong. Before I was having difficulty getting the code to show up under my nicely sized button hosted on Photobucket. Now I am having issues with the grab it code not showing and the size of the the button. I have sent you an email. Please advise! Thanks!

    • Kate, I’ll take a look and see if I can help. Something strange happened though after one of the WordPress updates…I never could get the code to work correctly…but I’ll give it a look and see if I can figure it out.

  165. Are these instructions only for WordPress? I have been trying to create a button with the HTML code, have tried several tutorials but only with your tutorial, I managed to make my button appear on the side bar,however; the HTML code doesn’t display. Instead, there is an empty box in which I can tyrpe- oh, let me say, I use blogger 🙁 I would be grateul if you could help.
    Many thanks, Nurdan

    • Nurdan, I know…I can’t figure out what changed. Those directions worked great for several years then suddenly they quit working. I don’t know if Blogger changed something or what happened. If I find an answer for it, I’ll let you know.

I'd love to hear from you! Please leave a comment!