Preggie Baby Boutique Modern Pregnancy and Baby Products

Tutorial: How to Make a Blog Button

by DP Nguyen

in Blogging Tips & Tutorials

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: “” - 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= “”><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=”“><img src=” ” /></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;; 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=”” target=”_self”><img src=” ” 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.


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

{ 242 comments… read them below or add one }

1 upoznavanje banja luka August 20, 2014 at 8:32 am

Heplo i aam kavin, its my first time to commenting anywhere, when i
read this article i thought i could also create comment due to this good paragraph.


2 August 18, 2014 at 8:55 pm

If some one wantfs to be updated with hottest technologies afterward he must
be go to see this web site and be up to date every day.


3 everest cash advance August 14, 2014 at 10:12 pm

Very rapidly this web site will be famous among all blog
visitors, due to it’s nice articles
everest cash advance iphone tracker no deposit casino bonus codes 2014 installment loans online
direct lenders help writing an essay iphone tracking payday advance loans track iphone iphone spy app payday advances iphone tracker cash loans fast
spy mobile phone hard money loan freeslots quick
cash payday loans i need cash now track a cell phone casino deposit bonus spy sms online title loans quick cash loans best spy apps for android essay writer
free casino slot games casino games online free payday advance online no deposit
casino bonus codes cash advance direct lenders for bad credit installment loans


4 August 11, 2014 at 10:11 pm

Admiring the dedication you put into your website and detailed information you present.

It’s nice to come across a blog every once in a while that isn’t the same unwanted rehashed information. Great read!
I’ve saved your site and I’m including your
RSS feeds to my Google account.


5 4000 juegos online August 11, 2014 at 12:34 pm

Me aluchina como has hablado de el topico.

Este forum va directamente a marcadores! Enhorabuena y gracias por
la info!


6 Sara August 8, 2014 at 8:07 am

I got this web page from my pal who informed me about this web page and now this time I am browsing this site and reading very informative posts here.


7 best gps 2014 August 7, 2014 at 11:31 pm

It’s an awesome post designed for all the online users; they will obtain advantage from it I am sure.


8 dslr camera reviews 2014 August 7, 2014 at 4:33 pm

I enjoy reading through an article that will make people think.
Also, many thanks for allowing for me to comment!


9 ishrana za dijabeticare August 4, 2014 at 7:30 pm

Hi, i believe that i saw you visite my website so i got here to return the
prefer?.I’m trying to find things to improve my site!I assume its ok to use some of your ideas!!


10 Meghan August 1, 2014 at 11:58 pm

Howdy very cool web site!! Guy .. Excellent .. Amazing ..
I will bookmark your site and take the feeds additionally?
I’m glad to search out so many helpful information here within the post, we need develop extra
strategies in this regard, thanks for sharing.
. . . . .


11 Shannon July 31, 2014 at 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 :)


12 диети за бързо отслабване July 30, 2014 at 5:33 am

I’m not sure exactly why buut this weblog is loading very slow
for me. Is anyone elsde having this issue or
is it a issue on mmy end? I’ll check back late and see if
the problem still exists.


13 Celeste July 26, 2014 at 12:43 pm

Superb website you have here but I was curious about if you knew of any
discussion boards that cover the same topics
talked about in this article? I’d really love to be a part of online community where I can get responses from
other experienced individuals that share the same interest.
If you have any suggestions, please let me know. Cheers!


14 search engine promotion July 26, 2014 at 12:06 pm

I am really delighted to read this webpage posts which includes plenty
of helpful information, thanks for providing these information.


15 Lucy July 18, 2014 at 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!


16 Jamie G July 11, 2014 at 12:45 pm

Thanks for the tutorial! I just used it now and it worked perfectly!!
Check it out at


17 DP Nguyen July 14, 2014 at 9:14 pm

Awesome! so glad it worked for you!


18 Jacqueline June 10, 2014 at 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="; target="_self"><img src="; 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 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!


19 DP Nguyen July 14, 2014 at 9:54 pm

Did you delete all the quotes and retype them?


20 May 17, 2014 at 6:51 am

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?


21 Corlie January 28, 2014 at 11:44 am

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


22 Sonya December 29, 2013 at 2:02 pm

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


23 Rabia @TheLiebers December 2, 2013 at 11:15 am

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


24 dating advice for ages 10 and up November 30, 2013 at 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?


25 Gurvy Green November 15, 2013 at 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


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

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


27 Ashley October 2, 2013 at 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!


28 DP Nguyen October 3, 2013 at 8:52 pm

Thank you so much :-)


29 Tiffany Divalocks September 21, 2013 at 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!


30 Tracy September 1, 2013 at 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!


31 DP Nguyen September 11, 2013 at 12:19 am

Delete the quotation marks and retype them.


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

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


