![Learn How To Be A Successful Blogger [Blogging With Success]](http://cdn.bloggingwithsuccess.net/wp-content/uploads/2009/10/bwsthesislogo.png)
Image via Wikipedia
When you see a blogging tip you can usually tell right away if it's for WordPress, Blogger or both. In our tutorial about adding a grab button scroll box , the code includes a html tag, <textarea>to create the scroll box. The box holds the customized html code for visitors to copy and paste your button on their blogs.
However, I may have forgotten the limitations on the free WP platform. One of the biggies involves CSS and HTML freedom. Bloggers on the free WP can't add high-powered html like scroll boxes. WP.com doesn't give you an error, it just ignores the 'bad' html. If you innocently put the code in your side bar widget, you get 2 buttons and no scroll. This is what happened to Amber's Comeherelittlebug. So what to do?
Amber asked for help on Twitter, so I volunteered to send the code, not realizing her blog is on WP.com. I didn't know she had tried my tutorial already and removed the 'box.' It helps to get the details. 
Somewhat embarrassed when the custom code did not work, I found an alternative and she was able to further refine it to scroll horizontally. I worked on it a bit more and added a horizontal scroll and smaller line spacing.
As a result of our collaboration, we now have a regular text gadget that looks like a scroll box. It's sort of 'fake' but does the job. Visitors still copy and paste to display your button image.
How to customize the widget
Basically you'll display your button image and place text below it. It's the real html but with tags converted to text. This fools WP.com everytime! Some styling will add the scroll bars to avoid taking up space on your sidebar.
- Go to your dashboard, Appearance, Widgets and select the "Text - arbitrary text or html" widget. Drag it to your sidebar location. Let's add the widget code in two pieces.
- Create this code for your button to display above the box; includes the link to your blog: this is our button, just substitute your own url , image location, alt, etc. Including the link makes it easier to do the second piece of the code in step3.
<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><div style="border: 1px solid #DDD; margin: auto; padding: 5px 10px; background: #F8F8F8 none repeat scroll 0pt 0pt; overflow: auto; height: 100px; line-height: 1.5em;">***</div>
- Now take the code for the blog link and image ( up to the < div tag) only, paste it into the converter box at Bulletin Board Forum (page to middle of screen), press the gray 'html to text' button. Copy the converted text and paste it over the
***in the code in step 2. In our case we would paste this: <a href="http://BloggingWithSuccess.net"><img src="http://bloggingwithsuccess.netwp-content/uploads/2009/08/3279966696_6f63996198.jpg" alt="BWS tips button" width="125" height="125" /></a>
The last step converted the tags for the scroll box to avoid WP.com translating them into a second image!
TIP: Some of you may find it easier to first compose the text in a draft post then copy into the sidebar. Read TimeThief's article at One Cool Site about managing text widgets.
Give it a try this way only if you use WordPress.com and want visitors to grab your button!
![Reblog this post [with Zemanta]](http://img.zemanta.com/reblog_e.png?x-id=eaf93153-437b-4fa9-ac8e-fa1ac219c1b2)
![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
{ 40 comments… read them below or add one }
OMG, you never believe this. I was just like 30 minutes ago thinking that I need to dig up that article on Blogging With Success about creating a button for your blog… And I updated my email inbox and there it was as an RSS feed! Are you mind readers or what?!
Well, if you read some of the comments on the tutorial for WP.org and Blogger then you’ll know we often have to read minds to interpret the problems! Sometimes it’s like writing in invisible ink when the comments editor eats the html that visitor is trying to send you.. lol
Here’s a quote “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?)”
Glad we could read your mind on this one. There are quite a few related links but here’s the main one http://bloggingwithsuccess.net/grab-button-advertise-blog
What is a Grab button
The link in reply to Sebastyne explains it. but in a nutshell it’s like a 125 x 125 ad with a link to you blog. The purpose is to have your readers and friends copy the code to create a widget to display the button on their blogs. I encourage my blogspot readers to grab this button if they find my tips useful.
Also see the one in our side bar for this blog — it’s appearing on quite a few sites already. Yours could talk about your blogging tips and tech news.
It’s me the girl who desperately wanted a scroll-box under her blog button. I’ve written my account of the events in question in lovely blog post.
http://wp.me/pjsYu-ez
I wrote the happenings the best I could remember considering this happened over the course of a few days, the whole thing is pretty funny if you ask me…and you will find out just how much I admire Blogging With Success, it is definitely a one stop blogging spot.
Thanks again!
Wow, your account is pretty funny. Thanks for grabbing our button and the nice compliments. I guess you’ve forced me to use my free WP test blog!!! Watch out I’m becoming a ‘triple threat’ — a little knowledge is dangerous.
I was looking for some info. I stumble upon this post. Its very interesting blog. I can learn a lot here.
Welcome. Your comment was put in spam because you’re using keywords instead of a personal name. The url you left was not a blog — are you setting up a business blog? You might also consider using a gravatar.
Sir I am working as a SEO I had just start it. I am new in this business. Promoting site its my work I am working for my client . I know its a business site its not my mistake. My client want this keyword up for site so, I am using. I would be very pls if you give me link with this keyword. Pls reply me here. Thanks.
I’m usually a sympathetic person, but not in this case. Your job is to promote your site, mine is to provide an interactive reader community around blogging (human and technical sides). Readers want to visit commentator blogs as part of social networking; they use google search for products and services.
We welcome your comments on your own time, using a blank url or better yet, why not start your own free Blogger or Wordpress blog.
Great idea
Thanks for sharing 
I’m anxious to see how your button looks. Left you a message via your contact form about your theme.
THANK YOU so much!!! I’ve spent so much time wrestling with wordpress and wondering why it kept eating my code! I like the overall style of wordpress better than blogger, but it’s terribly frustrating on the design front. So thank you for solving this problem for me!
Your button is creative. I hope you get a lot of links from it. You might want to start it off by showcasing a few that you grab — need not be on the sidebar, but point to a separate page? Good luck.
thank you
ugh. I have been at this all day…creating my button, uploading my button…trying to get my button to work on my wp site…ugh. Ok…I have the button…I have the scroll thingy…but there’s no html for anyone to copy and paste! And my scroll box is huge! Help! I’m almost there! Drag me to the finish line…PLEASE!!!
Just figured out that my html code is there, but the text color is white..on a white background….that’s bad. How do I change it? And I still need to make the scroll box fit the size of my button…?
Hi Janine,
Since all of your widgets use white lettering against dark background you need to override that. The size can also be adjusted. I started with 130px but you can change. So replace just this segment:
with
background: #97C000 none repeat scroll 0pt 0pt; width: 130px;
Alternately, if you want a whitish background with black lettering in just the scrollbox, then just change the lettering color: Use this instead of what is listed above:
background: #F8F8F8 none repeat scroll 0pt 0pt; color: #000000; width: 130px;
I guess my instructions for step 3 are not clear — you should use the Bulletin Board Forum converter for the image and link code only —- not all of the code from step 2. So your converted code would be for:
<a href=”http://spoonful-of-sugar.com”><img src=”http://i934.photobucket.com/albums/ad189/3girlmomblog/Blogbutton1.jpg?t=1271115042″ alt=”BWS tips button” width=”125″ height=”125″ /></a>
Edit your text gadget, deleting everything you had put where the three asterisks were — all of the converted stuff after the segment:
but you must leave the last ending divide tag </div>.
At this point use the converted text for just your image and link, inserting before the ending divide tag.
I tried to show your converted version but WP comments keeps changing it!
You’re almost there!
I must be a complete tech idiot. Now I can’t even get my button back up. It was there this morning with a scroll box and I tried starting over because it was getting confusing, but I have tried 6 times to paste the code from your site, inserting my url, and image location, AND inserting the converted code you gave me above where the asterisks were. Now all I have is a scroll box with my button inside of it. No text. I’m ready to scream and my neck hurts. Waa. What am I doing wrong? I had half of it last night, and now nothing is working!
This is like most tutorials where it makes perfect sense once you understand the concept. lol. WP on the free platform does not allow html except the kind that you want it to render onto the screen. It does not allow the ‘textarea’ tag with creates the scroll box so easily for other platforms. Hence the actual copy and paste below your button to be ‘grabbed’ must be ‘escaped’ or converted to text. I’ll rework the tutorial to come at it in a different way. Maybe you can help me after you implement your box? Go to this post on my test blog to see exactly how your widget code must look — http://ubloghere.wordpress.com/2010/04/13/code-for-spoonful-grab-button/
My version shows as black lettering, but your theme styling will override to white.
Just copy and paste it into your sidebar widget. Then study the final code to see where you (actually we) went wrong in the steps above. There’s probably a much less painful way!
You rock..thanks so much for the help…I’ll def. come back and pick up your new button! I put the code in my text widget. It worked, but the html scroll box is askew. Check it out if you have time. I’m done for tonight. I’ve prob. spent 10+ hours just trying to get my button to work. Blah. If you can, look at it and let me know what you think. It’ll def. work for now. You are amazing! I’ll study to see the error of my (our) ways tomorrow morn. Thanks again.
Janine
You’re welcome. You just need to center the image above the scrollbox. The same way you centered your photos of yourself and your husband. In the img tag add
I can’t thank you enough…really. You have brought sanity to my insane little blogging dilemma, and I will always be indebted to you! Ok, maybe that’s exaggerating, but I’m really appreciative for your incredibly smart noggin. Thanks again. I’ll be looking for your new button!
Here’s the new button — I need to put it with the scrollbox in our sidebar (we lost it when we converted to Thesis theme!)- This is the 150 x 150 size which in the grab code will resize to 125 x 125.
on your blog where you show the old image, just change the image url (leave sizing of 125 to fit your sidebar…) to
i282.photobucket.com/albums/kk272/SBA_jpgs/bwstipsbutton.jpg
You’re officially our front runner in using the new button! Thanks.
You are awesome! Thanks for this; thanks for your site! I did it on the first try!
Happy to hear that! I had to track you down to see your image:
Looks good…
I get the button on my WP blog, however, above my button there is part of my code written…I can’t get it to go away. It’s actually above the button, no where near the code for someone to copy?
You seem to have converted (escaped) too much of the code? try it again, but put it in a draft post and view it. I can look at it more closely tomorrow — so take it off the side bar if you can’t get it on the rety… I’ve copied the current source.
Hi Kim,
I put the code for you in this post on my test blog:
http://ubloghere.wordpress.com/2010/04/26/code-for-iwascreated2worship-button/
For future, note these ‘errors’
1. You added an extra link and image src to your album! So should have deleted:
2. Some of this code was converted to text by mistake, sort of messing things up in general as WP tried to match closing html tag… but that’s another post!
Perhaps another approach would be to copy all of the tutorial text and just change your urls for blog & image, sizes and alt values… Please try a test that way to see if I should modify the tutorial with that suggestion… appreciate your help on that.
You my friend ROCK!!! Thank you so much! I knew I was picking up something extra, but could not figure out what it was! THANKS!!!!!!
Kim´s recent blog ..Alarm System Needed?
BTW I will try out your suggestion and get back with you tomorrow on the clairty of it…will let you know then
Kim´s recent blog ..Alarm System Needed?
Hello, SBA, I have left a comment so you may have my email, thanks for the idea of having a contact box! I shall look into it. My article for this was really trying to make it look straight forward so that others less technological than I can have a go!
Blessings,
Meggie
Meggie´s recent blog ..Book Review: Twelve Extraordinary Women
I sent you my comment on your scrollbox. Check you email. Let me know if I can help…
I will try this for my blog…..
Let me know when you’ve added your button!
I have the button displayed- YAY! But where the code is supposed to be for other people to get, is blank. How do I get the code to display?
I see you added the scroll box after sending this message? anyway you should use the center tags and add a space between your image and the scroll box. Good job!
THANK YOU!!!! Oh my goodness my brain is fried! Thank you for this. This was so helpful and the only set of instructions I was able to successfully follow. I appreciate it so much.
Have a great day. =0)
Congrats Melanie!
Very nice buttons… You’re quite welcome for the tutorial. I know how html give most people a ‘brain freeze.’ You’re lucky yours runs hot.. lol
{ 1 trackback }