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

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… read them below or add one }

1 диети за бързо отслабване 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.

Reply

2 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!

Reply

3 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.

Reply

4 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!

Reply

5 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 http://snapginger.com
xo
Jamie

Reply

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

Awesome! so glad it worked for you!

Reply

7 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="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!

Reply

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

Did you delete all the quotes and retype them?

Reply

9 http://availablepyrami43.over-blog.com 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?

Reply

10 Corlie January 28, 2014 at 11:44 am

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

Reply

11 Sonya December 29, 2013 at 2:02 pm

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

Reply

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

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

Reply

13 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?

Reply

14 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
http://www.gurvygreen.com

Reply

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

Reply

16 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!

Reply

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

Thank you so much :-)

Reply

18 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!

Reply

19 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!

Reply

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

Delete the quotation marks and retype them.

Reply

21 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! =)

Reply

22 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!

Reply

23 Kristen August 25, 2013 at 7:42 pm

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

Reply

24 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

Reply

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

You have to use the web version of Picasa (https://picasaweb.google.com) in order to copy the URL. Hope that helps.

Reply

26 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??

Meghan

Reply

27 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!

Reply

28 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.

Reply

29 KristyRunsKato July 22, 2013 at 10:49 am

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

Reply

30 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?

Reply

31 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.

Reply

32 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.

Reply

33 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.

Reply

34 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!

Reply

35 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.

Reply

36 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 @ creatingcontentment.com

Reply

37 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.

Reply

38 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!

Reply

39 Brittany June 21, 2013 at 6:28 pm

This was super helpful. Thanks!

Reply

40 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. ^_^

Reply

41 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?

Reply

42 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!

Reply

43 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

Reply

44 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.

Reply

45 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,
Lacey
here is my understanding

Help me:P
Is this wrong?

Reply

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

Reply

47 Amanda April 1, 2013 at 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>

Reply

48 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!

Reply

49 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=" 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?

Reply

50 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.

Reply

51 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!

Reply

52 Amy Kelsch March 17, 2013 at 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

Reply

53 k-iani.com 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!

Reply

54 Mrs. Lopez February 28, 2013 at 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

Reply

55 Kyong February 25, 2013 at 9:39 pm

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

Reply

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

Thanks so much! I am your newest follower!

Reply

57 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. :(

Reply

58 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.

Reply

59 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.

Reply

60 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!

Reply

61 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…?

Reply

62 ruby December 29, 2012 at 3:10 pm

It dosent work I tried.

Reply

63 Amy December 29, 2012 at 3:21 pm

Yes it does you didnt try it ruby

Reply

64 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.

Reply

65 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!!!!

Reply

66 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.

Reply

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

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

Reply

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

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

Reply

69 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.

Reply

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

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

Reply

71 Susan Mitchell October 14, 2012 at 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

Reply

72 jennytheartist October 9, 2012 at 7:31 am

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

Reply

73 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!

Reply

74 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!!

Reply

75 Melinda Stanton (Auntie Em) October 3, 2012 at 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?

Reply

76 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.

Reply

77 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?

Reply

78 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! http://www.4iampersuaded.com
~ Christi

Reply

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

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

Reply

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

http://annenother.blogspot.com

Thanks again,

Anne E.

Reply

81 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!!!!

Reply

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

Reply

83 Thalia August 11, 2012 at 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.

Reply

84 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!

Reply

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

YAY so excited about that!

Reply

86 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.

Reply

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

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

Reply

88 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. http://hishroneet.blogspot.co.il/
this is my blog where you can see the image – http://www.englishatbarlev.blogspot.co.il

Reply

89 Roneet July 26, 2012 at 7:16 am

thanks I figured it out:)

Reply

90 Roneet July 24, 2012 at 4:55 am

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

Reply

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

Reply

92 lya July 19, 2012 at 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 :)

Reply

93 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 ( http://becreativemommy.blogspot.co.uk/ ). Can I send you my code on your mail to check?

Reply

94 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!

Reply

95 Jamie July 5, 2012 at 11:46 am

Thank you so much for this. It worked!

Reply

96 Joell July 2, 2012 at 4:14 pm

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

Reply

97 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 -
THANKS!!

Reply

98 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.

Reply

99 laurel June 24, 2012 at 8:10 pm

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

Reply

100 Lisa June 23, 2012 at 8:07 pm

I did it! Thank you!! :)

Reply

101 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!

Reply

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

Reply

103 Sara June 21, 2012 at 12:35 pm

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

Reply

104 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
capnaux.blogspot.com
http://www.youtube.com/watch?v=fqMmumD5bZk

Reply

105 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?

Reply

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

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

Reply

107 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.

Reply

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

Reply

109 Filex May 25, 2012 at 9:43 am

i want to make my picture from google to my blog

Reply

110 Anna May 23, 2012 at 12:26 pm

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

Reply

111 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!

Reply

112 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.

Reply

113 Nicki May 7, 2012 at 1:21 pm

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

Reply

114 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!!!!

Reply

115 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! =)

Reply

116 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 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!!

Reply

117 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.

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.

Reply

118 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

Reply

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

Reply