33 Jessica Burgess August 25, 2013 at 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!


34 Kristen August 25, 2013 at 7:42 pm

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


35 Natalie August 6, 2013 at 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


36 DP Nguyen August 10, 2013 at 12:26 pm

You have to use the web version of Picasa ( in order to copy the URL. Hope that helps.


37 Meghan August 3, 2013 at 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??



38 Louise July 31, 2013 at 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!


39 Go Daddy Coupons July 25, 2013 at 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.


40 KristyRunsKato July 22, 2013 at 10:49 am

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


41 video July 21, 2013 at 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?


42 MyHosting Coupon July 18, 2013 at 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.


43 MyHosting Coupon July 18, 2013 at 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.


44 Jessica July 17, 2013 at 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.


45 Nalin July 5, 2013 at 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!


46 How To Register A Domain Name July 2, 2013 at 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.


47 Sarah June 30, 2013 at 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 @


48 Domain Web June 26, 2013 at 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.


49 Domain Name Registrar June 25, 2013 at 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!


50 Brittany June 21, 2013 at 6:28 pm

This was super helpful. Thanks!


51 Dara June 7, 2013 at 11:32 pm

Hi DP,

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


52 Desarae June 3, 2013 at 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?


53 Leslie May 22, 2013 at 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!


54 Angie McDonald May 17, 2013 at 4:08 pm

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


55 pistol targets showing human vitals May 12, 2013 at 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.


56 lacey April 7, 2013 at 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,
here is my understanding

Help me:P
Is this wrong?


57 Shannon May 21, 2013 at 6:12 pm

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

Good Luck :)


58 Amanda April 1, 2013 at 4:49 pm

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

<a href="; target="_self"><img src="; alt="ModernHippieMomma" width="125" height="125" /></a>


59 Leslie May 22, 2013 at 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!


60 Amanda April 1, 2013 at 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="; target="_self"><img src="; alt="ModernHippieMomma" width="125" height="125" /></a>

Here is my image URL from photobucket:

My site URL:

My site title:
Modern Hippie Momma

What am I doing wrong?


61 Elizabeth Cottrell March 27, 2013 at 6:51 am

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


62 Paige @ Not Missing A Thing! March 19, 2013 at 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!


63 Amy Kelsch March 17, 2013 at 8:11 pm

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


64 March 9, 2013 at 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!


65 Mrs. Lopez February 28, 2013 at 11:57 pm

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


66 Kyong February 25, 2013 at 9:39 pm

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


67 Cassandra Janey January 25, 2013 at 9:34 pm

Thanks so much! I am your newest follower!


68 Jessiekays January 25, 2013 at 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. :(


69 Bronwyn January 19, 2013 at 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.


70 Suzanne January 15, 2013 at 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.


71 Newlymeds January 3, 2013 at 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!


72 Jacqueline January 2, 2013 at 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…?


73 ruby December 29, 2012 at 3:10 pm

It dosent work I tried.


74 Amy December 29, 2012 at 3:21 pm

Yes it does you didnt try it ruby


75 Butterfly Fairy December 20, 2012 at 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.


76 Amy November 25, 2012 at 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!!!!


77 Michele November 18, 2012 at 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.


78 DP Nguyen November 24, 2012 at 6:40 pm

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


79 logo design October 31, 2012 at 3:33 am

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


80 video blogging October 24, 2012 at 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.


81 October 22, 2012 at 8:25 pm

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


82 Susan Mitchell October 14, 2012 at 8:43 pm


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

Anyhow thanks again:)



83 jennytheartist October 9, 2012 at 7:31 am

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


84 Beck October 8, 2012 at 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!


85 Radishgirl Thymes October 5, 2012 at 7:20 pm

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


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

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?


87 Fenny September 30, 2012 at 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.


88 kerri andersen September 16, 2012 at 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?


89 Christi Marcotte September 13, 2012 at 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!
~ Christi


90 TC Booth September 1, 2012 at 5:36 pm

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


91 Anne E. August 27, 2012 at 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:

Thanks again,

Anne E.


92 Crafting Vicky August 25, 2012 at 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!!!!


93 Rebecca August 14, 2012 at 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!! :)


94 Thalia August 11, 2012 at 10:15 am

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.


95 Jackie Ryan Masek August 9, 2012 at 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!


96 DP Nguyen August 9, 2012 at 10:11 pm

YAY so excited about that!


97 Nissa August 8, 2012 at 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.


98 hena tayeb August 2, 2012 at 3:48 pm

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


99 Roneet July 24, 2012 at 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.
this is my blog where you can see the image –


100 Roneet July 26, 2012 at 7:16 am

thanks I figured it out:)


101 Roneet July 24, 2012 at 4:55 am

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


