≡ Menu

Tutorial: How to Make a Blog Button

In this blogging tutorial, you will learn how to make a blog button in five easy steps. You’ll get the blog button code and the grab box code. Plus, you will find out how to install the HTML code into your sidebar, and troubleshooting tips. I have included screenshots along the way to help you get a better picture on how to do this. I’ve done my best to make this as easy as possible for newbie bloggers. Let’s get started.

In order to be a successful blogger, you have to brand yourself and your blog. There are a million blogs and websites out there. What makes your blog different? Why should visitors take the time to read yours?

Creating a blog button is the perfect way to brand your blog. It promotes your blog’s name, look and feel, and mission in one simple image. You will use your unique blog button on blog hops, blog directories, Entrecard, on your sidebar, etc. When another blogger grabs your blog button and posts it on their sidebar, it opens you up to new visitors and more followers. In a nutshell, your blog button is your main advertising tool.

(Newbies – a blog button is a hyperlinked image or logo that takes a visitor to your homepage when it’s clicked on.)

When my blog was young and newly “born,” I was actively participating in blog hops where I was sharing my blog button. From personal experience, it definitely helped drive more traffic and get me new followers and readers.

To drive traffic to your blog, you’ll want to design and make a blog button that makes visitors want to click. Mommy bloggers create the most stylish blog buttons. I’ve found that the most successful mom and parenting bloggers have well-designed blog buttons. You can hire a graphic designer to create a blog button for you for a minimal fee, or you can design it yourself.

This tutorial gives you the steps involved in:

  • How to make a blog button.
  • Creating a code box that allows other bloggers to grab your blog button and place it on their blog.
  • How to add and display the code box and make a blog button using WordPress and Blogger platforms.

How to Make a Blog Button – Basics

The standard blog button is 125px by 125px. You can choose a size larger than this, but don’t go larger than 150 pixels wide. Most sidebars are only 200 pixels wide, and if you use a larger blog button, the sides of your button will be cut off. For this tutorial, I am sticking to the standard size: 125 x 125. You can make it larger, but keep it a square – i.e. 150 x 150 or 175 x 175.

Step 1: Design and Create Your Logo

In order to design and make your blog button, you will need access to an image editing software – such as Photoshop. Unfortunately, for many beginning bloggers, Photoshop is too pricey. There are a number of free image editing software programs available.

My favorite used to Picnik – which  was free online photo editing site, owned by Google. It was so easy to use, but unfortunately in April of 2012, Google closed it down. Some alternatives to Picnik that you might want to use include:

  • PicMonkey – A super easy to use photo editing program with a creative web interface. Simple to use, and it’s the brainchild of former Picnik engineers. I love it!
  • BeFunky – This lets you edit photos, add cool filters, add text, and other basic stuff. Easy to use, and there is also a smartphone app for it. It’s an Instagram alternative, but not as cool as Instagram.
  • iPiccy - An online photo editor with simple photo tools – like crop, resizing, rotating/flip, hue and saturation, and other basics.
  • Ribbet - If you loved Picnik, Ribbet is a photo editing platform that looks nearly identical as Picnik. It is simple to use, and you can basically do all the same stuff with it – like adding stickers, text, resizing, cropping, frames. Premium (paid) users can play with the curves and levels.

For more advanced bloggers – if you’re familiar with Photoshop, but you don’t have a copy of Photoshop, consider using Pixlr – another free online photo editor that has many of the functions that Photoshop uses. You can crop pictures, resize them, free transform, add text, add shapes, and more. I absolutely love Pixlr.

For this tutorial on how to make a blog button, I used PicMonkey.

Creating a Blog Logo in PicMonkey – Step by Step with Screenshots

1 – Go to PicMonkey. On the homepage,  click on “Edit a Photo.” You can also “Create a collage” with multiple photos if you want.

2 –  After you’ve uploaded the photo you want to use, you will need to crop your image into the standard size 125 x 125. On the left side of the screen, you will want to click on “Crop.” For this blog button tutorial, I am using one of my headshots.

Tutorial: How to Make a Blog Button

In the drop down menu on the left side bar, you’ll want to choose “square.” Click on the square to move it where you want. The rest of the image will be grayed out. Click on “Apply” to crop the photo.

Tutorial: How to Make a Blog Button

3 – Once your image is cropped, play around and embellish your image in any way that you want. All the tools you need will be on the left side bar. Cropping, rotating, exposure, colors, sharpen . . . Plus, there are the smaller icons, which allow you to play with color effects, skin touch ups, adding text, frames, adding text and more.  I highly recommend you play with all the effects to create a super awesome blog button.

I also highly recommend placing your blog’s name somewhere on the image for branding purposes.

Tutorial: How to Make a Blog Button

3 – When you have finished editing your photo, you will need to resize your image to 125px by 125px. (This is the standard size for most blog buttons.) You can also use 150 x 150 or any square size. Click on “Resize” the bottom of the left side menu. Hit apply.

Tutorial: How to Make a Blog Button

4 –  When you’re done, click on “Save” at the very top. Save the photo to your computer.

Step 2: Upload Your Image to Your Server

After you have designed and created your blog button image, you need to upload your image to your image hosting account. If you are using WordPress, you can just upload it to your “Media” folder.

If you have a Photobucket account, upload it there. Since I used Blogger as my original blogging platform, I used Picasa Web Albums.

The following instructions work best in the Picasa web albums, not the Picasa application. 

Once you upload the image, you can easily find the URL code for the image. In Picasa, you simply need to right click and select “Copy Image URL.”

Tutorial: How to Make a Blog Button

The image URL should look something like this: “http://www.YourDomain.com/ButtonImageName.jpg” – Keep the image URL handy. You are going to need it.

Step 3: Create the Code for Your Blog Button

Pay close attention – this next step is a bit technical. I am going to try to explain it the best that I can. (If you have questions, please leave me comments so that I can tweak and edit this post to help others.)

This is the basic blog button code. (This code does not contain the grab box for the blog button. This code is the HTML code that you will use when you’re writing a blog post and you want your blog button to appear within the post, or when someone else is writing about your blog and they want your blog button to show up. This is the code that shows up inside the “Grab my Button” box. If you want to make a grab box for your blog button, skip this step and go onto the next. For most bloggers, they do NOT need to follow this step.):

<a href= “http://www.YourSiteURL.com”><img src=http://www.YourButtonImageURL.jpg /></a>

You should replace the “YourSiteURL” and “YourButtonImageURL” with your own URLS.

The <a href=“….”> portion of the code is the page that you want visitors to land on when they click the button.

The <“img src=“….”> stands for “image source.” It’s the location of the image that you want to use. This is where you copy and paste your image URL.

*** Important: *** Don’t forget to end the code with </a>. That’s how you close the code.

In my own blog, this is what my blog button code looks like.

<a href=”http://www.mypregnancybaby.com“><img src=” http://www.mypregnancybaby.com/wp-content/uploads/2011/01/blog_button.jpg ” /></a>

When anyone posts that code on their sidebar, or in a blog post, it looks like this:

Tutorial: How to Make a Blog Button

(I hope that explanation makes sense. Please let me know if it doesn’t!)

Step 4: Make your “Grab my Blog Button” Box Code

Now that you’ve created the code for your button, you need to create a “Grab My Button” Box so that other bloggers can grab your code and promote your blog on their site. This code includes the “Grab my blog button” box, as well as your blog code. For most bloggers, this is the ONLY code that they need to know.

This code is a bit tricky, but I’ve tried to explain it the best that I can. There are two parts to the code:

1 – Your image
2 – The grab box, where your code appears for others to grab.

Here is the HTML code for the entire thing:

<img src=http://www.YourButtonImageURL” alt=”YourSiteTitle” /><div style=”width: 125px; height: 125px; overflow: auto; border: 1px solid #666666;”>&lt;a href=&#34;http://www.YourSiteURL.com&#34; target=&#34;_self&#34;&gt;&lt;img src=&#34;http://www.YourButtonImageURL&#34; alt=&#34;YourSiteTitle&#34; width=&#34;125&#34; height=&#34;125&#34; /&gt;&lt;/a&gt;</div>

It’s a very confusing code, and all the strange symbols – such as &#34 stand for quotation marks. (For some reason, WordPress and Blogger can’t pick up the quotes that should go around the YourSiteURL, and they transform them into &#34.) A very confusing code, but it works.

Here’s what the finished product should look like:

Tutorial: How to Make a Blog Button

