Grab My Button, Promote My Blog

by SBA · 187 comments

creativejunkiebuttonThe concept of linking to a blog you like is not new. Many bloggers do this in the form of a BlogRoll or BlogList. Some have plain text links. But lately more people are proudly displaying a customized image that links to their favorite blogger. The surprising part is the image looks very much like a 125 x 125 ad, although usually more unique and aesthetically pleasing. The process of spreading the "link luv" is made easier with a "Grab My Button" gadget, like the on seen on Creative Junkie's site. Let me call the one being linked to the 'advertiser' for lack of a better word. The blogger who hosts your button is the 'promoter.' So, the advertiser designs the button and provides the code for promoters to easily publish the hot button in their sidebars. I was asked by Creative Junkie and others in a BlogCatalog discussion how they could get into this game. Of course you first need a nice image that anyone can access directly (e.g. located on PhotoBucket.) The size and shape depends on what you want, but keeping it at 125 x 125 serves a dual purposes--- comes in handy as a regular ad. If you need help, get some resource ideas on creating blog ads. If  you use your button image as part of a regular ad, take a look at where to use a 125 x 125 ad.

If you're using free hosted WP then go to the alternate tutorial for your platform -Displaying Grab My Button Code in WordPress.com

For Blogger and Wp.org, here's the code you can customize and use for your button:

Note: Tutorial code may contain a green arrow to mark line continuation.greenarrow copyhtml Hover the mouse over any line. Small tool bar pops up. Click second icon to copy the code to clipboard. Then paste into your html editor. Use third icon to print.

<img src="http://farm4.static.flickr.com/3358/3279966696_6f63996198.jpg" alt="" />
<br /><textarea cols="20" rows="3"><a href="http://BloggingWithSuccess.net"><img src="http://farm4.static.flickr.com/3358/3279966696_6f63996198.jpg" alt="BWS tips button" width="125" height="125" /></a></textarea>

NOTES: This example uses the BWS button image and url. So just substitute your button location and your blog's url. Remember the button image must be accessible to everyone (e.g. a shared image on a free host like Flickr). Ours is at "http://farm4.static.flickr.com/3358/3279966696_6f63996198.jpg" Your image could have a file type other than .jpg --- like .png or .gif The first tag, "img src=" just displays your image above the scroll box. The second tag, "textarea..." creates the scroll box, holding the html code for visitors to copy and paste.

You can adjust the scroll box's height and width. Just change 'rows'  (number of lines visible in the box without scrolling) and 'cols'  (number of characters across the box.) Notice the image width and height is set to 125 for our button. Change this  for your image size. Also, change alt= "BWS tips button" to something that uniquely describes your button image. A related post   describes how the alt= value lets you track who grabbed your button --- using Google Search.  Here's what you do to publish your grab button:

  • Create a text/html gadget or widget in your sidebar or footer.
  • Copy and paste the code above into your html view.
  • Substitute your blog's url  and image location . Adjust any row or column numbers.
  • Preview/save the widget.  Test it by copying your code from the scroll box. Paste in a temporary post or gadget to make sure it's perfect. If you have a problem label the gadget "Under Construction and drop a comment here! We will help you.

You're now set to start your 'grab my button' campaign. Actually this is a win-win situation for you and your friends. They get to show appreciation for your blogging or any help you gave them. You get to be noticed by their readers and maybe gain new traffic.

So, have you already created your custom button? Drop us a comment and be sure to subscribe to the RSS feed for posts about buttons, 125 x 125 ads and image handling.

0saves
If you enjoyed this post, please consider leaving a comment or subscribing to the RSS feed to have future articles delivered to your feed reader.
4 Reasons For Subscribing
  • Get Full Posts Delivered Directly To Your Inbox.
  • Get Exclusive Freebies For Subscribers.
  • No "Buy This, Buy That" Mails!
  • 100% Privacy. Your EMail Address Will Never Be Shared With Any Third Party.
About Writer [Blogging With Success]About Author SBA is a web designer and co-founder of BloggingWithSuccess.net. She publishes BPWebNews a place for Blogspot tips and tricks. You can also find her on Twitter. Read SBA's other posts. She's also published a couple of guest posts.

Leave a Comment

CommentLuv Enabled

{ 183 comments… read them below or add one }

Creative Junkie February 16, 2009 at 10:26 PM

I can’t thank you enough for helping me out with my button!

Reply

SBA February 16, 2009 at 11:21 PM

Oh, that’s a dangerous statement! I’ll think of something… LOL

Reply

Melvin February 17, 2009 at 7:03 AM

Its actually a widget… actually i always feel putting a widget on a site makes it slower. I feel the traditional blogroll is still the better one

Reply

SBA February 18, 2009 at 5:49 AM

Melvin, I see your blog is ‘widget-free’! I’d call the button more of an image with text — similar to a single ad image. The blog does rely on the hosting site to release the image quickly, which is okay if you don’t overdo the number of buttons. True, with the blogroll you can stroke a lot more friends without cluttering your sidebar. Thanks for stopping by.

Reply

iCan't Internet February 27, 2009 at 4:49 PM

I’m wondering in fact… Would many people be tempted to but your button on their blog?

Reply

SBA February 28, 2009 at 3:37 AM

Okay, why don’t we test that theory… I just added the code to the bottom of the sidebar. You can copy and paste onto your blog — may I be so bold as to suggest putting it just below the ‘recent visitors’ widget — [you did want to be the first one to grab it, I assume LOL]. Thanks for leaving your footprints on several of our posts.

Reply

Jennifer March 12, 2009 at 9:54 PM

Your info was God sent! It was the best tutorial I found. I’m still having a bit of a problem. The entire code is not showing up in the “copy” box. Could you tell me what I’m doing wrong. I’ve spent hours working on this and I’ve come so close, thanks to your help.

Here’s my code:

“>
3” cols=”ff0000;>20” name=”mybutton”>MommysOnlineGarageSale.blogspot.com/“”>http://“>

Reply

SBA March 13, 2009 at 12:43 AM

Jennifer, I notice extraneous code that was not in my original post — ff0000 appears instead of the font color red on certain words — there must be a plugin compatiblity problem. I noticed something similar on another post but thought it was miscoded there only. So don’t copy the ff0000 and made sure only one straight quote appears instead of the straight and curly ones. You also added the [img] and [/img] stuff which you need to delete. You’re really just about there!!! I’ll send the code in an email if this is not clear. Noticed you also put this in a form, which may be doing some unexpected things… but leave it for now and just try to adjust the code for the scrollbox.

Apologies!

Reply

SBA March 13, 2009 at 1:37 AM

FYI. I reversed the red colored font and used bold instead. Seems to work. Now for why the red styling is in conflict … We found an incompatible plugin “Auto Twitter Links” which looked for the pound sign and misdirected the ones used in color styling. It’s since been banished. There’s still something amiss with the way WP is adding smart quotes to the html version of the tutorial code where none are asked for or needed! So until we track this down, it may be best to code the the lines yourself.

Reply

Ann March 18, 2009 at 10:41 PM

I’m so happy that I found your site. So helpful!
Now, I am beginning to feel like the biggest dolt because I cannot take my 125 x 125 image and turn it into a button. I’ve followed your instructions (which are very clear) but, capturing my image from where it is filed has me screaming! What in the heck is the matter with me?
Is there any chance you can guide me in the right direction?

Thanks,
Ann

Reply

SBA March 19, 2009 at 12:13 AM

Hi Ann, I’m working in the dark a bit because you didn’t tell me where the image is or show me your test blog with the incomplete code. So my best guess is you don’t have the image uploaded to an onlline host (may be sitting in your desktop file?) Try a free account at Flickr.com where you can upload the image from you PC and make it public so than anyone using your button has access. Once it’s uploaded just right click the image to copy the full “http://farmx.static.flickr.com/33xxxx….jpg” type address similar to the one in our button on this blog’s sidebar. Use that url as your button location in the textbox info. I hope it works and keep coming back, we thrive on challenges!