102 Faith July 21, 2012 at 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:

<a href="; target="_self"><
img src=";
alt="ThecrayonBox" width="125" height="125" /></a>


103 lya July 19, 2012 at 3:33 am


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 :)


104 Joanna July 15, 2012 at 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 ( ). Can I send you my code on your mail to check?


105 Brooks_25Years July 11, 2012 at 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!


106 Jamie July 5, 2012 at 11:46 am

Thank you so much for this. It worked!


107 Joell July 2, 2012 at 4:14 pm

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


108 Natasha Devalia June 26, 2012 at 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 -


109 Erin @ DIY On the Cheap June 25, 2012 at 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.


110 laurel June 24, 2012 at 8:10 pm

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


111 Lisa June 23, 2012 at 8:07 pm

I did it! Thank you!! :)


112 Cassie H June 17, 2012 at 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!


113 Sara June 15, 2012 at 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. :)

<a href="; target="_self"><img src="; alt="theamerineclan" width="125" height="125" /></a>


114 Sara June 21, 2012 at 12:35 pm

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


115 Eric June 6, 2012 at 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


116 Sue June 4, 2012 at 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?


117 DP Nguyen June 5, 2012 at 11:29 pm

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


118 Donn Engbretson May 31, 2012 at 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.


119 lindsay May 29, 2012 at 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:


120 Filex May 25, 2012 at 9:43 am

i want to make my picture from google to my blog


121 Anna May 23, 2012 at 12:26 pm

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


122 Fiona Gregory May 13, 2012 at 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!


123 Mridul Godha May 11, 2012 at 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.


124 Nicki May 7, 2012 at 1:21 pm

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


125 Nicki May 7, 2012 at 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!!!!


126 Firdaus May 6, 2012 at 2:33 pm

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


127 Karin April 29, 2012 at 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 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!!


128 fruit.root.leaf. April 24, 2012 at 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.

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.


129 fruit.root.leaf. April 24, 2012 at 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


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

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,


131 Sonia April 23, 2012 at 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!


132 Gena April 13, 2012 at 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.



133 Trixi H March 21, 2012 at 2:51 pm
134 Susi March 17, 2012 at 10:41 pm

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


135 Cat B. March 15, 2012 at 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.


136 Cheyla March 11, 2012 at 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!


137 Amy at The Red Chair Blog March 10, 2012 at 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!


138 rachel March 2, 2012 at 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.


139 Shannon Stubbs February 27, 2012 at 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.


140 Linda February 9, 2012 at 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?????


141 Healthy Recipe February 8, 2012 at 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?


142 Liz Slater February 7, 2012 at 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?



143 Gerty February 1, 2012 at 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.


144 Tara January 31, 2012 at 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



145 Jacqui January 27, 2012 at 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.


146 Bazbee January 26, 2012 at 9:40 am

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?


147 DP Nguyen January 28, 2012 at 1:34 pm

Hi Baz,
Sorry for the late reply, but 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.



148 Bazbee January 30, 2012 at 8:29 am

Hi DP,
Another online editor that mirrors Picnik identically is
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.



149 DP Nguyen January 30, 2012 at 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


150 Bazbee January 31, 2012 at 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.



151 Tara January 24, 2012 at 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!


152 Carrie- young living oil lady January 16, 2012 at 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! :)


153 Karthik January 7, 2012 at 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?


154 Karthik January 7, 2012 at 4:56 am

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


155 Karthik January 7, 2012 at 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.


156 Whitney @ Grassroot Elegance January 2, 2012 at 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!!!! :)


157 Charlotte January 2, 2012 at 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


158 DP Nguyen January 3, 2012 at 11:24 am

Why don’t you send me an email and I will try to help you sort all of this out?


159 Janet January 1, 2012 at 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.


160 DP Nguyen January 1, 2012 at 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.


161 Shelley December 30, 2011 at 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.


162 isfa December 10, 2011 at 4:44 am

THAKSSSSSSSSS… you tutorial helps me alot..huhuhuhu


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

you are a goddess. thank you.


164 Ashley December 6, 2011 at 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 :)


165 Jules November 25, 2011 at 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!!


166 Amy November 21, 2011 at 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= alt=”Cape Cod Mommies” width=”125”, height=”125”


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

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


168 Digi Stitches Embroidery and Gifts November 12, 2011 at 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.


169 Miss Amanda November 9, 2011 at 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!