<a href=” http://www.mypregnancybaby.com/” target=”_self”><img src=” http://lh6.ggpht.com/_33SCR_mnGZw/TNTBmgIvc8I/AAAAAAAAARw/STQlAR-zXjY/blogbutton.jpg ” alt=” HipChickGuidetoPMSPregnancyandBabies” width=”125″ height=”125″ /></a>

Copy and paste the code I’ve given you into Notepad, or TextEdit (if you are using a Mac). Replace all the URLS with your own.

Step 5: Copy and Paste the Code and Use it on Your Sidebar

If you are using a self-hosted WordPress blog, you need to go to Appearance → Widgets → Text. Copy and paste the blog button code.

Tutorial: How to Make a Blog Button

If you’re using Blogger, underneath the “Design” tab, you will need to “Add a Gadget.” Then scroll down until you find “HTML/Javascript.” Click on that and copy and paste the blog button code.

Tutorial: How to Make a Blog Button

Save your work. Test the code to ensure that it works properly. It should.

 

Troubleshooting Problems:

If you are having problems with the blog button code, check your quotation marks. Each and every URL needs to have quotes before and after it.

If you’re still have issues, your quotes may have been changed to “smart quotes,” which are curved quotation marks. HTML hates smart quotes. HTML wants straight quotes. Unfortunately, this means, you will need to go back to the blog button code and carefully delete every single quote (“) and re-type it. There are a total of 6 in the code that I’ve given you.

Good luck. Please let me know if this tutorial on “how to make a blog button” was helpful. I’ve tried to make it as simple as possible. I may do a video tutorial when I have more time.

If you enjoyed this post, please ReTweet, StumpleUpon, Digg, Reddit . . . and Share this post with your friends!

(And if you can’t figure it out, I am more than willing to help you figure it out. All I I ask is for a link back to this post! I’d love the exposure!)

Please note that if you Read this Post correctly, it WORKS. A lot of people have been emailing me, claiming that it doesn’t work, or that they are confused. The reason is that you did NOT read the post in its entirety. Skipping will make you confused! The Code in Step 4 is the code that Most people are looking for.

About the author: DP Nguyen is founder and editor of Hip Chick’s Guide to PMS, Pregnancy and Babies. She’s an expert pregnancy and women’s health blogger. She is NOT a medical doctor and does NOT offer medical advice. Connect with her on Google+, Twitter and Facebook.

Preggie Baby Boutique Modern Pregnancy and Baby Products