Reply

Ann March 20, 2009 at 6:36 AM

You have been a tremendous help! Thank you!
I appreciate your time and your help with my question.
I was able to make the button and HTML code work :->

Reply

Jennifer March 20, 2009 at 5:16 PM

Sorry I forgot that I posted in here.

My Button now works. Thanks for having great tutorials.

Happy Spring

Reply

Christine March 24, 2009 at 11:32 PM

Thank you so much for your help! The challenge I was having was that if someone added my button to their blog, it wasn’t linking as intended. It’s fixed now!

Reply

SBA March 25, 2009 at 3:22 AM

Glad to help. I noticed your image is 220 x 220px. Just be careful since many Blogger sidebars can be exactly 220 (leaving no padding room) or less. If the sidebar is say 180, things might get out of whack. You may want to consider something smaller…

Reply

Jennifer April 6, 2009 at 11:05 AM

You Rock!!!
I tried many tutorials and got know where with them. I am a total computer dork but when I read your tutorial it only took me minutes befor I was able to figure it out and put it in action. Thank you thank you thank you!!

Reply

SBA April 6, 2009 at 8:56 PM

You’re Welcome! Nice to hear it worked the first time! By the way you’re the second Jennifer who’s visited us. Your blog is so creative. Thank you for the post about how this tutorial helped you get into the ‘grab my button game!” I notice you have a button for “amillionmemoriesblog” — try overriding the html code to align the image to the right since it’s too wide for your sidebar and the words are cut off. Just before the code that came with the button, insert a html divide tag without the extra spaces around the < and > ( I had to add the spaces, otherwise WordPress will take action on the tags. ):
< div align="right" >
Then put the divide end after the button code to go back to normal alignment:
< /div >
YOU CAN DO IT !!!
Might want to tell your friend that the image is too wide or she needs to add the div alignment in the grab button scroll box!

Reply

LoriE April 9, 2009 at 4:27 AM

Your instructions are very clear but of course I have a question.
I have it looking the way it should etc. I thought I would test it so I copied the link just like someone else would and I put it into another html gadget on my page. When I click on the button that installed it takes me to my Picasa album online and not my blog page. Is that just because it is on my own page????

Reply

SBA April 9, 2009 at 5:08 AM

I love that you go the extra mile of testing it first. But you have been a little too creative — you added an extra link on the image in the textarea box to
http:// picasaweb.google.com/lh/photo/agneC4g0mZ…, etc.- this is your album and it overrides the site link which you correctly coded just before the bad link. Remove the < a href.. > for that bad link and you should be good to go.

But test it again. If problem put “under construction” in the title (I saw another thoughtful owner do that) and leave another comment here.

Reply

LoriE April 9, 2009 at 5:55 AM

OMG I am such a goof about this. I just can’t get it. My Picasa link is

I get the part where I change the website url but the picture part is just laughing at me. Can you help?

Reply

SBA April 9, 2009 at 6:31 AM

Well LoriE, we can’t have the image laughing at you (LOL). But I totally understand there is plenty to be confused about. Starting with the link for your image — you keep referring to your actual Picasa album, but you need to right click on that image in the album and see the real link location and then put it as the < img src location.

So, I'll give you the answer if you promise to really compare it with the instructions. I put extra blanks before each starting tag < to avoid WP interpreting the tags (as it did with your vanishing link above). Don’t worry, this is normal when you’re first exposed to the underbelly of WP or Blogger! Not a pretty sight. But it’s worth it.
ANSWER:
< center>< img src="http://lh5.ggpht.com/_SIu8YOH_6-w/Sd0abMNbO4I/AAAAAAAABnM/u16rZV2mp2A/None.jpg" />
< textarea rows="3" cols="20" name="mybutton">< br />< a href="http://www.familytreesmaycontainnuts.com">< img src="http://lh5.ggpht.com/_SIu8YOH_6-w/Sd0abMNbO4I/AAAAAAAABnM/u16rZV2mp2A/None.jpg" />< /a>< /textarea>< /center>

Reply

SBA April 9, 2009 at 6:48 AM

DON’T FORGET TO DELETE THE EXTRA SPACE I HAD TO PUT IN AFTER EACH < TAG when you copy and paste into your html.

Reply

LoriE April 9, 2009 at 8:09 AM

You are the best teacher. It is working great. I do have a question. Last one I promise. In your original post about this the word was at the end of the row and in the last post it is at the beginning of the row before the <img src .
Why is that?
Thanks so much for your help.
Lori.

Reply

SBA April 9, 2009 at 9:03 PM

Thanks for the compliment. We have disappearing ink again — your ‘this word’ disappeared so I can’t even guess what it was [unusual for me.. lol].
I did see your textbox is on your blog but you should have the image display above the box so people know what they’re getting when they grab the button! I know they trust you, but…
Looking at the source code I see it is there but right now it shows the image on the left of the textbox — but it’s invisible to readers since the sidebar is not that wide! Boy this was to be a simple thing! lol I’ve never seen so many variations… and so much hiding of words and images.

Okay final, final solution: just view your gadget in html mode and press the enter key to add a space just before the < textarea code starts. Check in visual mode. Notice there was a new line in the ‘answer’ above which would have created the space. Oh well… this is what makes it a challenge. I may become a magician after this. lol

Reply

Mr. I April 9, 2009 at 9:05 PM

Thank God! Making logos does not involve codes! (I chose right topic!)

Reply

LoriE April 9, 2009 at 11:09 PM

Well I am not sure what the problem is. It was working fine at my end even when I tested it.
I closed the page and reopened it and it looked correct and it worked when I clicked on the link. The word that I was wondering about was center in line 1. It is at the end of the line on this page but in the correction you sent me it was at the beginning of line 1. Any reason for this?
Thank you super wise person.

Reply

SBA April 10, 2009 at 12:32 AM

The original post only centers the scroll box. The ‘center’ tag starts where ever you place it, so I did feel you wanted to center the image above the scroll box. Placing it there takes care of both. [but there I go reading your mind..]
One more mindreading trick — you don’t use Firefox 3.0 nor Internet Explorer 7.0. Because the scroll box is fine but each has a different problem with the image above the box! No image in Firefox so most friends don’t notice, laughing dot in IE 7 — no good.

Don’t worry, I’ll send you an email with the correct code to use ‘as is’ without worrying about the extra blanks. The blanks and new lines just added to the confusion in breaking up the code when you deleted them! My fault. But it was a ‘wise’ mistake. I learned from it. lol

Reply

LoriE April 10, 2009 at 12:37 AM

I have become a full time job for you. It always seems like it will be simple and then it turns into a two day project. Why can’t I just stop tweaking things. Put the html down and step away from the blog.
Thanks.

Reply

SBA April 10, 2009 at 1:39 AM

I love when a not-so-plan comes together! You used my email and now the image displays perfectly above the scroll box in Firefox — I’m afraid to look in IE 7, so I’m stepping away.
Thanks for grabbing our button. I like your live signature and will be trying it.

Reply

Cindy Schultz April 12, 2009 at 12:45 AM

Thanks,
I was having so much trouble coding my box and you made it so easy!

Reply

SBA April 12, 2009 at 1:29 AM

Cindy, that was too easy, I can now take a day off! LOL I tried to visit your blog, seems you moved from Blogspot (who isn’t these days?) and your domain name was already taken… You forgot to key ‘theMomMaven .com” — be careful, otherwise it goes to a Godaddy ad with a popup. I’ll edit your comment to show the correct address. Good luck.

Reply

Michelle M April 21, 2009 at 10:05 AM

Thank you….you just saved my night!

Reply

SBA April 21, 2009 at 7:18 PM

