![Learn How To Be A Successful Blogger [Blogging With Success]](http://cdn.bloggingwithsuccess.net/wp-content/uploads/2009/10/bwsthesislogo.png)
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.
![About Writer [Blogging With Success]](http://cdn.bloggingwithsuccess.net/wp-content/uploads/2010/06/User.png "About Author")
About Author
![Related Posts [Blogging With Success]](http://cdn.bloggingwithsuccess.net/wp-content/uploads/2010/06/Document.png "Related Posts")
Related posts
{ 183 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/albums/ss30/ohmygluestick/?action/>
http://s558.photobucket.com/albums/ss30/ohmygluestick/?action/>
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-Composer/3000-12511_4-10561244.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/2506/3800500487_7ee638fd8f_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/displaying-grab-button-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.confessionsofanondomestichousewife.blogspot.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.
Thank you so much for your help!
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)…
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!
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¤t=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
Thank you!!! You made this so easy!
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
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!
Jona, love your perseverance (it’s all about trial and error.LOL). Your button is attractive
. 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.
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?
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>
Thanks so much!
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
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?
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.
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?
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.
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?
Never mind…I got it!!! Thanks so much…here’s hoping this works this time
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
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
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!
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>
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!
Glad you learned something geeky.. lol Here’s the button using your new code:
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?
Michelle, remember you can make the scrollbox narrower by adjusting the column number —
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!!!
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?
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…
This is the best tutorial I have seen took me awhile but did it blowing kisses your way
http://krishenkavintagetreasures.blogspot.com/
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 …
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
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.
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?
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.
oops here’s the html code
Teresa´s recent blog ..We Have Launched!
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.
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!
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)
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
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…
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?!
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
OK, I think I made it worse…I told you I was so dumb!
autie´s recent blog ..Felted Wool Roses on Alligator Clippies
The scroll box code looks the same to me as before:
that section of the gadget needs to look like this:
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!!!
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
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!
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!
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!
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!
Here is what I have- there wasn’t an extra slash, unless I am missing it? Thanks so much for all your help~
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.
THanks so much!!!
You are the best!!
Nice post SBA. The comments below, did you make the buttons for the commentators?
Hello Kharim,
? If so it was Ishan who download the icon set.
I appreciate the feedback! Which buttons do you mean? The identity icon:
They are defined as background images in the styling sheet.
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.
You seem to be on the right track! Glad I could provide this info for you.
Thanks so much!
Super helpful and easy to implement
–Alyssa from Crafting Scout
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!
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!!
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.
Hello i have started a blog http://websitepopularity.wordpress.com/ i want to know how can i promote it to get more traffic?
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”
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!
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
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 ?
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!
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!
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″>
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?
don’t add another textarea, just insert the style=… stuff. right where I have it in the comment above — after the rows=”3″
Thanks so much – it worked nicely. I’m pleased to add your button to my side bar!
{ 4 trackbacks }