{ 231 comments… add one }

  • JB October 22, 2014, 3:54 pm

    Hi! Thanks! :)

    I tried this and it worked, but the button is really small, even though there would be more space in the sidebar. Can I make it bigger?

  • Cindy September 26, 2014, 5:11 am

    I was able to get the button on my blog but wanted to ask a question. When you put the code in the text box in Word Press…is that code also supposed to show up in your sidebar? Thanks for all the great information.

  • Shannon July 31, 2014, 10:26 pm

    Thank you so, so much for this! I searched and searched, and every single tutorial I came across was not working. Yours was so easy and straight-forward, and most importantly, WORKED. So thank you so, so much! I’ll definitely be sharing this around :)

  • Lucy July 18, 2014, 10:03 am

    Ugh, Im so thick as I really don’t understand blogger. I have read so many tutorial on how to add a blog button but I just can’t do it!

  • Jamie G July 11, 2014, 12:45 pm

    Thanks for the tutorial! I just used it now and it worked perfectly!!
    Check it out at http://snapginger.com
    xo
    Jamie

    • DP Nguyen July 14, 2014, 9:14 pm

      Awesome! so glad it worked for you!

  • Jacqueline June 10, 2014, 2:03 pm

    Oh my, am I feeling dumb right now. I am sort of new to all the technical stuff, but I can find my way around and get things done. I read, re-read and tried everything you suggested, but I just cannot seem to get this to work. Your directions are clear and concise, and that is not where the problem lies. I cut and pasted, put in all of my links, and it still just will not work for me. I can’t for the life of me figure out what I am doing wrong. Just for kicks, here is the code I added:

    <a href="http://www.Jaxsology.com&#034; target="_self"><img src="http://wp.me/a4z72i-bi&#034; alt="Jaxsology" width="125" height="125" /></a>

    I will, however, let you know that I am now a follower, and I thank you for your post. It is the best post about implementing buttons that I could find. Maybe one day I can get it to work on my blog Jaxsology.com. If you have any suggestions as to what I might try next, an email would be greatly appreciated. Until then, I will continue to find my way around code land….confused at best!

    • DP Nguyen July 14, 2014, 9:54 pm

      Did you delete all the quotes and retype them?

  • Thank you, I have recently been searching for
    info about this subject for a while and yours is the greatest I have found out till now.
    However, what about the bottom line? Are you positive in regards to the source?

  • Corlie January 28, 2014, 11:44 am

    You. are. amazing!!! Thanks so much :)

  • Sonya December 29, 2013, 2:02 pm

    Thanks, you directions were very easy to follow. I just added my button.

  • Rabia @TheLiebers December 2, 2013, 11:15 am

    Thanks so much! I just got mine set up today!

  • dating advice for ages 10 and up November 30, 2013, 12:15 am

    Amazing issues here. I am very satisfied to look your post.
    Thank you so much and I am looking ahead to contact you.

    Will you kindly drop me a mail?

  • Gurvy Green November 15, 2013, 9:37 am

    Hi DP,
    Fabulous post, very informational. This is all new to me but I accomplished it yet not completely. I’ve added the my button and link to my site yet there’s an error box next to my button and the button is in the center but the source code is on the left. Can you help? Thanks
    http://www.gurvygreen.com

  • ardenrr (Dancing Wino) October 29, 2013, 1:47 pm

    Mine worked as well! I, too, had the smart quote issue but that fixed everything! Thanks :)

  • Ashley October 2, 2013, 12:44 am

    Thank you so so much! I followed your directions exactly, then realized I did need to switch out the “smart quotes”. It worked wonderfully! I’m pinning this article now, and you gained a new follower!

    • DP Nguyen October 3, 2013, 8:52 pm

      Thank you so much :-)

  • Tiffany Divalocks September 21, 2013, 5:44 pm

    Thank you so much! Your review helped me change out my social media icons :) I am still having trouble with the twitter one, for some reason it shows as my webpage first and the the twitter link, so it makes it say page not found on my blog. But in the html code it’s only the twitter link, so weird. I’ll try to figure it out another day, I am totally brain dead now lol

    Thanks so much!

  • Tracy September 1, 2013, 7:01 pm

    I’ve spent literally hours trying to figure out the badge and code thing. I’ve been to so many sites and tried everything that my limited knowledge will help me do. At first I would get my image to post but the html box for grabbing would be empty. Then when I tried your code …the opposite happened …where I’ve got the code in the box and no image. So what I did was copied a code that I had tried and knew I could get my image to show…and then used the rest of your code to get the html box to show. It still isn’t right though…..I would greatly appreciate your help!

    • DP Nguyen September 11, 2013, 12:19 am

      Delete the quotation marks and retype them.

  • Kristen Mae at Abandoning Pretense August 27, 2013, 10:08 pm

    Wow. You are amazing for creating this… FOR FREE. *bookmarking* and will be working on getting creative this week! =)

  • Jessica Burgess August 25, 2013, 9:29 pm

    You are amazing! Thank you SO much for posting this tutorial! I feel like I’ve accomplished so much on my blog jus this evening, by reading your post, and executing them! Thank you! XO!

  • Kristen August 25, 2013, 7:42 pm

    It took me a few tries, but I got it! Thank you!!!

  • Natalie August 6, 2013, 8:49 pm

    Hi, Im having trouble with step #2. I downloaded Picasa 3 and when I go to click on the image and try to copy the URL as you said to do, I don’t see any option when I click on the image about copying a URL. I have a PC not a mac if that helps. HELP

  • Meghan August 3, 2013, 2:47 pm

    I have tried the tutorial and It gives me a second image within the code for the button. So I have two images. One for representing the button and one within the code to “grab.” Any suggestions??

    Meghan

  • Louise July 31, 2013, 10:47 pm

    Just wanted to post a quick thanks for the blog button tutorial. I managed to stumble through it and figure out how to do one. It’s been on my list of things to do for a while – so happy I finally got around to it!

    Thanks again!

  • Go Daddy Coupons July 25, 2013, 5:52 pm

    Hello, i read your blog from time to time and i own a similar one and i
    was just curious if you get a lot of spam responses?
    If so how do you protect against it, any plugin or anything you can advise?
    I get so much lately it’s driving me insane so any assistance is very much appreciated.

  • KristyRunsKato July 22, 2013, 10:49 am

    Thank you!! This was so clear and easy to follow!! Awesome!!

  • video July 21, 2013, 5:53 am

    Bu video 60p vs 60ilar ziyaretilerimiz tarafindan ok begenilmektedir.

    Hint: your show does not have to be worried about the adventures of these games takes children away from reality.
    While selecting a machine for NLE non-linear editing, there are ups and downs.
    Is it a Laptop or Desktop?

  • MyHosting Coupon July 18, 2013, 8:48 pm

    Just wish to say your article is as surprising.

    The clarity in your post is simply spectacular and i could assume you’re an expert on this subject. Well with your permission allow me to grab your RSS feed to keep up to date with forthcoming post. Thanks a million and please carry on the enjoyable work.

  • MyHosting Coupon July 18, 2013, 7:51 pm

    Hi, I want to subscribe for this website to take most up-to-date updates, so where can i do it
    please help out.

  • Jessica July 17, 2013, 1:45 am

    Thank you! I created a button in picmonkey via another tutorial but when I pasted the code it wasn’t working. It was a backward quotation mark! Appreciate the troubleshooting section.

  • Nalin July 5, 2013, 2:24 am

    I tried three different tutorials on this and yours was the one that worked perfectly. Third time’s the charm! Thank you so much!

  • How To Register A Domain Name July 2, 2013, 4:16 am

    Hi there to all, it’s really a nice for me to pay a quick visit this website, it contains helpful Information.

  • Sarah June 30, 2013, 6:21 am

    Thank you! Thank you! It took a lot of persistence and perseverance, but I did it, with your help. The troubleshooting tip worked beautifully for me. I was having lots of trouble then I changed the quotation makes and ta-da like magic it suddenly worked. Thank you again.
    Sarah @ creatingcontentment.com

  • Domain Web June 26, 2013, 7:32 am

    Link exchange is nothing else except it is simply placing the other person’s website link on your page at appropriate place and other person will also do same in favor of you.

  • Domain Name Registrar June 25, 2013, 6:24 pm

    Hello there! This is my 1st comment here so I just wanted to give a quick
    shout out and tell you I genuinely enjoy reading through
    your posts. Can you recommend any other blogs/websites/forums that go over the same topics?
    Thanks for your time!

  • Brittany June 21, 2013, 6:28 pm

    This was super helpful. Thanks!

  • Dara June 7, 2013, 11:32 pm

    Hi DP,

    Thanks for this post. I’m new in the blogsphere so this is really helpful. ^_^

  • Desarae June 3, 2013, 11:03 pm

    Hi, I just found your blog today when I was searching for ‘Blog Button Tutorials’. Thank you so much for sharing this! I am having some issues though…my image is showing up *twice*. The top image is just an image, you can’t click on it- then there is some of the code, then another image that you can click on, followed by the rest of the code. Obviously I did something wrong. What is it?

  • Leslie May 22, 2013, 10:40 pm

    Thanks for the tutorial! I had to retype the quotes but once I did that, it worked great. I can’t get it centered, but this happens to me a lot on this particular WP blog. Still it looks great! Thanks so much!

  • Angie McDonald May 17, 2013, 4:08 pm

    Hi, thankyou so mcuh for this!
    I am happy to say i have successfully just made my first blog button! :) x

  • pistol targets showing human vitals May 12, 2013, 5:26 pm

    Ahaa, its good discussion about this piece of writing at this place at this weblog, I have read all that, so now
    me also commenting at this place.

  • lacey April 7, 2013, 7:40 am

    Alright, I have been at this for two days now, I have reviewed and re-reviewed instructions, I don’t know what I am doing wrong,
    Frustrated Blogger,
    Lacey
    here is my understanding

    Help me:P
    Is this wrong?

    • Shannon May 21, 2013, 6:12 pm

      Like the directions say “Check your quotation marks. I deleted and re-typed all mine and it instantly worked.

      Good Luck :)

  • Amanda April 1, 2013, 4:49 pm

    Well, it didn’t give my entire code I made… Here it is again.

    <a href=" http://modernhippiemomma.blogspot.com/&#034; target="_self"><img src=" http://i1325.photobucket.com/albums/u640/Amanda_Autumn_Nipper/blogbutton2_zpsd8015b5f.png&#034; alt="ModernHippieMomma" width="125" height="125" /></a>

    • Leslie May 22, 2013, 10:42 pm

      Try taking out the spaces after the first quote and after the third quote. I had to do that as well. Not sure why some of our blogs are putting that space in, but anyway I took those out and it worked! I also typed mine in the html editor within a new blog post. That helped too, but I still had to retype quotes as OP suggested and take out those spaces. HTH!

  • Amanda April 1, 2013, 4:48 pm

    Hello, I feel like I’m doing everything right but my image isn’t showing up. Just a little tiny white square. I use blogger and here is my code I made.

    <a href=" http://modernhippiemomma.blogspot.com/&#034; target="_self"><img src=" http://i1325.photobucket.com/albums/u640/Amanda_Autumn_Nipper/blogbutton2_zpsd8015b5f.png&#034; alt="ModernHippieMomma" width="125" height="125" /></a>

    Here is my image URL from photobucket:
    http://i1325.photobucket.com/albums/u640/Amanda_Autumn_Nipper/blogbutton2_zpsd8015b5f.png

    My site URL:
    http://modernhippiemomma.blogspot.com/

    My site title:
    Modern Hippie Momma

    What am I doing wrong?

  • Elizabeth Cottrell March 27, 2013, 6:51 am

    This is a very well written and helpful post, and I’m going to create my button today! Thank you.

  • Paige @ Not Missing A Thing! March 19, 2013, 9:14 pm

    Thank you soooooo much. Your tutorial is the only one I found that actually taught me how to do this! I used ipiccy. Pain-free process! Thanks!

  • Amy Kelsch March 17, 2013, 8:11 pm

    Hello!
    Absolutely LOVED this tutorial. It was easy to follow and I think my button turned out pretty well! – thanks to your help.

    Many Thanks,
    Amy Kelsch
    Mindful Shopper Blog

  • k-iani.com March 9, 2013, 5:31 am

    Hey there! Do you know if they make any plugins to help with

    SEO? I’m trying to get my blog to rank for some targeted keywords but I’m
    not seeing very good

    results. If you know of any please share. Thank you!

  • Mrs. Lopez February 28, 2013, 11:57 pm

    Hi!
    Thanks for this great how-to! I sucessfully created both types of buttons.
    I also shared a link to this page on my blog!
    Thanks!
    Mrs. Lopez of lovinglifeinpink.blogspot.com

  • Kyong February 25, 2013, 9:39 pm

    Wow, thanks for this guide! I’ll try this on my blog. Thanks!

  • Cassandra Janey January 25, 2013, 9:34 pm

    Thanks so much! I am your newest follower!

  • Jessiekays January 25, 2013, 7:23 am

    Thank you for this, I’ve got the button but am having so much difficulty with the codes. My image url is very long and starts with https:// instead of http:// – could this be a problem? I don’t know how to fix it or get my image url anything like yours. I’ve tried both step 3 and 4 and neither work. :(

  • Bronwyn January 19, 2013, 6:37 am

    Thanks for the tutorial. I tried it and it worked except for the box with the code in it – the code appeared but not in a box. I believe wordpress is removing the div tabss? How do I fix this? I have removed the entire widget for now since it does not work without the box.

  • Suzanne January 15, 2013, 1:33 pm

    Thanks so much to the tutorial! (And the code to copy and paste!!!) I had to do some troubleshooting with it, but it turned out that my own picture code was wrong. I didn’t need the “www.” on the front of it.

  • Newlymeds January 3, 2013, 4:09 pm

    Ok this was SO helpful. I took me about an hour+ and reading through this post 10 times but I am almost there. The only issue I am having now is that when I click on my button is says the page I am looking for does not exist! Also I am not sure how to make the little box where people can take my button. Tks!

  • Jacqueline January 2, 2013, 3:19 am

    This was very helpful! I’ve been trying to figure out how to make a blog button for ages! But I’m still having trouble with the “grab a button box”… I’m not sure what the problem is, but what exactly do you mean by the “blog title”? Does it mean to put whatever we call our website/blog…?

  • ruby December 29, 2012, 3:10 pm

    It dosent work I tried.

    • Amy December 29, 2012, 3:21 pm

      Yes it does you didnt try it ruby

  • Butterfly Fairy December 20, 2012, 10:07 pm

    Thanks so much! I added a link to your tutorial and some gallery links for great button inspiration! Hope it brings you many blogging and new mommy readers.

  • Amy November 25, 2012, 8:11 pm

    Thank you for all of the wonderful info!! I am a newbie…. The button looks great, but the box below doesn’t work — my friend tried to add it to her site and can’t…. any suggestions? thanks!!!!

  • Michele November 18, 2012, 10:59 am

    the only way i can get the image to show is by taking the quotes off from the first url. i can’t figure out how to get the grab box to show. i have checked and rechecked the code.

    • DP Nguyen November 24, 2012, 6:40 pm

      Delete all the quotation marks and retype them. That will fix the code.

  • logo design October 31, 2012, 3:33 am

    thaks… for your detail explanation and i lollow you structions .

  • video blogging October 24, 2012, 11:04 am

    Attractive portion of content. I just stumbled upon your blog and in accession capital to claim that I get actually enjoyed account your blog posts. Any way I will be subscribing in your feeds and even I achievement you access persistently fast.

  • Lisa@booth555.com October 22, 2012, 8:25 pm

    Thanks! This is the easiest explanation of a how to button I’ve found so far!
    :-)

  • Susan Mitchell October 14, 2012, 8:43 pm

    THANK YOU SOOOOOOOO MUCH!!!

    I was struggling with this for literally HOURS until I came across your blog! Stupid angled quotation marks haha

    Anyhow thanks again:)

    MadebyMommainPA

  • jennytheartist October 9, 2012, 7:31 am

    i followed your instructions to a “t”, but it’s still not working :(

  • Beck October 8, 2012, 10:32 am

    Thank you! I googled how to make a blog button and your was the first. I got it right away. Thank you a million times!

  • Radishgirl Thymes October 5, 2012, 7:20 pm

    I searched how to make a blog button. Your link was the first up. So glad! Thank you!!

  • Melinda Stanton (Auntie Em) October 3, 2012, 9:06 pm

    SUCCESS!!
    Thanks so much for the step-by-step! My button is there. My code is there too, but it’s not in a box. Any idea what I missed?

  • Fenny September 30, 2012, 12:04 pm

    Thanks so much for thsi tutorial – I got it figured out! I never thought I could make a blog button, but now I am sorta hooked. It took quite a while to make the button and work out how to do the details and such. But the HTML part was the easiest, even though the code for my button looked different than yours, I simply plugged it in, changed the ” and voilá, it worked! That was so exciting! So thanks! Oh, and I used BEFUnky and Photobucket.

  • kerri andersen September 16, 2012, 9:29 am

    I’m on a mac and on picasa there is no “copy image URL” button, only “copy image address” i think. but the code for that does’t look the same. also, YourDomain….what exactly is that supposed to mean? my code looks different than yours…can you please help me?

  • Christi Marcotte September 13, 2012, 12:05 am

    Thanks so much for your very clear and understandable post. I followed your steps– I think Picasa has changed some things since your post, but I was able to find my way through– and I couldn’t be more pleased with my new button! Feel free to come by and take a look! http://www.4iampersuaded.com
    ~ Christi

  • TC Booth September 1, 2012, 5:36 pm

    Thanks so much for the tutorial on creating the blog button. It worked! :)

  • Anne E. August 27, 2012, 1:33 pm

    Hey DP!

    I just have to say this, Thank you so much for this post, This is the only post about creating buttons that worked, Actually it took me a long time to perfect my button, I used the pixlr express to make my button and I think it’s kinda cute.

    here it is:

    http://annenother.blogspot.com

    Thanks again,

    Anne E.

  • Crafting Vicky August 25, 2012, 11:51 am

    Thank you so much for this tutorial… I was able to create the button. Now I just can’t seem to manage how to make the drop box lol If you could help this would really be wonderful!!!!

  • Rebecca August 14, 2012, 8:31 pm

    Thank you soooo much!!! I couldn’t agree more with the other commentees!! I’m definitely your newest follower and I can’t tell you enough how much I appreciate the instructions, not to mention WHAT a BUTTON is! lol good grief as Charlie Brown would say! haha thank you!! :)

  • Thalia August 11, 2012, 10:15 am

    Hi!
    I’ve tried ALL tutorials from ALL bloggers about how to make your own grab button,
    And I’ve finally got it down!
    Except the only thing is that my image isn’t showing it shows that little tiny box ontop of the grab code instead.

  • Jackie Ryan Masek August 9, 2012, 7:41 pm

    I did it! I did it! You helped me! It didn’t work at first so I re-read all of your instructions very, very carefully. It was the quotes! Once I redid those it works! You are so awesome for sharing this information. Thank you!

    • DP Nguyen August 9, 2012, 10:11 pm

      YAY so excited about that!

  • Nissa August 8, 2012, 8:45 pm

    Thank you for this step-by-step tutorial! I’m so glad you mentioned to check the quotation marks. Once I edited those it was this magical transformation into a usable blog button! Many thanks.

  • hena tayeb August 2, 2012, 3:48 pm

    Perfect. Thank you.. am bookmarking this for later.

  • Roneet July 24, 2012, 5:05 am

    I’ve got a question…
    On my blog – I can see the image along with the ‘follow me’ code, but on other blogs when they copy the grab box link it doesn’t show the image (although it does link to my blog)…
    Have any idea why?? Thanks so much

    here’s an example of a blog where you can’t see the image. http://hishroneet.blogspot.co.il/
    this is my blog where you can see the image – http://www.englishatbarlev.blogspot.co.il

  • Roneet July 24, 2012, 4:55 am

    Thanks so much!!! That was a great help:)

  • Faith July 21, 2012, 10:08 pm

    Ok. I copied the code in step four only. I replaced with my own url’s. But, when i try to open it in Safari to test it i get the blue box with question mark and then the second part of the code.
    This has been the absolute easiest thing to follow. I know the image source is right because I can easily open it in Safari by itself. It’s when i add the code for the code box that i get messed up. Here is what i have in my notepad:
    HELP!

    <a href="http://mrsmannscrayonbox.blogspot.com&#034; target="_self"><
    img src="https://lh4.googleusercontent.com/-sCP6ql16g_E/UAtnKMRcVzI/AAAAAAAAAFc/xLIVXj1JI-U/s125-c-k/blogbutton.jpg&#034;
    alt="ThecrayonBox" width="125" height="125" /></a>

  • lya July 19, 2012, 3:33 am

    hi

    i have been searching hi and lo for this!!!! thank you so much dear Nguyen- you made blogging heavenly with this!!

    but one thing i find troublesome is i cant use picnik anymore, pixlr is so complicated and i lost my photoshop button file.

    please advise on which software should a dummy like myself use to make a button and not kill myself :)

  • Joanna July 15, 2012, 3:53 pm

    Hallo. Thank you very much for your tutorial! But something isn’t working.On my website you can see only two images do not see the code ( http://becreativemommy.blogspot.co.uk/ ). Can I send you my code on your mail to check?

  • Brooks_25Years July 11, 2012, 10:50 am

    This is SO great, thank you so much! I am completely hopeless when it comes to coding and usually when I read a step-by-step instructions I end up wanting to cry and needing a glass of wine. This was so straight forward and easy to follow, thanks again!

  • Jamie July 5, 2012, 11:46 am

    Thank you so much for this. It worked!

  • Joell July 2, 2012, 4:14 pm

    THANK YOU!! I did it! Makes me feel like a proud fledgling computer nerd! Woo!

  • Natasha Devalia June 26, 2012, 11:24 am

    This was perfect! I’ve been terrified of putting up a button for months….your blog just took me through the whole process step by step and I’m almost there! Just need to fix the image itself, and it will be up tomorrow!!

    I really know nothing about this stuff, so I was baffled by the whole image URL thing. What I did was to just upload the image into the media section of my wordpress dashboard. And I had an image URL –
    THANKS!!

  • Erin @ DIY On the Cheap June 25, 2012, 12:05 pm

    Thank you! This was so helpful. I was having all sorts of issues with my code and it turned out to be nothing more than the quotation marks, like you said! What a simple solution that I would have never figured out.

  • laurel June 24, 2012, 8:10 pm

    Just wanted to thank you for the tutorial!! Thanks for the help!

  • Lisa June 23, 2012, 8:07 pm

    I did it! Thank you!! :)

  • Cassie H June 17, 2012, 10:42 am

    Thank you so much for the tutorial! I was racking my brain trying to figure out how to do it. P.S. I did have the smart quotes issue. So glad you put that in there because I never would have thought of it. Thanks again!

  • Sara June 15, 2012, 7:46 am

    I’ve tried this. (clearest directions I’ve found!) But something isn’t working. I can’t even get the button to show up, much less the grab box.

    Here’s my code, hopefully you can see where I’m messing up. :)
    Thanks!

    <a href="http://theamerineclan.blogspot.com/&#034; target="_self"><img src="http://lh3.googleusercontent.com/-y47hQ_0MJSo/T9sqvZzaBLI/AAAAAAAAAKo/4UGjkcOaI3o/s125/img_06971-e1339102558908.jpg&#034; alt="theamerineclan" width="125" height="125" /></a>

    • Sara June 21, 2012, 12:35 pm

      Never mind…I finally figured out the problem. :)

  • Eric June 6, 2012, 3:16 am

    Thank you–finally figured it out!! Your troubleshooting was esp. helpful! Here’s mine:

    Thanks again!

    Eric “Cap’n Aux” Auxier
    Captain, A320
    capnaux.blogspot.com
    http://www.youtube.com/watch?v=fqMmumD5bZk

  • Sue June 4, 2012, 2:19 pm

    The code worked great for me but, the picture of the button is showing to big. I made sure the picture source is 125 and in the button code is 125. What am I doing wrong?

    • DP Nguyen June 5, 2012, 11:29 pm

      Check the code to make sure that it is 125 x 125..

  • Donn Engbretson May 31, 2012, 1:57 pm

    Should i simply say just what a reduction to locate someone who really knows what theyre dealing with on the internet. You positively know how to get a challenge to mild and produce it important. More folk have to understand this and perceive this side with the story. I cant believe you aren’t more in style because you positively provide the gift.

  • lindsay May 29, 2012, 11:13 pm

    i got the code to work and i got the picture of the button up but not the grab box. what all i doing wrong? this is the code i’m using:

  • Filex May 25, 2012, 9:43 am

    i want to make my picture from google to my blog

  • Anna May 23, 2012, 12:26 pm

    Just wanted to say thank you so much for making this so simple!

  • Fiona Gregory May 13, 2012, 6:02 am

    I was so afraid of writing in HTML code but your instructions were clear and concise. I managed to create both versions for my blog today. I also linked back to this fab tutorial. Thank you. Just to let you know I used pic monkey now that picnik is kaput!

  • Mridul Godha May 11, 2012, 3:40 am

    Hi, that’s a really great post. Can you please tell me a code which allows me to track the no. of people who are using my blog button on their websites? Thanks a lot for your help.

  • Nicki May 7, 2012, 1:21 pm

    And I am linking this post in my blog as well!!!

  • Nicki May 7, 2012, 1:20 pm

    YOU ARE THE VERY BEST!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! I am so dumb when it comes to this and I have tried making buttons in the past and I followed your steps (had to change all the quotes too) and it worked!!!!! This was sooooooo incredibly helpful. Thank you so much!!!!

  • Firdaus May 6, 2012, 2:33 pm

    great tutorial! it didn’t work out but after I changed the quotation marks, it works! thanks! =)

  • Karin April 29, 2012, 10:05 am

    I am a complete dumb dumb. I’ve tried to do this but can’t manage to figure it out. I use Wordpress.com. I uploaded the photo to Picasa but when I right click, there is no option for copy URL. The closest thing is copy shortcut which I tried. I checked the quotation marks and I just can’t seem to make it work. HELP!!

  • fruit.root.leaf. April 24, 2012, 9:55 am

    Oops! Accidentally hit enter too soon. See below for the full comment r.e. getting a URL for a Picasa-hosted image.

    P.S. Looking at a few of the recent comments, I think some other readers might be having issues with their privacy settings in Picasa. Here’s what I did, and it worked like a charm:
    1. Upload button image: The button image should be uploaded as a single image, outside of any folders.
    2. Privacy settings: Set to public, or the image won’t display. Period. You upload outside of other folders to ensure you can provide public access to the picture without providing public access to other personal images.
    3. Right click on the picture, and select “copy image URL.”
    4. Paste URL into a NEW browser window. Check this URL to see if it says http or https.
    5. IF it is an https, that means it is a secure image, so your code won’t be able to access it. Delete the “s” and hit enter. You’ll see a new URL in your browser – a URL which IS publicly accessible. If it doesn’t have an “http” anymore, don’t worry about it.
    6. Copy & paste this new URL into the code provided in this blog post, and you should be all set.

    ONE LAST THING
    I initially read the post instructions and thought I needed to post BOTH the code for the image (step 3) and the code for the grab box (step 4 ). If you do so, you’ll get 2 images, and one grab box. Only use the code in step 4, and it will display as described in the post.

  • fruit.root.leaf. April 24, 2012, 9:50 am

    P.S. Looking at a few of the recent comments, I think some other readers might be having issues with their privacy settings in Picasa. Here’s what I did, and it worked like a charm:
    1. Upload button image: The button image should be uploaded as a single image, outside of any folders.
    2. Privacy settings: Set to public, or the image won’t display. Period. You upload outside of other folders to ensure you can provide public access to the picture without providing public access to other personal images.
    3. Right click on the picture, and select “copy image URL.”
    4. Paste URL into a NEW

  • fruit.root.leaf. April 24, 2012, 9:45 am

    Hi,
    Thanks for this useful post! The HTML wasn’t a problem for me, but I had issues getting the photo to display. I eventually figured out that the link (from Picasa) was an https, not an http link. Once I deleted the “s” and re-viewed the image in my browser, I was able to copy the publicly accessible link associated with the image. That’s what I used in the button code, and it worked great. You might consider adding a “check the http/https” note in the trouble-shooting section. That is, if I’m not the only one who’s run into that little hiccup.

    Best wishes,
    Bethann

  • Sonia April 23, 2012, 10:58 am

    I’m having the same problem as Cat B. I’m using blogger. The picture and code are there, but the slider box is not. Where’s my mistake? Thanks!

  • Gena April 13, 2012, 10:36 pm

    Hi DP!

    So happy that I stumbled upon your fabulous tutorial. I have been blogging for about 3 months and I figured it is time to ‘get my button’ bottom in gear! Working on it now. Thanks for much for this post. It looks like it keeps on giving.

    Gena

  • Trixi H March 21, 2012, 2:51 pm
  • Susi March 17, 2012, 10:41 pm

    Thank you. You are a life saver. It was fast and easy!!!! :) I now have a blog badge on my blog.

  • Cat B. March 15, 2012, 5:21 pm

    I tried this and I have to say, of the 5 different sets of instructions I’ve received on the internet about how to do this, yours is the cleanest and most clear. I am having trouble with it though and I followed your directions EXACTLY. When I put the code into the text widget in Wordpress, I get my image and I get the code, but no cool grab box with the sliders. It appears to be a problem with the box, not the image part of it, but I am not HTML savvy enough…yet…to figure it out. After working on it for 6 and a half hours today. I’m giving up and will give it a go at another date. Creating the button and getting the code for that was uber-easy. Getting the box to appear, not so much.

  • Cheyla March 11, 2012, 3:13 pm

    Thank you for this post, it really helped! I am still having trouble with the html though. I read your entire post and can’t figure out what I’m doing wrong!

  • Amy at The Red Chair Blog March 10, 2012, 9:28 pm

    Thank you for sharing this fantastic tutorial. I’ve been blogging since 2008, and I just finally got around to making a blog button!! It took a few attempts–for some reason, when I read that Blogger doesn’t like quotes and replaces quotes with &#34, I thought that I was supposed to omit the quotes from the code around certain URLs. I read carefully and finally figured it out! Thanks again–a great service to those of us who are HTML challenged!

  • rachel March 2, 2012, 4:51 pm

    Hi! I am a newbie blogger, still trying to figure out all the “dashboard” stuff that goes into running a blog. I wanted to thank you for this tutorial, it worked like a charm on the first try!
    I found it really clear and really easy to follow.

  • Shannon Stubbs February 27, 2012, 5:06 pm

    Hi! Thanks for the post, this is exactly what I have been wanting to do. Wondering if you could help me out though. I’d be happy to link back to you because this has been extremely helpful…however, I can’t make it work. Not sure what I am doing wrong, but have no doubt that it’s something.

  • Linda February 9, 2012, 10:44 pm

    I would like to ask for your help.
    Yes I have read all the directions from the start.
    As a matter of fact I been working on this for 11 days now and don’t seam to be able to get it
    I can get the link but not the picture.
    In step 3 you state Important do not forget to end the code with
    In step 4 you state Here is the entire thing you will need but you do not end it with the code,
    confusing to me. Plus my image doesn’t have a www in front of it.
    Removing all the &#34 why and replacing them??? what do i replace them with?????

  • Healthy Recipe February 8, 2012, 7:20 pm

    Thanks buddy, your article really adds to my knowledge. By the way, I’m looking for information about the Nutritional Facts of pregnancy, can you provide it to me?

  • Liz Slater February 7, 2012, 11:15 am

    Hi there,

    I’ve been trying and I can’t get this to work. I created my button in picnik, saved it into picasa web albums but cannot find a URL for it. Right clicking gives me lots of other options but not a “copy image URL”. I’m guessing I didn’t upload it properly, so how do I do that?

    Thanks

  • Gerty February 1, 2012, 11:46 pm

    Can I just say a huuuuuuuge thanks! I found your site and your tutorial on making a blog button was so very helpful. I just made one of my own! Little old me…..stay at home mum, ex preschool teacher…what do I know about HTML?????? But it worked! Thanks again.

  • Tara January 31, 2012, 3:41 pm

    I am having a hard time trying to do this. Is there anyway you could help me please or email me, lol. Thanks

    Tara

  • Jacqui January 27, 2012, 6:35 pm

    Excellent tutorial, very thorough and easy to follow! Also the troubleshooting tips at the end were a life saver. I had the quotations problem :)
    Thanks for the post.

  • Bazbee January 26, 2012, 9:40 am

    Hi,
    You’ve worked hard creating this tutorial.
    Like you I’m an avid user of Picnik but unfortunately Google have decided to shut it down in April.
    There doesn’t seem to be an alternative to the simplicity of Picnik used in conjunction with Picasa.
    I’m distraught.
    Have you any ideas?
    Regards
    ~Baz~

    • DP Nguyen January 28, 2012, 1:34 pm

      Hi Baz,
      Sorry for the late reply, but http://pixlr.com/editor/ is a free editing system that I use. No, it doesn’t have the simplicity of Picnik – it’s more similar to Photoshop, but it does work and you can save your changes to your computer, then upload it to your Picassa account.

      Best,
      DP

      • Bazbee January 30, 2012, 8:29 am

        Hi DP,
        Another online editor that mirrors Picnik identically is http://ipiccy.com/
        It doesn’t have Picnik’s fancy frames (I didn’t use anyway) but has inner/outer framing plus all the essentials and easy to use.
        Perhaps this is one to consider when April comes.

        ~Baz~

        • DP Nguyen January 30, 2012, 9:24 pm

          Thanks, Baz! I need to update this article with a new Picnik alternative anyway. I will check it out. Thanks so much

          • Bazbee January 31, 2012, 9:43 am

            Hi DP,
            Thank you for your replies.
            Like Picnik ipiccy is also Google as it shows as part of the Google+ platform.
            There are net protest movements ‘Save Picnik’ and ‘Saving Picnik’.
            Good luck to them but slim chance I would think.

            ~Baz~

  • Tara January 24, 2012, 8:36 pm

    Thank you so much for this tutorial. It was so easy to follow compared to some of the other tutes out there. Created my first button in under ten minutes! Thank you!

  • Carrie- young living oil lady January 16, 2012, 1:08 pm

    I love these blog buttons and have been wanting one. I am so excited to try and figure it out and do it myself. I will follow your instructions and hopefully soon you can visit my site and see my button! Thanks! :)

  • Karthik January 7, 2012, 4:59 am

    Ok, so it’s seriously not appearing. But I think it’s something like this : ” <a href " and then all the other things. So, can you please help me?

  • Karthik January 7, 2012, 4:56 am

    I think this did not appear in the above comment. SO, here it is.

  • Karthik January 7, 2012, 4:55 am

    Hello. I did all of that but when I view my blog, the box looks like this; the picture cannot be viewed and there is that small sign which denotes that, and then

    this appears in text. Please help me.

  • Whitney @ Grassroot Elegance January 2, 2012, 10:40 pm

    Thank you so much for a clear tutorial! A girl like me who is still learning all of the code and how it works really appreciates how simple this was to actually create.

    I seriously can’t thank you enough!!!! :)

  • Charlotte January 2, 2012, 5:05 am

    Hi, thanks for posting this tutorial, it seems really easy to follow. I am having some problems with it though and would really appreciate any help you can give me. I am following just step 4 but the problem is with the link to my photo I think, it doesn’t come up at all like you have given examples for, Im using Picasa and it looks like this – Tutorial%2520Tuesday%2520Button.jpg
    So when I follow all of your instructions I just end up with a box with ? in it and the written info below.
    Any ideas?
    Thank you, Happy New Year

  • Janet January 1, 2012, 7:49 pm

    Hi – I cannot figure out how or where (on Picasa) to get my button image URL to copy and paste into the code in the text box. Can’t get this to work.

    • DP Nguyen January 1, 2012, 9:16 pm

      In Picasa Web Albums, click on the photo you’re interested in. Right click on that photo, and select “Copy Image URL” when the option comes up. That’s how I was able to do it.

      Since you have Wordpress, you can also upload it to your Media library, and use that photo URL instead.

  • Shelley December 30, 2011, 5:11 pm

    Thank you for your awesome content! You do a great job explaining things and I actually feel like I learned something today…I don’t have children, nor have any plans to…but your blog is on my favorites list.

  • isfa December 10, 2011, 4:44 am

    THAKSSSSSSSSS… you tutorial helps me alot..huhuhuhu

  • Cat @Breakfast to Bed December 8, 2011, 8:23 am

    you are a goddess. thank you.

  • Ashley December 6, 2011, 5:24 pm

    I am also having a problem with the button showing up. I have created one but when I plug in your code my URL for my button and my blog address, nothing shows up. Please help. This tutorial was SO helpful…I think I am just slow :)

  • Jules November 25, 2011, 10:30 am

    You are magic! I never thought I wouldbe able to sort out how to make a button but I ahve done it with your help! Thank you so much!!

  • Amy November 21, 2011, 11:05 am

    Thank you for posting this. I have been trying and playing with the code for 2 days and I almost have it but it still will not work for me :( Do you think if you have time you could email me a little guidance?

    <a href=http://www.capecodmommies.com alt=”Cape Cod Mommies” width=”125”, height=”125”

  • Kelly @ Corner of Main November 19, 2011, 8:20 pm

    Awesome! Thanks so much =) The info you posted about the quotes really helped!!

  • Digi Stitches Embroidery and Gifts November 12, 2011, 5:56 pm

    Sorry! It all seems to make sense, but I’ve tried it five times and can’t get it to work. :(
    For now, I will leave it as it is on my blog. Peeps are not able to “grab my button”. It just takes them to my other online boutique until I can get these codes right. Probably seems devious to most, but I’d rather have my button showing and doing the wrong thing than no button at all.

  • Miss Amanda November 9, 2011, 10:13 pm

    Thank you so much for your post! I haven’t done HTML in SO long! It took some tinkering (mostly with copy/pasting the image URL) but I think I’ve got it now!

  • Lorraine October 30, 2011, 2:09 pm

    Do I have to have a domain name linked to my blog in order to find the URL of my blog? Just the blog name (blahblah.blogspot.com) doesn’t work. Even with the http:// before, it seems I need a www. That seems to be what you have so I think that may be the missing piece.

  • David Mcilvenny October 28, 2011, 6:45 pm

    Thought about it, and now sharing it with you

  • Evie N October 17, 2011, 9:55 am

    I cant help but to feel frustrated!!! i cant do it :( i been trying since last night and i couldnt even sleep just thinking about it :) please help me

    Evie

  • Rose Rouge October 13, 2011, 7:20 pm

    Thank-you so much for this!

    I have been wondering how to do this for ages!

    At first it didn’t seem to work but I did as you suggested and rewrote the quotations and it worked :)

    Thanks again!

  • TToria October 13, 2011, 5:50 am

    Hi there & thanks for the tutorial!!
    For some reason getting my button on my blog is just not working- actually, i am doing something wrong!
    Could you please help?
    The final code i came out with to paste into sidebar is

    <a href="http://.ttoria.blogspot.com&#034; target="_self"><img src=" http://i1121.photobucket.com/albums/l514/TToria1987/blogbuttonattempttwo.jpg " alt="TToria" width="125" height="125" /></a>

    Please help :-S

    TToria
    xoxo

  • Winlove October 10, 2011, 12:56 am

    Yey!! super useful! ♥ thanks much!

  • Alia October 1, 2011, 3:25 am

    Hi. I really appreciate you doing this post and look forward to perusing your other helpful posts! I am, however, having a dickens of a time trying to get the code from the image. When I right click, I can not get a short image url. It says copy image address. It is very confusing! I have spent hours this morning and just need to ask for help! What can I provide you with to help me? I thank you so much in advance!

    Alia

  • Beth (http://pageturnerby-beth.blogspot.com) September 28, 2011, 12:40 pm

    Hi,

    That post was soooo helpful! Thank you so much! But im having trouble from step 3, Iv created my blog button and saved it on the computer but what do I do next! I uploaded it onto piscasa web albums but I dont know what to do now!

    Bxx

  • Sheila September 27, 2011, 10:40 pm

    This probably sounds like a ridiculous question, I am trying to make a grab button. What is the difference between “your site title” and “your site URL” . I got the blog button part to work, but now this grab it thing is keeping me from my beauty sleep :O

  • malia p September 24, 2011, 11:47 pm

    thanks for the tips! i posted a link to your site on my blog!

    http://livinthemommylife.blogspot.com

  • Mercy September 17, 2011, 6:25 am

    Ok, so I got step one complete, but step two is not working for me. I’ve uploaded the pictures (I have 2 blogs and need a button for each) but when I right click on them, there is no option to copy the url, only the usual save as options. Is there another way I can get that code?
    Also, my Picasa page doesn’t look the same as your screenshot. Could it be a different version?

  • Monica Blaschke September 16, 2011, 11:06 pm

    I think I did it,…………..but my code isn’t in a box,………………

  • Monica Blaschke September 16, 2011, 10:54 pm

    Please help,……….I made the first set of codes,..what do I do with them?

  • Kristina Gulino September 9, 2011, 8:53 pm

    Under Step 4, is that your final code, are you supossed to add the code from Step 4 before it? I understand how to plug everything in, I am just not sure if I have it all in it’s entirety.

    • DP Nguyen September 9, 2011, 10:20 pm

      The code in step 4 is the only code that you need in order to make the blog button and grab box appear.

  • Kari Lemon September 6, 2011, 12:30 am

    Thank you for taking the time to create this! I can’t wait to try it. I have been wondering how to do this, and your post is very helpful!

  • Monica Dunham August 31, 2011, 12:15 am

    Help! I created my “button code” and the “grab my blog button code”, but I don’t understand how to combine them. Am I supposed to combine it into one code? Here is my button code:

    From

    Do I fit this entire code into the “grab my button” code under “your button image url”? I did this, but two buttons come up. Please help! Thanks!

    • DP Nguyen September 3, 2011, 3:58 pm

      Hi Monica,

      You should only use the code from the “Grab My Blog Button.” That’s the only one you should use. The other one was just to explain to you what people will grab. Hope this helps.

  • cassandra pearson August 27, 2011, 12:26 am

    i need help with the grab me button. it looks right, but i dont know if it works…everyone is confused about it. No one knows how to do it…i have pages of codes that i tried out…my eyes don’t work anymore…

    message me back and i’ll give you details so you can help me.

    • DP Nguyen September 3, 2011, 3:57 pm

      Hi! You need to use the code in Step 4. Just change what’s in red to your own specific needs. Good luck.
      Email me if you need me to help you further.

  • Kelly H August 21, 2011, 8:59 pm

    I am so glad I found your website. This was so easy to follow. I made my button and uploaded it to PIcasa but the URL is nothing like what you posted. What I am doing wrong?

    • DP Nguyen September 3, 2011, 3:55 pm

      Did you right click to get the URL? It needs to have a .jpg ending, or something similar for it to work properly.

  • Jennifer August 20, 2011, 11:13 pm

    So glad I came across your post on bloggymoms. I am a new blogger and looking to brand myself! Wasn’t sure how to do this and now I know! Thank you!!

  • Di-licious August 9, 2011, 4:24 am

    Thank you so much for providing such an easy to follow explanation. I now have a gorgeous looking Badge on my site! I found a link to your post via an endorsement from another blogger on Bloggy Mums.

  • Living July 21, 2011, 12:15 am

    How funny- I just made a similar Tutorial on creating custom blog buttons!

    http://livingtodaystech.blogspot.com/2011/07/how-to-create-button-for-blog-part-1.html

  • Crystal July 14, 2011, 5:52 pm

    Hello! I’m having a little bit of trouble making a “grab my button” appear in my widgets. I’m using the code:
    <a href="”http://www.SoooBig.WordPress.com”" target="_self"><img src="”http://sooobig.files.wordpress.com/2011/07/sooobig-icon-cropped-125×125.png?w=122″" alt="SoooBig" width="125" height="125" /></a>

    The button shows up, but it’s not linky – and is followed by code. . .
    Thoughts??

    Thanks!
    Crystal

    • Crystal July 14, 2011, 5:54 pm

      For whatever reason, the code I pasted into the comment window isn’t complete.

      *Sigh*

      • DP Nguyen July 14, 2011, 6:57 pm

        Email me and I will try to help you out.

  • Andrea Butler July 14, 2011, 11:14 am

    SUPER SUPER SUPER!!!!!!!!
    I never thought I would be able to do this , I meanm I am totally dumb for this code stuff, but we made it!
    Your smart quotes tip was RIGHT ON!!!!
    now I have a cute button thanks to you!

  • Essential Mama Baby July 12, 2011, 12:12 pm

    Hi Nguyen,

    Before reading your last post here, I tried to fix it and it is now working!!!!!!!!!!! I just have a question. I have now 2 “buttons”, one with image and code box below and another one just with the image. Even though I have tested and the code is working, I just want to make sure I should have 2 buttons and if so, where do you usually put the button image?
    I tried without step 3 to avoid 2 buttons on the side bar, but when I would copy and paste the code in the grab box it only show a window with a question mark in the middle. (I think is because it couldn’t find the picture). Now that I followed all steps, the copy and paste is working (it is showing my button) but as I said I have 2 buttons on my side bar.
    Thank you very much!
    I’m grabbing your code right now and placing on my blog!

  • DP Nguyen July 12, 2011, 8:52 am

    Hi Everyone,

    Please skip Step 3, and just make the Grab the Code Box. I think you’re getting confused. The step 3 with the button image is the code readers get when they copy and paste the code in your Grab box.

    Anyway, just skip step 3 and only use the code in step 4, and that should clear up any confusion. If you still have questions, email me at dp@mypregnancybaby.com and I’ll do what I can to help you. All I ask is that you link back to my site or this blog post.

    Thanks!

  • Essential Mama Baby July 12, 2011, 2:58 am

    Thank you very much for your tutorial! I have done everything and it looks just like yours with the button and code box but when I do the test to check if it is working, only a square shows up with a question mark in the middle:(
    Can you help me?
    Thank very much!

  • Kim June 24, 2011, 10:55 am

    Hi again,
    It’s me bugging you again. I just had a general question about clip art….is there a way to use clip art images in my blog for free? I know there are sites that you can use, but you do have to pay for the images even though they say “free”. Is there a way to use clip art images without paying, or do you reccommend subscribing to one of the sites for a couple hundred bucks a year? Thanks, hope you are doing well!
    Kim

    • DP Nguyen June 24, 2011, 7:41 pm

      Hi Kim,

      I use a few places for my free stock photos. I think these places also have clip art, but I use Stock Exchange (http://www.sxc.hu/) and PhotoXpress.com.

      Hope that helps.

  • Loraine Alcorn June 22, 2011, 6:29 pm

    Hi Im new and really trying to make a button for my blog Ive tried your code and although the small picture shows up everything else just shows up as a bunch of code . Im using blogger and followed your instructions even copying your code and then replacing the red lines with my own stuff .I used photo bucket because when I tried the other one and right clicked it only gave me options to save picture or save as but when I used photo bucket I could copy the url for my logo . this I copied into the code replacing the red examples with my logo url Ive tried everything to get it to work and really feel stupid . I so wanted a button for my blog can you help me thanks
    lori
    http://lorialcorn2006.blogspot.com/
    lorialcorn2006@yahoo.com
    Im following you too:)

  • Kim June 18, 2011, 12:03 pm

    I just bragged about you and your blog on MommyBlogs.com! Thanks again!

  • Kim June 18, 2011, 7:36 am

    I did see in one code they use quotations marks AND the &#34 (or whatever it is). Is that ok? I didn’t know if I should change the other quotation marks to the other code…..

  • Kim June 17, 2011, 2:49 pm

    This has been fantastic although I can’t get it to work. I am ready to kill someone. Any chance you could help me out. I’ve been working on this for 2 darn days, which is ridiculous! Your post has been THE most helpful, but it’s not working. I’m on blogger and when it doesn’t show up on my blog, I go to Edit my gadget and then code is missing. Is that weird? And do you put both codes in one gadget? HELP!
    Kim

    • DP Nguyen June 17, 2011, 2:51 pm

      Kim,

      Did you use the code in step 4? That’s the ONLY code that you’ll need. You don’t have to use both codes.

      • Kim June 18, 2011, 7:26 am

        I will double check it. I tried all different combos – I am NOT a code person for sure!!

        • Kim June 18, 2011, 7:47 am

          Nevermind! It worked, I LOVE you!!! Iwill definitely share this post and your site everywhere!!! Thanks so much!
          Kim

  • Eilis June 10, 2011, 11:07 am

    Your tutorial is great and I have almost got it. I just have some words that are showing up outside the link box. I think it may be related to by button being 200 wide and 35 in length. Can you help me? This is what I have.

    alt=”GrowinginPreK” /><a href="http://www.growinginprek.com/apps/blog/&#034; target="_self"><img src="http://www.growinginprek.com//GrowingInPreK_button.jpg&#034; alt="GrowinginPreK" width="200" height="35" /></a>

  • Brooke May 30, 2011, 9:23 pm

    I can NOT get the brab my button part to work for me…I end up with three pictures and some codes! Can you help me? I will CERTAINLY link back to this post! I got the button part perfectly thanks to your help!

  • Laura May 20, 2011, 2:18 am

    Awesome post! Thank you for the clear instructions. I found it very easy to follow and now have blog button!

  • DP May 17, 2011, 1:17 pm

    Double check the quotation marks… That might help too

  • Shelley May 17, 2011, 1:07 pm

    Hello! I’m having the SAME issue that “confessionsofamoneysavingmom” is having!! Creating the button was very easy thanks to your tutorial, but the code stuff is not working exactly like you mentioned…..grrrr… Help! When I right click on the newly created pic in my Picasa album, it gives me this really long name that doesn’t at all look similar to your example (it doesn’t even include the name of the JPG file for some reason) and therefore I think it will not work because of that. Any help you can provide of suggest will be greatly appreciated! :) Thanks!

    Shelley

  • lisa March 19, 2011, 5:52 pm

    thank you for the tutorial on blog buttons, I came over from mommy d’s mystery blog hop through all that glitters, and I’ll be coming back to join your thursday blog hop, please stop by sometime when you get a moment, I’m following you
    http://www.shopping2scale.blogspot.com
    Lisa

  • Anne March 11, 2011, 7:40 pm

    Thanks so much. I wanted to know how to do this as I’m a new blogger. I just asked my husband about it today (he’s a programmer). Danielle , on S & A Designs posted this and linked to you. I’m sooooooooooooo happy to find this information. Thanks a billion for your help! Anne

    • DP March 11, 2011, 7:49 pm

      You’re so welcome :-)

  • Monique Bragg February 6, 2011, 4:46 am

    Thank you so much for this! I have been wondering how to do this for ages! Your blog is really helping me with my blog! There was a little learning curve. Once I read EVERYTHING you posted, blogger and I were friends again. I just wish I knew how to center it on a page. I can get the icon to center but I can’t get where they get the code to center. But at least people can get it now. YAY!!!!

  • cindy January 30, 2011, 8:43 am

    wow! very much of a big help.. tanx for the info.. :)

  • confessionsofamoneysavingmom January 27, 2011, 1:02 am

    Oh my goodness sakes!!! I am SOOOOO frustrated right now with this darned button business!!
    BTW Hello, you commented on my Mom Bloggers Club profile, I am now a new follower of yours and absolutely love your blog! And would absolutely adore it if you would follow back…NOW back to my frustrations!
    I created my blog button (finally after months of not understanding how, you totally made it easy and enjoyable!) BUT I cannot for the life of me, get these darned codes right! I am going out of my mind! Everytime I create the html gadget,my blog button never shows up for me, and when I click in the general area of where its supposed to be, it says ‘sorry this page of Confessions of a Money Saving Mom does not exist’ but it has my blog name highlighted to where they could essentially get to my blog anyways, but oh goodness this is driving me bonkers honestly!! Help please!? I would so appreciate it, I am really trying to do it myself I promise but wow!
    Sorry for the book worthy comment! You can email me at angelsamongus1986 at yahoo dot com!
    Thank you so much, or you could reach me through my blog! :0)
    http://confessionsofamoneysavingmom.blogspot.com

    • Anonymous January 27, 2011, 1:19 am

      I will definitely email you and see if I can help. You may have the quotes screwed up, or perhaps the URL… but we will figure it out! :-)

  • Raquel January 20, 2011, 2:56 pm

    This is so wonderful. Thank You! Thank You! I’m gonna get right on this.

  • Hot Mess Mom January 14, 2011, 4:24 pm

    How great of you to post such helpful things without charging for them! And I know Classified Mom, your recent commenter, is just as helpful! I’m very new to blogging so I am LOVING finding not only a lot of GREAT blogs but also some great bloggers so willing to help us “newbies!!” :) Thanks!

    I’m your newest follower at http://learningtolivemybestlifein365days.blogspot.com/
    if you’d like to follow me back! :)

  • Kristina January 13, 2011, 5:31 pm

    This is great! When I get home tonight this will be my new project!! Thank you!

  • Classifiedmom1 January 13, 2011, 5:18 pm

    Thanks for contacting me on Bloggy Moms- I’m now your newest follower! I made my own button and designed my own page! I think it’s very important that the look of your blog reflects your personality as well! http://www.classifiedmom.com
    Aimee

    • Anonymous January 13, 2011, 5:22 pm

      Hi Aimee – Thanks for the tip. I definitely agree. I am going over to check out your blog right now!

  • Erica Pearsall Hall January 13, 2011, 5:17 pm

    I’m a new follower from http://365daysasmom.blogspot.com/ I hope you will follow back! I’m trying to create a new button and also a banner for my blog. You info was useful but how can I do something like this if I’m not going to be using a photo? And how do I create a banner?

    • Anonymous January 13, 2011, 5:25 pm

      Hi Erica – What do you plan to use instead of a photo? Do you mean that you want to use text instead? You can still follow the instructions, just create a blank canvas with any color you want for a background.

      What size do you want for your banner? Decide on the size you want, create a banner with the size using Picnik or another photo editing software…

  • Texastypeamom January 11, 2011, 5:29 pm

    Thanks for the helpful info!
    I’m a new follower from Social Moms!
    I hope you’ll come check out my blog – http://www.texastypeamom.com

  • Kristie@thedecorologist January 10, 2011, 7:24 pm

    Ooh, I definitely need to create a “button.” Thanks for the tutorial. I just started following your blog. Hope to see you around on The Decorologist!

  • Melanie January 10, 2011, 5:10 pm

    HI! Thanks for stopping by my blog! Here to follow back :)
    btw great tut on the button! I have to redesign mine I think, this is a great quick read to freshen up on the directions!
    ~melanie

  • Cheekymommaof2 January 10, 2011, 3:31 am

    I’m your newest follower and would love for you to stop by and follow me back!

    Bridget from Being Frugal & Making It Work!

  • Nanasblabberings January 10, 2011, 2:42 am

    Cool! This will be so helpful, I just started blogging and my daughter is helping but with 3 kids under the age of 6 it is hard for her to help all the time. Thank you for sharing!!

    www(dot)nanasblabberings(dot)com

  • Ashley Taylor January 9, 2011, 5:48 pm

    This is perfect and super helpful! Thanks!

  • Kim January 9, 2011, 5:48 pm

    Thanks. I just figured it out last night … well kind of ..lol .. I will use this info to see if I can make another one :)

  • Anonymous January 9, 2011, 5:33 pm

    Thanks for following, Amy.

    Carla – Please let me know how it works for you! Good luck!

  • Carla January 9, 2011, 5:15 pm

    DP–this is great! It is so perfectly straightforward…I can’t wait to try it. Except that I have to wait until I can do it all in one sitting because it is so entirely new for me. I’ll let you know how it goes!

    ~Carla

  • Amy Snyder January 9, 2011, 5:08 pm

    Thanks for linking up to Sensational Sunday Follow. I am your newest follower! =)

Leave a Comment