Glad to hear it — at least someone could log off early and enjoy the family! Why not leave your blog address in your signature so we can take a look at your new button? Also you may want to grab a gravatar image- (see our post on why and how !

Reply

Michelle M April 21, 2009 at 9:19 PM

I finished…but did I log off early? Nope…lol. Here is a link to my blog. I am just setting it up so there are no posts on it…yet! Let me know what you think? I am open to any suggestions. Thanks!
http://flyinggigglesandlollipops.blogspot.com/

Reply

SBA April 21, 2009 at 10:22 PM

Image is very good, I’ d like to see the same letter fonts as in your header. Keep up the good work — glad you’re thinking promotion [even before content, adds to my argument that 'content is not king' lol]

As for the blog, Great design – colors and background image! I’d hazard a guess that soon you may want a menu bar across the top (below your header image) to help visitors navigate your many many posts (to come). See if you designer can add one. If you’re a tweaker of html then you can do it yourself . If interested, I have a post on my blogspot blog —visit me at BlogCatalog (user/BPWebNews).

Reply

Guru Sanket Biswal April 27, 2009 at 1:52 AM

Thats a really gud idea. Thnx a lot !!

PS: I cant believe that you reply to every comment :)

Reply

Mr. I April 27, 2009 at 8:59 AM

Glad that you liked it. Fell free to ask any questions if you encounte problems.

Reply

SBA May 19, 2009 at 4:20 AM

My biggest pet peeve is a blog with tutorials where questions go unanswered — defeats the purpose of the post if visitor can not use it. Not to mention loss of good will.

Reply

Oh My Gluestick April 30, 2009 at 2:06 AM

Help!

I have tried a thousand different ways to make this work and this is as close as I get, but there is extra funky stuff showing up and I am not savvy enough to figure out why. If you wouldn’t terribly mind, could you please take a look at the code and let me know what I am doing wrong? Thanks!

http://s558.photobucket.com/albums/ss30/ohmygluestick/?action/&gt;

http://s558.photobucket.com/albums/ss30/ohmygluestick/?action/&gt;

Reply

Mr. I April 30, 2009 at 3:21 AM

Its alright when I visited your blog. I guess its the 150px one at top of right sidebar.

Reply

Oh My Gluestick April 30, 2009 at 2:10 AM

Oh my gosh! I did it! I did it! Thank you for your brilliant mind! =) I am on my way!

Reply

Mr. I April 30, 2009 at 4:03 AM

Glad it worked!

Reply

Oh My Gluestick April 30, 2009 at 10:01 PM

Do you have the same sort of genius expertise to create a custom background? I would love the generic code and simple instructions like you did with the widget. Super helpful! Thanks!

Reply

Mr. I April 30, 2009 at 11:35 PM

Well, this can be done by simple div tag. Add this code before the button code for coloured background:

<div style="background-color: #ffffff;">

Note that you can place any value for desired color in place of #ffffff

If you want image as backround, use this code:
<div style="background-image: url(-image address here-);">

Put div end tag at end:
</div>

Feel free to reply if you encounter any problems.

Reply

Mr. I May 1, 2009 at 12:43 AM

I forgot a simple thing here, when adding image url to second code, enclose it in single quotes ( ‘ ) and not double ones ( ” )

For example, if image URL is http://abc.com/img then add it in div code as url(‘ht_______’)

Reply

Jenn Thorson May 8, 2009 at 10:35 PM

Thanks for attracting my attention to this. It’s worth giving a shot and seeing how it goes, at least.

Reply

LillyShayStyle May 16, 2009 at 9:37 PM

Hi,
You have a great tutorial here!
I’ve got mine just about done :)
But my button and the code are not centered together…
Can you help me with this?
Thank you for any help!

http://lillyshaystyle.blogspot.com/
My host is flickr..I don’t know if that matters..

Reply

SBA May 17, 2009 at 6:28 AM

I can only guess you solved it — looks centered to me. But I sent you an email so you can give me more specifics. The image host doesn’t matter. You control the alignment via your blog editor or html.

Your Buttons look good. Glad we could help.

Reply

Jennifer May 22, 2009 at 4:17 PM

Sorry that I didn’t respond to your email you had mentioned that “it looks like I fixed the problem” therefore I didn’t think a reply was necessary.

Anyway, yes it does work. Thank you for your tutorials and your response.

Happy Memorial Day Weekend.

Reply

kahaly June 24, 2009 at 10:19 PM

very good tutorial…i got my button done…It was pretty easy…
thnx again.

Reply

SBA June 25, 2009 at 12:42 AM

Thanks. And your button is not too shabby! Glad you used the Alt= field correctly.
TechNebula promo button

Reply

kahaly July 1, 2009 at 11:08 PM

Thanks for adding my button…
keep up the good work…

Reply

SBA July 2, 2009 at 2:17 AM

Now we need to work on your Gravatar — that shade of blue with the sideways G does not suit you!

Reply

kahaly July 3, 2009 at 1:20 AM

Okie…so wat do u suggest…

Tracey@cute2carry June 30, 2009 at 10:47 PM

Thanks so much for your help with this!!

Reply

SBA July 2, 2009 at 2:19 AM

Nice Button, good alt tag.

Reply

SBA July 3, 2009 at 2:22 AM

@kahaly — you and I have gone over the nested reply limit! But I would use the top part of your button image, redoing it to a 48 x 48 size purple backgroud then add the white text.You could also do a larger version of your favicon, but I like the purple better. However many bloggers are starting to use their real face shot. It’s your choice.

Reply

kahaly July 4, 2009 at 1:57 PM

@SBA–Thnx…i ll give it a try…how do i increase the 25×25 to 48×48. What software do i need to use…
please let me know.

Reply

SBA July 4, 2009 at 7:31 PM

Not sure where the “25 x 25″ image came from but this software lets you upload it and resize online:
http://www.resizr.com/ If you’re creating from scratch then you need an image creation package. I use MS Image Composer (free download at http://www.download.com/Image-Composer/3000-12511_4-10561244.html ).

Reply

Jennifer July 4, 2009 at 7:19 AM

Thank you…I have looked everywhere for this info and you had it all along. Great info, easy to follow…just perfect. Thanks for taking the time to post it!! ~ Jennifer

Reply

SBA July 4, 2009 at 8:11 PM


Great button. Just a suggestion unrelated to the button. The pink font color is very hard to read against a white background. Normally I’d tell you to go to Layout and adjust the ‘fonts & colors’ but I don’t think your template uses the blogger names. If it does, try adjusting the “Post Title Color” to a scarlet or magenta shade: #CF046D, #FF00AD or #F700F7.Otherwise you need to change the template code which overrides the blogger defaults.
And, your link addresses should be within the text or blog name. While editing, highlight the text words and press the green globe icon, paste in the http:… page address. Looks cleaner. If you need more help, just subscribe to our newsletter and we can communicate by email.

Reply

Jennifer July 4, 2009 at 8:36 PM

Wow…great feedback! Thanks for taking the time to check it out and give me some tips. I totally get what you’re saying about the pick font…I work on that but I’m not sure what you’re saying about the link addresses??? Maybe you could elaborate a bit on that…what link addresses are you referring too??
Thanks a million!
Jen

Reply

SBA July 4, 2009 at 8:57 PM

e.g.: you have this list:
websites to check out are:
http://www.abigails.net/default.aspx
http://www.arteriorshome.com/
http://www.vanthielantiques.com/
http://www.shadowmountaininc.com/
http://www.sedgefieldlamps.com/
———————————————— It should look more like this: person just clicks on the link text to go to the site. The same way you typed the http-word in your post, type ‘Abigails’ instead, highlight it then click the green globe icon [fifth from the left] and key the http stuff in the pop up box. Should look like this:
websites to check out are:
Abigails

Reply

Roselle July 6, 2009 at 7:50 PM

Thanks! This is just what I need. I have just added it to my blog. This is great :)

Reply