170 Lorraine October 30, 2011 at 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 ( 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.


171 David Mcilvenny October 28, 2011 at 6:45 pm

Thought about it, and now sharing it with you


172 Evie N October 17, 2011 at 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



173 Rose Rouge October 13, 2011 at 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!


174 TToria October 13, 2011 at 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="; target="_self"><img src=" " alt="TToria" width="125" height="125" /></a>

Please help :-S



175 Winlove October 10, 2011 at 12:56 am

Yey!! super useful! ♥ thanks much!


176 Alia October 1, 2011 at 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!



177 Beth ( September 28, 2011 at 12:40 pm


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!



178 Sheila September 27, 2011 at 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


179 malia p September 24, 2011 at 11:47 pm

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


180 Mercy September 17, 2011 at 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?


181 Monica Blaschke September 16, 2011 at 11:06 pm

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


182 Monica Blaschke September 16, 2011 at 10:54 pm

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


183 Kristina Gulino September 9, 2011 at 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.


184 DP Nguyen September 9, 2011 at 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.


185 Kari Lemon September 6, 2011 at 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!


186 Monica Dunham August 31, 2011 at 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:


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!


187 DP Nguyen September 3, 2011 at 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.


188 cassandra pearson August 27, 2011 at 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.


189 DP Nguyen September 3, 2011 at 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.


190 Kelly H August 21, 2011 at 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?


191 DP Nguyen September 3, 2011 at 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.


192 Jennifer August 20, 2011 at 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!!


193 Di-licious August 9, 2011 at 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.


194 Living July 21, 2011 at 12:15 am

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


195 Crystal July 14, 2011 at 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="””" target="_self"><img src="”×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. . .



196 Crystal July 14, 2011 at 5:54 pm

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



197 DP Nguyen July 14, 2011 at 6:57 pm

Email me and I will try to help you out.


198 Andrea Butler July 14, 2011 at 11:14 am

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!


199 Essential Mama Baby July 12, 2011 at 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!


200 DP Nguyen July 12, 2011 at 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 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.



201 Essential Mama Baby July 12, 2011 at 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!


202 Kim June 24, 2011 at 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!


203 DP Nguyen June 24, 2011 at 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 ( and

Hope that helps.


204 Loraine Alcorn June 22, 2011 at 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
Im following you too:)


205 Kim June 18, 2011 at 12:03 pm

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


206 Kim June 18, 2011 at 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…..


207 Kim June 17, 2011 at 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!


208 DP Nguyen June 17, 2011 at 2:51 pm


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.


209 Kim June 18, 2011 at 7:26 am

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


210 Kim June 18, 2011 at 7:47 am

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


211 DP Nguyen June 18, 2011 at 10:14 am

I’m so glad you figured it out :-)


212 Eilis June 10, 2011 at 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="; target="_self"><img src="; alt="GrowinginPreK" width="200" height="35" /></a>


213 DP Nguyen June 10, 2011 at 11:08 am

Email me the entire code and I’ll try to help you out.


214 Brooke May 30, 2011 at 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!


215 Laura May 20, 2011 at 2:18 am

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


216 DP May 17, 2011 at 1:17 pm

Double check the quotation marks… That might help too


217 Shelley May 17, 2011 at 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!



218 DP May 17, 2011 at 1:11 pm

Picassa always gives super long URL names. Your picture name may look like this:

As long as there is the .jpg extension at the end, it should work. Unless Blogger has changed something or you have a very complicated design


219 lisa March 19, 2011 at 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


220 Anne March 11, 2011 at 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


221 DP March 11, 2011 at 7:49 pm

You’re so welcome :-)


222 Monique Bragg February 6, 2011 at 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!!!!


223 cindy January 30, 2011 at 8:43 am

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


224 confessionsofamoneysavingmom January 27, 2011 at 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)


225 Anonymous January 27, 2011 at 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! :-)


226 Raquel January 20, 2011 at 2:56 pm

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


227 Hot Mess Mom January 14, 2011 at 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
if you’d like to follow me back! :)


228 Kristina January 13, 2011 at 5:31 pm

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


229 Classifiedmom1 January 13, 2011 at 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!


230 Anonymous January 13, 2011 at 5:22 pm

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


231 Erica Pearsall Hall January 13, 2011 at 5:17 pm

I’m a new follower from 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?


232 Anonymous January 13, 2011 at 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…


233 Texastypeamom January 11, 2011 at 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 –


234 Kristie@thedecorologist January 10, 2011 at 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!


235 Melanie January 10, 2011 at 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!


236 Cheekymommaof2 January 10, 2011 at 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!


237 Nanasblabberings January 10, 2011 at 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!!



238 Ashley Taylor January 9, 2011 at 5:48 pm

This is perfect and super helpful! Thanks!


239 Kim January 9, 2011 at 5:48 pm

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


240 Anonymous January 9, 2011 at 5:33 pm

Thanks for following, Amy.

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


241 Carla January 9, 2011 at 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!



242 Amy Snyder January 9, 2011 at 5:08 pm

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


Leave a Comment

{ 12 trackbacks }

Previous post:

Next post: