Copyright-free image from Tack-o-Rama
This tutorial comes by special request from Stephanie at QueenofDeamzwho asked me how to write her own grab buttons.
You have a choice of two styles - just the picture, with code underneath, nice and simple - or grab code in a scrolling box, where you can control the text area by increasing or decreasing the number of lines and the pixel width of the box itself (I’d recommend a maximum of 200px, to fit most sidebars).
How I actually learnt was to copy other people's code and keep overwriting it, posting it to my blog and see if it worked. I then downloaded a free html editor from CoffeeCup.com and practiced in that. This tutorial is written using the CoffeeCup editor, so you can see exactly how it all works.
Your main problem is getting the code to show up. You can't just write the instructions as you see them, as any web site or blog will read them as commands.
One way is to create a text box in Photoshop and then save as a gif, treat it as a picture.
The other way is to substitute text for symbol, ie: every time you see this < you have to write it as < and every time you see > you have to write it as > …. you see? Writing this, Blogger has immediately changed it so all you see are two lots of < and < etc.
This is what I actually wrote:
And how it works in Real Life. The code with a green outline is for the first option, a picture with grab code underneath.
The code with a blue outline shows a picture, then grab code in a scrolling box with number of lines and width of box already specified.
The code in red is the image itself.
This is how it looks in the Preview pane, so exactly how it will show up in your blog or website.
The top picture is Option 1, the picture with just the code underneath (the box outlined in green). The second picture is Option 2, the picture with the grab code in a scrolling box.
You need both sets of code – the first half of the code is the picture, which repeats with the code written again where you have substituted the < symbols with the & codes.
THE SIMPLEST WAY
The easiest way of all is just to copy the scrolling widget code from one of my images on the right sidebar, and substitute your own code!
In other words, the first bit where it says href=' is where you'd put in the site you want to link to (your blog address) and the second part where it says src=' is the source of the image: in this case, where my picture is on Photobucket. Open a free account at photobucket.com if you don't already have one.
Leave everything else as it is, and the scroll bar and picture will show up - but with your image instead.
- If your image doesn't show, have you left any gaps between the " and " symbols?
- Have you forgotten to delete the [IMG] and [/IMG] code?
I hope this helps – email if you have any queries. I look forward to seeing amazing grab buttons all over your blogs!