SBA July 6, 2009 at 8:22 PM

Filipina Work At Home Amateur
You did it! Since that was so easy, why not :
Brand Your Blog With A Favicon and stop letting the gravatar monster grab your identity
— more branding can = ” + more moolah! “— as you like to say.

Reply

George Serradinho July 20, 2009 at 6:26 PM

I have created a button for my site and displayed it on a full page giving the user a few options to choose from. I think I must just add it to my sidebar.

Reply

SBA July 20, 2009 at 7:18 PM

I see you added the link to your sidebar. The full page shows you’re a man of many options! I prefer versions with some text (other than url) to give potential clickers a clue about your niche. I like that they open in a new window (target=”_blank”) and you have an ‘alt’ value that is seo savvy. You may want to consider putting the images on photobucket in case you ever restrict image hot-linking as we do.
grab button image

Reply

WackyMummy August 8, 2009 at 9:25 PM

I’m trying to figure this out, but I don’t know computer coding or html. How do I find my button location to insert it into the coding? I have my picture on flickr, but it’s not working. Could you perhaps let me know how it would look with my http address?

Reply

SBA August 8, 2009 at 10:00 PM

Hi. There are four problems

1. I looked at your image from the scroll box and it’s too large (defaults to 1024 x 768)
You need to use this url which is a 100 x 75 version allowed on Flickr ‘all sizes’ option.
http://farm3.static.flickr.com/2506/3800500487_7ee638fd8f_t.jpg

2. Don’t you need some text over your image that says something about you or your blog? See the samples in other comments above. e.g. “Wacky Mummy” — you need editing software to add text. See our post on 125 x 125 images for some free services. Also see related post:Turn Grab Button into BillBoard for using Photobucket for adding text…

3. Did you copy the tutuorial code from the post and then modify or did you type directly in your blog? The quotes are wrong in your version. you have “”, a straight and a curly quote instead of a single straight quote. Just delete the curly quote which appears several times in your code. It must look like this

4. You forgot to add the img src code to display your photo above the scroll box.
... img src="http://farm3.static.flickr.com/2506/3800500487_7ee638fd8f_t.jpg" ...
Change the url to whatever your final location is..

So until you resolve these issues, change the label on your sidebar widget to “Under Construction”

Reply

WackyMummy September 20, 2009 at 7:26 AM

Thanks.

Reply

Katy September 20, 2009 at 12:17 AM

can you help me add a link in the picture?

Reply

SBA September 20, 2009 at 7:56 AM

The link in your grab button scrollbox currently points to http:/…donate/nfsa2009/teamdenver. When someone takes your button code, installs a gadget, then the picture will link there. Your picture above the scrollbox does not need a link. If you really want a linked picture then copy your own scrollbox code, edit your gadget — and paste it over the image html code. Be careful not to touch the textarea code at the bottom.{that creates the scroll]

Reply

Charlene October 10, 2009 at 6:32 PM

Great site – thanks! I’ve been playing with this for about an hour and can’t figure out what I’m doing wrong.

Here’s the code I’ve entered nto a text widget
:

My blog is at http://beamingbalance.blogspot.com

Thanks in advance for your help!

Reply

Charlene October 10, 2009 at 6:52 PM

I resized the image in photobucket but it still appears to big. I tried saving the image to a post and using that post location… but now I just get a red X. UGH!

Reply

Charlene October 10, 2009 at 7:11 PM

I think I did it! The issue was that for some reason Photobucket was not saving the resized image… so basically the image was just too big.

Let me know if it looks right to you please. Thanks – and sorry to hijack your comment roll with all my updates!

Reply

SBA October 10, 2009 at 7:38 PM

Charlene, I just love it when readers are so excited (or frustrated into action) that they figure it out for themselves! LOL. But there is another problem or two.
1. The image looks fine above your scroll box but not if I install it on my test blog. The image http address has extraneous characters after the .gif. You added a break (br) tag so Blogger interprets that incorrectly and can’t find the image. So remove from the scroll box code the <br/> characters. Always copy the code yourself from the blog display and create a button on your (test) blog the way the reader would do it. You can then delete the test button from your layout….

2. There’s some fuzzy stuff along the left side of the photobucket image — seems you overlapped the real button image you want with some text or other background. So to be pristine about it, you need to recreate the image and update it on photobucket.

Reply

Charlene October 10, 2009 at 10:18 PM

OO – I see what you mean re: it not actually working. Hmm…

This is the code I used:

I basically cut and pasted what you had in your article and then substituted by blog and the link to the graphic. Where do I have the extra characters? Not sure what to do!

Reply

Charlene October 10, 2009 at 10:31 PM

Started over… let me know if it’s working now. I’m not seeing the fuzzy line on the side for some reason but I can always recreate it to make sure it’s clean.

Thanks again for your help – I really do appreciate it!

Reply

SBA October 10, 2009 at 10:47 PM

It’s fine now, you used a different image (or it’s the effect of deleting the break tag) so there is no fuzziness. Congrats!

Reply

SBA October 10, 2009 at 10:32 PM

I think you changed it already! anyway your html code does not appear in this comment! But I can see it, so just edit your scroll box layout element find the < br/ > and delete it. then republish.

For code to appear you need to convert it to text, put the text version in your comment. For next time, try this converter: http://javascript.about.com/library/blscr01.htm

I looked at the original code and there is no break. So I can only guess that after you copied it, you made a new line break while editing? Why not try it again and let me know [use a new element that you can then delete]. I copied to my test blog and it was okay, but I’m using the new Blogger editor that may ignore breaks in html…

Reply

Bibiana Bailey October 18, 2009 at 12:59 AM

OMG, I did it…I did it.

It took me some times and little meltdown, but I have my button

Thank you so, so very much for this great help

Reply

SBA October 18, 2009 at 4:07 AM

Congrats. It’s always worth the”tears” to see a finished product! Your button is perfect.

Reply

Laura Smith November 15, 2009 at 7:24 PM

I can’t get my code to show up with the box around it it just shows my button twice now

here are my codes-could you help by fixing it for me

Reply

SBA November 15, 2009 at 9:16 PM

Laura, I’m putting a big warning on this post that these instructions are for Blogger or self-hosted WP only — Free WP ignores some html.. BUT, don’t worry there is a version for WP.com !!!!
http://bloggingwithsuccess.net/displaying-grab-button-code-free
So start over with that tutorial. Let me know how it works…

Reply

Noel Giger - [ReDeemed] unique art November 17, 2009 at 10:19 AM

Thank you for this easy to use tutorial! I successfully added my “grab button”!

Reply

SBA November 18, 2009 at 1:09 AM

That’s what we like to hear! I’d recommend more space around the word [ReDeemed] and enlarging ‘unique art’ text for clarity. Here’s a version I did as a small gift to celebrate our 1 year blogiversary; just copy to your pc and upload to Flickr (although I prefer using photobucket since you can replace images — avoiding changing your grab box code!). See post: Part 2-Turn Your Grab My Button into a Free BillBoard
If you create a new Flickr version then change the url in your scrollbox!
Button for Redeemed Blog

Reply

Noel Giger November 18, 2009 at 2:59 AM

thank you – and thanks for the tip about just replacing it – I wouldn’t have thought about that!

Reply

Aj November 18, 2009 at 11:57 PM

Thank you so much. Your instructions are by far more simple than any others I found.

Reply

SBA November 19, 2009 at 2:27 AM

Aj, Glad you’re up and running. For truth in advertising you need to show the same size button above your scroll box or perhaps you have the wrond dimension in the html code. The image is 122px x 156px and your scroll box makes it 125 x 125 on the blog that grabs the button. Both look fine!
Share Life and Money

Reply

Angela November 25, 2009 at 10:27 AM

Great tutorial. I tried a different one first and I failed. I got this one up but not without glitches. I don’t know what i did or what i need to do to fix it. It’s the Princess training Button at http://www.confessionsofanondomestichousewife.blogspot.com

