The 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.
For Blogger and Wp.org, here’s the code you can customize and use for your button:
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.
SBA is a web designer and co-founder of BloggingWithSuccess.net. She publishes 
varun (9)
Creative Junkie (5)
Gabe | freebloghe... (5)
George Serradinho (4)
Ruchi (4)
{ 1 trackback }
{ 111 comments… read them below or add one }
I can’t thank you enough for helping me out with my button!
Oh, that’s a dangerous statement! I’ll think of something… LOL
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
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.
I’m wondering in fact… Would many people be tempted to but your button on their blog?
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.
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://“>
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!
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.
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
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!
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 :->
Sorry I forgot that I posted in here.
My Button now works. Thanks for having great tutorials.
Happy Spring
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!
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…
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!!
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!
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????
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.
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?
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>
DON’T FORGET TO DELETE THE EXTRA SPACE I HAD TO PUT IN AFTER EACH < TAG when you copy and paste into your html.
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.
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
Thank God! Making logos does not involve codes! (I chose right topic!)
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.
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
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.
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.
Thanks,
I was having so much trouble coding my box and you made it so easy!
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.
Thank you….you just saved my night!
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 !
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/
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).
Thats a really gud idea. Thnx a lot !!
PS: I cant believe that you reply to every comment
Glad that you liked it. Fell free to ask any questions if you encounte problems.
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.
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/al.....n/>
http://s558.photobucket.com/al.....n/>
Its alright when I visited your blog. I guess its the 150px one at top of right sidebar.
Oh my gosh! I did it! I did it! Thank you for your brilliant mind! =) I am on my way!
Glad it worked!
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!
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
#ffffffIf 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.
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/imgthen add it in div code as url(‘ht_______’)Thanks for attracting my attention to this. It’s worth giving a shot and seeing how it goes, at least.
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..
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.
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.
very good tutorial…i got my button done…It was pretty easy…
thnx again.
Thanks. And your button is not too shabby! Glad you used the Alt= field correctly.
Thanks for adding my button…
keep up the good work…
Now we need to work on your Gravatar — that shade of blue with the sideways G does not suit you!
Okie…so wat do u suggest…
Thanks so much for your help with this!!
Nice Button, good alt tag.
@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.
@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.
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-.....61244.html ).
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
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.
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
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
Thanks! This is just what I need. I have just added it to my blog. This is great
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.
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.
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.
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?
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.....fd8f_t.jpg2. 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”
Thanks.
can you help me add a link in the picture?
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]
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!
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!
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!
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.
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!
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!
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!
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…
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
Congrats. It’s always worth the”tears” to see a finished product! Your button is perfect.
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
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.....-code-free
So start over with that tutorial. Let me know how it works…
Thank you for this easy to use tutorial! I successfully added my “grab button”!
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!
thank you – and thanks for the tip about just replacing it – I wouldn’t have thought about that!
Thank you so much. Your instructions are by far more simple than any others I found.
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!
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.confessionsofanondo.....ogspot.com
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¤t=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.
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.
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…
Thankyou, this was such great help, with some playing around I think it is working.
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.jpgwith
....//farm3.static.flickr.com/2619/4154559968_dfe982731a_m.jpgIt’s always a good step to copy your own code and put is sidebar or draft post to test it out. then delete it!
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
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!
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
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!
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…
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?
Nice button. If you look at instruction on our tutorial it gives you a clue:
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.
Thanks a bunch! I added the alt= tag.
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!! ?
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.
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.
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…
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.
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?
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¤t=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!
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
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.