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.
- Copy and paste the code I put in this post for the DIY Life blog
then replace that blog info and image src url with YOURS!
----------------- The tutorial code I used before was getting garbled by the WP editor!
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!