Reply

SBA November 25, 2009 at 5:52 PM

Welcome Angela.
1. glitch – you didn’t say what it is, but looking in my crystal ball I see the http for the image on Photobucket is wrong:
http://http://s114.photobucket.com/albums/
n257/twhnfm/?action=view&current=PrincessTraining.jpg

But even without the double http:// you are sending people to the albums view. You need to copy the ‘direct link’ for your image. See more options under ‘share’ and select ‘get link code’ tab; ‘direct link for layout pages.’ The correct url is http://i114.photobucket.com/albums/
n257/twhnfm/PrincessTraining.jpg

2. When someone click the button your friends install, do you want them to go to your ‘princess training’ category? That’s what the link points to, not your home page. There is only one post in that category.

Reply

sheri November 29, 2009 at 3:39 AM

Thank you so much. I’m a newbie to blogging and I am so-o-o-o not a technical person. I tried to find an answer on blogger “help” but could not find an easy answer. Your lesson was so very helpful. I made my “Grab my button” and tested it and (wonder of wonders) it worked! The only bit of trouble I had (because I am not technical) is figuring out how to create a url address for my button. Since yours was created through flikr, I decided to try that. I fumbled through it and got it done, but I had no idea what I was doing. Thanks again from someone who has a pea brain when it comes to computers.

Reply

SBA November 29, 2009 at 4:14 AM

Glad you found help here. Just keep fumbling and before you know it, you’ll be a geek!
I like the header you designed and your button. Good job.

Not bad for a ‘pea brain!’ — which is what we all are in one topic or another… :)

Reply

cyndejo December 3, 2009 at 7:34 AM

Thankyou, this was such great help, with some playing around I think it is working.

Reply

SBA December 3, 2009 at 5:58 PM

Hi Cynde. The scroll bar is there and on the surface looks fine. However you’re pointing to my button image and that’s what folks will see if they copy your code! You need to replace
...//farm4.static.flickr.com/3358/3279966696_6f63996198.jpg
with
....//farm3.static.flickr.com/2619/4154559968_dfe982731a_m.jpg

It’s always a good step to copy your own code and put is sidebar or draft post to test it out. then delete it!

Reply

cyndejo December 3, 2009 at 6:53 PM

Thanks, I am still having trouble, my button shows up on my page, but I am unable to get anything to show up when I test it

Reply

SBA December 3, 2009 at 8:15 PM

You pasted the image url in the wrong spot. Take a look at your layout code then compare to what the textarea should be: (modify the alt names as you wish) — I removed the html originally in my comment since if you copy it, WP converts the quotes to smart quotes, invalidating the html!

Reply

cyndejo December 3, 2009 at 8:28 PM

Well I am at a total loss for what to do, you see I make it look like the layout should but when I tell mine to save the computer is changing it all around.
Sorry I can’t seem to make it work, I do follow directions even though it doesn’t look like I do

Reply

SBA December 3, 2009 at 8:46 PM

Okay, not to worry. Change the layout again, but take a screenshot
before you save the widget and send it to me . Or copy and paste the html into a gmail.
Note: (12/04/09) After a few emails back and forth the button is working on your site. There were a couple of red herrings that made us jump through hops but I commend you for hanging in there!
Hipchic button

At first I thought there was a problem with the Syntax Highlighter plugin we use for displaying tutorial html, but it’s okay. If you copy the code (rather than using the plugin’s toolbar) to paste into email, then it doesn’t handle the new line breaks properly. Hence my gmail of the code was wrong! And when I used an online converter and supplied the text version in a prior comment, WP made the quotes different — the very reason I use the plugin! The last herring was that all Editors rearrange the alt= before the image src which is okay, but disturbing when I asked you to make the layout exactly as shown!

Anyway, all is well that ends well…

Reply

Melissa December 23, 2009 at 1:19 PM

Hi! I already have a blog button, but am wondering if there is any way to find out who has grabbed it and added it to their blog?

Reply

SBA December 23, 2009 at 7:44 PM

Nice button. If you look at instruction on our tutorial it gives you a clue:

Also, change alt= “BWS tips button” to something that uniquely describes your button image. A related post describes how the alt= value lets you track who grabbed your button.”

I need to update the post with the exact link to that article:
Use Google Search to Track Your Tutorial Usage
You just need to update your grab button widget to show your alt tag. You’ll see Google alerts from that point forward as new grabs occur.

Reply

Melissa December 24, 2009 at 11:38 AM

Thanks a bunch! I added the alt= tag.

Reply

Sonia January 4, 2010 at 7:37 PM

Hi, I was able to make a button according to your instruction. I tested it and it was working fine. May be a tad shorter would be good but that part was fine…problem is that I can’t place the code appear beneath the button, as necessary for a reader to copy it. HELP!!
And while you are at it, please be kind enough to have a long look at the blog appearance and give tips to improvise…or am I asking for too much!! ?

Reply

SBA January 4, 2010 at 10:37 PM

Persistence pays off again! Congrats. As for your site, I like the overall look and color scheme. The background image is attractive. I noticed the post text size is inconsistent for more recent posts — I prefer the larger type font. Suggest you move Google search to the top and add RSS feed button/box at top. The blogger nav bar is unattractive — they have a transparent option now (check your gadgets). Now would be the time to find a custom template that give you a top menu for navigation and maybe a footer for things like recent comments or posts. Look at my Blogger blog for some ideas on what to put in side bar. Also see my post on BWS homepage: Blogger Series: Widgets and Hacks – ReadMore, Recent Comments, Recent Posts.
You should carefully define fewer label categories and shorten the list. I joined your GoogleFriends.

Reply

Sonia January 4, 2010 at 8:08 PM

YooHoo!! I tried again and successfully made the button and the code, however, its still a tad too big…what do I do for that?? Thank you for the patient tutorial, and for your tolerant study and reply for this comment.

Reply

SBA January 4, 2010 at 10:42 PM

Luckily anyone grabbing the code will have a rescaled image since you added the height and width of ’125′. There are extra tags at the end of scroll box code you should delete in your gadget: and .
You can resize your original image on Photobucket — see my post
Part 1 :Turn Your Grab My Button into a Free BillBoard

or just change the gadget that puts the image on your blog to scale it to 125 — add height/width to the image html…

Reply

Sonia January 4, 2010 at 11:23 PM

This is a great site, for it really gets back to its readers immediately! Thanks a lot…I really appreciate the speedy reply and that you gave such a detailed analysis of my blog..will really implement all the valuable tips you gave.

Reply

Amanda January 19, 2010 at 12:27 AM

I tried to create my own blog button and follow your tutorial. My button looks ok as does the html code and it works but it has the “x box” that appears when a photo isn’t transmitting right? I did as you said and labeled the widget “under construction”. Would you please visit and give me some ideas on what the problem may be?

Reply

SBA January 19, 2010 at 2:09 AM

The broken image is caused by an extra image code in the textarea box — points to your photobucket album. You have the correct image in the second code, so just delete the first one.

<a href=”http://simplesavingsavvy.blogspot.com”><img src=”http://s822.photobucket.com/albums/zz146/SimpleSavingSavvy/blog%20buttons/?action=view&current=button2.jpg” target=”_blank”/><img border=”0″ alt=”SSS button” width=”125″ src=”http://i822.photobucket.com/albums/zz146/SimpleSavingSavvy/blog%20buttons/button2.jpg” height=”125″/></a>

The ‘target=” _blank” belongs with the href to open your blog in a new window if that’s what you want when someone clicks on your button from your friend’s blog! If you need it, add it with a space after the blog url, and before the closing > tag!

Reply

Wendy February 7, 2010 at 5:21 AM