120 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!

Reply

121 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.

Gena

Reply

122 Trixi H March 21, 2012 at 2:51 pm
123 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.

Reply

124 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.

Reply

125 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!

Reply

126 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!

Reply

127 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.

Reply

128 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.

Reply

129 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?????

Reply

130 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?

Reply

131 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?

Thanks

Reply

132 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.

Reply

133 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

Tara

Reply

134 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.

Reply

135 Bazbee January 26, 2012 at 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~

Reply

136 DP Nguyen January 28, 2012 at 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

Reply

137 Bazbee January 30, 2012 at 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~

Reply

138 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

Reply

139 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.

~Baz~

Reply

140 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!

Reply

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

Reply

142 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?

Reply

143 Karthik January 7, 2012 at 4:56 am

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

Reply

144 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.

Reply

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

Reply

146 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

Reply

147 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? dp@mypregnancybaby.com.

Reply

148 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.

Reply

149 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.

Reply

150 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.

Reply

151 isfa December 10, 2011 at 4:44 am

THAKSSSSSSSSS… you tutorial helps me alot..huhuhuhu

Reply

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

you are a goddess. thank you.

Reply

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

Reply

154 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!!

Reply

155 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=http://www.capecodmommies.com alt=”Cape Cod Mommies” width=”125”, height=”125”

Reply

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

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

Reply

157 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.

Reply

158 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!

Reply

159 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 (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.

Reply

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

Thought about it, and now sharing it with you

Reply

161 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

Evie

Reply

162 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!

Reply

163 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="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

Reply

164 Winlove October 10, 2011 at 12:56 am

Yey!! super useful! ♥ thanks much!

Reply

165 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!

Alia

Reply

166 Beth (http://pageturnerby-beth.blogspot.com) September 28, 2011 at 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

Reply

167 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

Reply

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

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

http://livinthemommylife.blogspot.com

Reply

169 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?

Reply

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

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

Reply

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

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

Reply

172 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.

Reply

173 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.

Reply

174 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!

Reply

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

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!

Reply

176 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.

Reply

177 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.

Reply

178 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.

Reply

179 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?

Reply

180 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.

Reply

181 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!!

Reply

182 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.

Reply

183 Living July 21, 2011 at 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

Reply

184 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="”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

Reply

185 Crystal July 14, 2011 at 5:54 pm

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

*Sigh*

Reply

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

Email me and I will try to help you out.

Reply

187 Andrea Butler July 14, 2011 at 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!

Reply

188 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!

Reply

189 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 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!

Reply

190 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!

Reply

191 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!
Kim

Reply

192 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 (http://www.sxc.hu/) and PhotoXpress.com.

Hope that helps.

Reply

193 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
lori
http://lorialcorn2006.blogspot.com/
lorialcorn2006@yahoo.com
Im following you too:)

Reply

194 Kim June 18, 2011 at 12:03 pm

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

Reply

195 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…..

Reply

196 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!
Kim

Reply

197 DP Nguyen June 17, 2011 at 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.

Reply

198 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!!

Reply

199 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!
Kim

Reply

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

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

Reply

201 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="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>

Reply

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

Email me the entire code and I’ll try to help you out. dp@mypregnancybaby.com

Reply

203 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!

Reply

204 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!

Reply

205 DP May 17, 2011 at 1:17 pm

Double check the quotation marks… That might help too

Reply

206 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!

Shelley

Reply

207 DP May 17, 2011 at 1:11 pm

Picassa always gives super long URL names. Your picture name may look like this: https://lh6.googleusercontent.com/_33SCR_mnGZw/TCDBnGTh8zI/AAAAAAAAAGA/mKmIb1jvSjI/s512/100MEDIA95IMAG0014.jpg

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

Reply

208 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
http://www.shopping2scale.blogspot.com
Lisa

Reply

209 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

Reply

210 DP March 11, 2011 at 7:49 pm

You’re so welcome :-)

Reply

211 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!!!!

Reply

212 cindy January 30, 2011 at 8:43 am

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

Reply

213 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)
http://confessionsofamoneysavingmom.blogspot.com

Reply

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

Reply

215 Raquel January 20, 2011 at 2:56 pm

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

Reply

216 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 http://learningtolivemybestlifein365days.blogspot.com/
if you’d like to follow me back! :)

Reply

217 Kristina January 13, 2011 at 5:31 pm

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

Reply

218 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! http://www.classifiedmom.com
Aimee

Reply

219 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!

Reply

220 Erica Pearsall Hall January 13, 2011 at 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?

Reply

221 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…

Reply

222 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 – http://www.texastypeamom.com

Reply

223 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!

Reply

224 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!
~melanie

Reply

225 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!

Reply

226 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!!

www(dot)nanasblabberings(dot)com

Reply

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

This is perfect and super helpful! Thanks!

Reply

228 Kim January 9, 2011 at 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 :)

Reply

229 Anonymous January 9, 2011 at 5:33 pm

Thanks for following, Amy.

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

Reply

230 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!

~Carla

Reply

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

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

Reply

Leave a Comment

{ 12 trackbacks }

Previous post:

Next post: