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 that same code, 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://farm4.static.flickr.com/3358/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!
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)
{ 15 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.....rtise-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