OKAY…now can you tell me the OTHER side of this…. like how I “grab a button” from a site that “requires” me to do so…like for a sweepstakes entry or…?? I DON’T ahve a website or blog of my own….do I need one to do this or do I “grab it” to facebook or twitter (sorry – I am a complete dunce with all this…) Thanks

Reply

SBA February 7, 2010 at 7:35 AM

Wendy, It’s easy to grab the button (html code) but putting it as a clickable image on Facebook or Twitter is another story! I guess the sweepstakes owner wants a link back from the grabbed button to her website or blog — so you would not be in keeping with the spirit of the contest if you did not do this… So you’ll have to pass on that one.

Reply

Multi-Tasking Mommy February 9, 2010 at 7:05 PM

Thank you so much for your help!

Reply

SBA February 10, 2010 at 4:47 AM

No problem. I didn’t see the button on your regular blog, but on the one called ‘multi-testing mom’ — is this for testing only? The image in (and above) the scroll box is too scrunched — you resized the large header background image to be 125 x 125. You should decide what part of the image is most important and use editting program to cut out only that portion to resize and add appropriate text. Maybe use just the right side (hanging sign)…

Reply

Erica February 14, 2010 at 8:32 AM

Okay…trying to start a blog…learning as I go. I thought I had it right…but my “button” picture will not come up when copy and pasted. The good news is the empty box does link back to my blog. I got it to do something! I know it’s my error…can you help? Thank you!

Reply

SBA February 14, 2010 at 9:42 AM

You have some extra code after the image location — copy and paste it into a draft email and you should see it easily. The reason it happens is you’re trying to point to the photobucket view page not the actual image url!
…// s780.photobucket.com/albums/yy82/mitzki5/Blog%202010/?action=view&current=125-x-125-advertise-here-image-3-4.jpg

is no good. use just

…//i780.photobucket.com/albums/yy82/mitzki5/Blog%202010/125-x-125-advertise-here-image-3-4.jpg

Reply

J February 16, 2010 at 7:11 AM

Thank you!!! You made this so easy!

Reply

SBA February 16, 2010 at 7:22 AM

Hi J, you didn’t leave your blog address but I tracked you done — nice button image. You forgot to change the alt= tag to your uniques text. In a few days you would show up on my Google Alert of people using our BWS button!!! See the post that explains how you can track your button: Use Google Search to Track Your Tutorial (button) Usage

Reply

Jona March 10, 2010 at 8:48 AM

It worked! Thank you! I’ve been wanting this forever and your coding was perfect! I had to put it in the “notes” box (where I add link information in Typepad) so it took me a little bit of trial and error (I put it in the other boxes first and it the text area became a hyper-link). Again, thank you!

Reply

SBA March 10, 2010 at 9:18 PM

Jona, love your perseverance (it’s all about trial and error.LOL). Your button is attractive
bannersquare150. Fits well in your wide sidebar.
Good favicon, but where’s your gravatar [to extend the branding?]. Your overall blog design is good; If possible I’d center the header within the cream background — may need to elongate. The sidebar links color is too close to the background — try a dark complimentary color for better legibility.

Reply

Jennifer March 18, 2010 at 3:09 AM

Hi, I don’t think I did this button thing correctly. When you click on the button it takes you to Flickr. What am I doing wrong?

Reply

SBA March 18, 2010 at 3:42 AM

You seem to have forgotten to add the html that generates the scroll box below your button image.Yyour friends can only copy and paste from the scroll box into their new gadget. the version on their blog would show just the image and when clicked it goes to your blog. Add this text below what you have now. If you don’t want your image that’s there now to go to Flckr, then remove the link around that image. Let me know how it works.

<textarea cols=”20″ rows=”3″><a href=”http://whatsfordinnerbyjena.blogspot.com/”><img src=”http://farm5.static.flickr.com/4068/4441071363_6730482b72.jpg” alt=”What’s for dinner button” width=”125″ height=”125″ /></a></textarea>

Reply

tera March 20, 2010 at 2:41 AM

Thanks so much!

Reply

SBA March 20, 2010 at 5:01 PM

Your button is Great!

Don’t forget to change the alt tag to your own keywords. See who grabbed your “ad” — follow this tutorial to set up a Google alert

Reply

Masaud Akhter April 16, 2010 at 11:08 PM

hi
nice blog . i m engnr.masaud akhter and working on a blog about engineering software tutorials.ebooks and setups. i want to increase traffic to dat. so how can i make it. can u give link to my site as u did for others… can u give me any suggestion?

Reply

SBA April 17, 2010 at 12:42 AM

Hi again. We don’t give links to other sites — only as part of a trackback to their blog posts mentioned in our articles (or on the top commentators list). So not quite sure what you mean there. If you mean the commentluv link then your last post should have been listed — next time be sure to check or uncheck and recheck the commentluv box — sometimes it has to be jogged a bit. lol The default should be checked

I do suggest you study your traffic by using anlaytics: Analytics Pt 1: How Much Do You Know About Your Visitor Traffic?</a. The more you know, the better you can target your promotion. I put a different post suggestion in the reply to previous comment you left.

Reply

Kim April 19, 2010 at 2:16 AM

I made my ad on the free site that you recommended. I had to save it to my computer. So how do I now get the code needed input to make my button?

Reply

SBA April 19, 2010 at 2:27 AM

I notice your blog is on WP.com so you need to use the other tutorial:
http://bloggingwithsuccess.net/displaying-grab-button-code-free
The image map in the sidebar shows all tutorials about ads and buttons.

You must have the image uploaded (to your blog or photobucket, etc.) and know the permalink address, so you can refer to the link in the scroll box.

Reply

kim April 19, 2010 at 7:02 AM

I am so sorry…I feel really stupid. They had me save it to my computer…how do I transfer it over to my photobucket account or my blog?

Reply

kim April 19, 2010 at 7:05 AM

Never mind…I got it!!! Thanks so much…here’s hoping this works this time :)

Reply

JP April 23, 2010 at 7:14 PM

Hi, I have been struggling with this one for a few hours now, sadly. I see that the last comment on this post was almost a year ago – I so hope that you are still out there in Cyber space. I am unable to click on my button, and am also unable to get rid of the drop down code box underneath the image. Could you please advise – I would so appreciate it! Also, if you maintain a website with an image folder, could you use that to access your button instead of a public forum such as Flickr?
-Jennifer

Reply

SBA April 23, 2010 at 8:33 PM

Hi Jennifer. Actually the 130th comment was a few days ago! Obviously that’s too many to read through,, lol. I am here to help you even if I need to look in my crystal ball. You don’t have the ‘bad code’ on your blog so I can only guess at some of problems. You can put the code there or on your test blog with label “under construction.”
1. It’s okay to house the button anywhere folks can access (on our blog we don’t allow ‘hot linking’ of our images, but the one you use is okay (http://www.vtsandwichgarden.com/images/slow_blog.jpg).
2. I clicked on your image, it points to the post not your home page called ‘get your slow button here.’ — when people display your button you want their readers to go to your homepage.
3. I’m clueless about the ‘drop down code’ you want to get rid of. If you mean the scroll box you absolutely need that so that people can copy and paste your button in their sidebars. So,give me another clue … I’ll be online for a few hours.
SBA´s recent blog ..See What’s New at Blogging With Success My ComLuv Profile

Reply

JP April 23, 2010 at 8:47 PM

Thanks so much for looking things over. Here’s my latest scenario (I’ve changed some things around,) which differs some from what you’re original post was about. Instead of creating a grabable button for promoters to advertise my homepage, I am intentionally trying to advertise one specific post. I have high hopes that this post will grow into it’s own site someday, and I can revamp the code as appropriate. So, if you scroll down on that particular post, you’ll see that I have attempted to publish the code to be copied and pasted by other bloggers – but Blogger won’t let me publish the code, it just interprets it every time! You’ll only see the image. How does one publish code without it being interpreted? Is this issue specific to Blogger? I’ve tried note tags <!–, italics, strikethrough, colors – always comes up as the image!
JP´s recent blog ..Get Your Slow Blog Button Here! My ComLuv Profile

Reply

SBA April 23, 2010 at 9:06 PM

Okay, that’s a whole different ball of wax! You need to let the code escape Blogger’s editor. It’s really like my tutorial code where WP did not interpret it because I converted it to text and put it in the html window — it displays as html for copy and paste. Read this post:
Keep html code from disappearing
You don’t need the text area stuff just escape the html like this (use your image & url)
<a href=”http://BloggingWithSuccess.net”><img src=”http://farm4.static.flickr.com/3358/3279966696_6f63996198.jpg” alt=”BWS tips button” width=”125″ height=”125″ /></a>

Reply

JP April 23, 2010 at 9:25 PM

Thanks again – I think I worked it out by learning < " / etc… It has been a strange day for a girl like me!
JP´s recent blog ..Get Your Slow Blog Button Here! My ComLuv Profile

Reply

SBA April 23, 2010 at 9:42 PM

Glad you learned something geeky.. lol Here’s the button using your new code:
Slow Blog Button

Reply

Michelle April 29, 2010 at 11:51 PM

Thanks so much! I’m a Wordpress girl, and have been having trouble making my button work. I couldn’t seem to make it fit properly into my sidebar widget, (it stuck out way too far – I think it’s because I use the Arras Theme though) so I had to tweak it for now by adding a link over my button, to another page where the button code could be grabbed. It appears to be working correctly now, although I had to change some of the code to make it work. Thanks again for the great tutorial. I’ll definitely be back for more! Peace. :)
Michelle ´s recent blog ..Food Democracy Now – Want to know what’s in your food? My ComLuv Profile

Reply

SBA April 30, 2010 at 1:25 AM

Michelle, remember you can make the scrollbox narrower by adjusting the column number —

<textarea cols=”20″ rows=”3″> … etc.

I think 15 instead of 20 will be perfect. So put the scroll box in the sidebar below your image and delete the page if you prefer!

And THANKS for grabbing our button!!!

Reply

Michelle April 30, 2010 at 9:08 AM

Thanks so much for your help! I did try making it smaller, but it didn’t work for me. I think my theme (Arras) may have something to do with it. I’ll keep fiddling with it in time, but for now I’ll take what I can get. Thanks again, you have a GREAT site! :)
Michelle´s recent blog ..Food Democracy Now – Want to know what’s in your food? My ComLuv Profile

Reply

SBA May 1, 2010 at 4:55 PM

Okay, but I’m from Missouri (not!) so ‘you’ve got to show me.’ When you’re fiddling, send me an email with the code you used or leave it on the site with a title “under construction’ and let me know. Glad you like our blog, we have lots of new stuff planned. stay tuned…

Reply

Krishenka May 5, 2010 at 9:20 PM

This is the best tutorial I have seen took me awhile but did it blowing kisses your way

http://krishenkavintagetreasures.blogspot.com/

Reply

SBA May 5, 2010 at 10:04 PM

Blown kisses come in handy on days where my ‘to do’ list is too long (i.e. today!). Thanks, glad to hear you worked it out. You might want to change the alt= to something you want to track instead of ‘bws tips buton’ which I track on google search.

I love the overall look of your blog! One suggestion: the wording below your Blog Title doesn’t show up too well:

Apart from having great fun with my buttons creating jewelery I have several other interests …

You need a contrasting font— try color: #EBD9AC which is a beige.

Apart from having great fun with my buttons …

Reply

Evelyn Parham May 15, 2010 at 11:52 PM

Hi there!
I’m so glad I found your site. I was searching the web to get instructions on how to add the “Grab Me” button, but the tutorials I found did not work for me. Your code worked perfectly. Thanks and you’ve got yourself a follower. :)
Take care!
Evelyn Parham´s recent blog ..How To Do Dry Skin Brushing My ComLuv Profile

Reply

SBA May 16, 2010 at 3:18 AM

You make my day! You were able to follow the tutorial and our blog! Thanks. I visited your blog — very appropriate color scheme for healthy living. Also using Thesis I see… good choice. The text on your button could be clearer — you may need to make it larger than 125 or have a plainer background. Athough lovely in the header, your photo is unrecognizable as a favicon. Try some of the sites in our post, NO Excuse for No Favicon. Maybe the script letters E or P ?

Noticed you grabbed our button — you’re awesome! Doug created the design, check him out at dougdraws.com.

Reply

Teresa May 19, 2010 at 9:46 PM

HELP! My picture does not show up! I uploaded to Flickr and copied the url. What am I doing worng. This blog is not live yet so I can play with it . Any tips?

Reply

SBA May 19, 2010 at 10:22 PM

You’re using the url of your Flickr page. Has to be the the jpg of your image:
… img src=”http://farm2.static.flickr.com/1155/4621384119_aef7160479.jpg”
…etc.
When viewing the image on Flickr right click the mouse for image into to see the real link address.

Reply

Teresa May 19, 2010 at 10:06 PM

oops here’s the html code


Teresa´s recent blog ..We Have Launched! My ComLuv Profile

Reply

SBA May 19, 2010 at 10:31 PM

Unfortunately the comment box editor interprets your html code instead of displaying it tutorial style! so there will be lots of ‘oops’ until you use the convert the code to text, even then you may have to cross your fingers… lol Let’s see if this shows up(it’s the wrong image addr you tried to send:
<img src=”http://www.flickr.com/photos/mycolorplay/4621384119/” alt=”Design kids can do and moms can live with!” width=”125″ height=”125″ />
Read more about keeping html code from disappearing.

Reply

Teresa May 20, 2010 at 1:01 AM

wow that was fast! I finally found the correct URL. Thanks! The picture is too small however. I tried to enlarge the graphic image, but it still looks the same on the website.
I must say your help is so easy to follow (unlike most) for the average person who is not so tech savvy. I have you bookmarked and have spent a few hours reading all of the fantastic posts and advice. Well done :)
Teresa´s recent blog ..We Have Launched! My ComLuv Profile

Reply

SBA May 20, 2010 at 1:11 AM

Actually I gave you the image to use in my first reply: 125 x 122 is the size.

…http://farm2.static.flickr.com/1155/4621384119_aef7160479.jpg

you have the one that gives a small size:
…. s.jpg
If you want, try the … m.jpg version.

Thanks for compliment — obviously I like helping folks (hence very few posts… lol)

Reply

Sheri May 20, 2010 at 7:50 PM

Thanks again for the tutorial on creating a button. I’ve seen on another site (I wish I could remember which one) a rolling list of buttons from other sites. I would really like to do this on my site but can not find any coding to do it. Do you have any idea how to accomplish this task?

Thank you for your time.

Sheri from MyBargainBasket.com

Reply

SBA May 21, 2010 at 5:07 AM

Sheri, that’s a great idea for a post! This article has over 150 comments so let’s start a new topic! So look for something in a few days…

Reply

autie May 21, 2010 at 10:35 AM

OK, really trying not to be such an idiot, but I’m completely dumb when it comes to computers…made a button (shocker), then followed you’re instructions, which were awesome by the way, but I tried to test it, and it didn’t take me to the blog. I tried to trouble shoot by making sure it looked like your code, and I think it does…what am I missing? sorry! Can you help?!

Reply

SBA May 21, 2010 at 5:30 PM

Hi Autie, as I like to say we all start out ‘dumb about computers’ — the smart ones dig in and try things the way you’re doing! My html eye saw something out of place:
… ” alt=”mAde button” / >< /a >width=”125″ height=”125″ / >
The width and height should be right after the alt info and before the close “< / a >”
Delete the duplicate “/ >” after the height.
When I put it on my test blog the width stuff was ‘dangling’ in the sidebar but the image link worked.
So try this and let me know… don’t copy code from this comment since I added spaces to make it print

Reply

autie May 21, 2010 at 10:59 PM

OK, I think I made it worse…I told you I was so dumb!
autie´s recent blog ..Felted Wool Roses on Alligator Clippies My ComLuv Profile

Reply

SBA May 22, 2010 at 5:54 AM

The scroll box code looks the same to me as before:

<a href=”http://madebyautie.blogspot.com”><img src=”http://i301.photobucket.com/albums/nn60/aemousser/mAde-Button.gif” border=”0″ alt=”mAde button” />width=”125″ height=”125″</a>

that section of the gadget needs to look like this:

<a href=”http://madebyautie.blogspot.com”><img src=”http://i301.photobucket.com/albums/nn60/aemousser/mAde-Button.gif” border=”0″ alt=”mAde button” width=”125″ height=”125″/></a>

Reply

Denice May 28, 2010 at 2:04 AM

THANK YOU!!! I have been trying to do this all week and you helped!! I added your button to my blogger help on my side bar! Thanks again!!!

Reply

SBA May 28, 2010 at 3:54 AM

Denice, you’re welcome — glad I could help. I’m honored to be in your sidebar. You have a great button image:

I joined your google friends…
SBA´s recent blog ..Use Apture To Keep Visitors On Your Blog My ComLuv Profile

Reply

Whitney June 10, 2010 at 7:54 AM

Thanks SO much! After trying several other sites, your site is the only one that would allow me to correctly add a scroll box under my button. Thanks again!

Reply

SBA June 10, 2010 at 5:57 PM

Great! It always feels good to finally get something to work. I was a bit apprehensive when I saw the image url with numbers after the .png but it works!

Reply

Sarah June 16, 2010 at 1:37 AM

Hi, Thanks so much for the tutorial! It worked perfectly for me in Google Chrome…but in IE it shows as 2 images, and no html box? IS there a way to fix this? Thanks so much for all your help!

Reply

SBA June 16, 2010 at 3:47 AM

Now that’s a new one!!! But seems like another reason not to use IE… lol. I looked at the code in IE and you seem to have a malformed ending tag for the textarea. It should be:
< /textarea > — I put extras spaces so WP doesn’t balk
But you have it as:
< /textarea/ > — see extra slash? look in your gadget and let me know if that’s the case. Firefox corrects for these minor lapses in typing!

Reply

Sarah June 16, 2010 at 4:21 AM


Here is what I have- there wasn’t an extra slash, unless I am missing it? Thanks so much for all your help~

Reply

SBA June 16, 2010 at 7:41 PM

I guess IE showed the extra slash because it was confused by the code you used (& lt; and & gt;) for some of the open ‘< ' and end tags ' >‘ within the textarea section. You fixed that part and I just added the image back on top of the scroll box so you’re good to go in IE (shudder) also.

Reply

Sarah June 16, 2010 at 9:16 PM

THanks so much!!! :) You are the best!!

Kharim July 6, 2010 at 6:36 PM

Nice post SBA. The comments below, did you make the buttons for the commentators?

Reply

SBA July 8, 2010 at 2:23 AM

Hello Kharim,
I appreciate the feedback! Which buttons do you mean? The identity icon:
? If so it was Ishan who download the icon set.

They are defined as background images in the styling sheet.

Reply

Awais July 22, 2010 at 4:09 PM

Thank you SBA for such a useful post.Iam a newbie to blogging so keen to learn all the time.I have applied quiet a few techniques to promote my blog, this add my buttons seems to be another good way to drive traffic.I liked the way you gave a detailed tutorial of the widget.

Reply

SBA July 23, 2010 at 6:35 AM

You seem to be on the right track! Glad I could provide this info for you.

Reply

Alyssa July 22, 2010 at 11:51 PM

Thanks so much!
Super helpful and easy to implement :)
–Alyssa from Crafting Scout

Reply

SBA July 23, 2010 at 6:41 AM

You’re welcome. Those beads look charming! Good luck with your new blog. I notice the footer image is misaligned, maybe you can contact the designer… Very appealing background framing!

Reply

Lucy July 28, 2010 at 9:32 PM

This tutorial was great. I however am computer illiterate. I’ve made a button, people can grab my button, but then the button doesn’t link back to my blog.

HELP. Thanks!! :)

Reply

SBA July 28, 2010 at 11:45 PM

I guess you fixed it. My eye scan concluded the link is in the scrollbox; a quick test in my sidebar showed the image and the correct link! So you may be looking at the image on top of the scrollbox? Readers just grab the code. It’s a good idea to grab the code the way readers would and put in a new widget as a test, then delete the widget.

Reply

pramila jain July 31, 2010 at 5:46 PM

Hello i have started a blog http://websitepopularity.wordpress.com/ i want to know how can i promote it to get more traffic?

Reply

SBA August 2, 2010 at 6:34 AM

Hi Pramila,
That’s a loaded question asked by most bloggers! There is no one answer. Here’s what I said to someone who asked in the post called:“Case Study: Successful Blogging Tactics for SurvivalStew”

Promotion- Guest articles are good. make sure the link back goes to a post your write (a landing page) to ‘convince’ people to follow your blog , show some of your best posts, create a contest, use BlogCatalog broadcast, create friends of people with similar blog tags as yours. Send about 1 hr/day promoting. Check you new RSS count in a month to see effect. Visit your commentators’ blogs and reciprocate.

Reply

Gardenmom29 August 17, 2010 at 2:32 AM

Thanks for much for the helpful article. I managed to get it to work…but I would like to center it. I am just learning some basic things about html, so I would appreciate any instruction you could give me on this point. Thanks!

Reply

SBA August 17, 2010 at 2:50 AM

Hello Garden Mom
Glad it worked for you! The html you need to add is below. Place the first one at the beginning of all code in the gadget; place second one at the very end.
<center>
</center>

That should do the trick! Find more html/css here:
Blog Styling Tips: Introduction

Reply

Manoj Kumar Rout August 25, 2010 at 6:35 PM

Interesting to read this blog, very useful for me. I also want to know a little about my blog. Can you please tell me some thing ?

Reply

SBA August 26, 2010 at 12:37 AM

Well, Manoj
You picked the wrong ‘old’ post to spam! I’m the type of blogger who likes to look at real readers’ sites and give feedback (usually unsolicited). You don’t have a blog and you’re not a blogger. The link you used goes to a one pager dated 8 months ago that is a front for another site — major titles and text on the page link to that one referral site. I only bother to respond to the ‘comment’ as a lesson for other bloggers. We can’t tolerate spam. In the process I learned you can now remove the comment luv for unworthy notes like this — another lesson!

Reply

sharon August 31, 2010 at 11:47 PM

I used your terriffic tutorial to add “grab-my-button” to my blog. For this right-brained thinker, your tutorial was easy to follow and I so appreciated the visuals! May I ask a quick question, please? The background of my blog is not white. But the background of the the scroll box is white…and I don’t like it! Any way to change the color of this? (#A49F91 would do it). Thanks for your advice — and for your patience wiith the likes of me!

Reply

SBA September 1, 2010 at 7:19 AM

Sharon,
Thanks for the compliment — to make a different background you just add an style property as in this example using your color #A49F91. Enjoy!

<textarea cols=”20″ rows=”3″ style=”background-color:#A49F91″>

Reply

sharon September 1, 2010 at 8:08 AM

And thank you for the advice. I quickly tried adding it……but I only succeeded in adding a second blank white scroll area. Would this “style property” be inserted the end of the string…or in the middle…or doesn’t it matter?

Reply

SBA September 1, 2010 at 8:24 AM

don’t add another textarea, just insert the style=… stuff. right where I have it in the comment above — after the rows=”3″

Reply

sharon September 2, 2010 at 6:30 AM

Thanks so much – it worked nicely. I’m pleased to add your button to my side bar!

{ 4 trackbacks }

Previous post:

Next post: