Wednesday, 17 February 2010

WRITE YOUR OWN GRAB BUTTON

11326

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).

WRITING CODE

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.

Troubleshooting:

  • 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!

post signature

your photo name

4 comments:

  1. Awesome tutorial. Thank you!

    Scott Swedorski
    VP Product Development, CoffeeCup.com

    ReplyDelete
  2. Wow, Scott, thank you so much!

    I'm absolutely floored that you found my blog, never mind read the post. This has really made my day!

    ReplyDelete
  3. Hello Susie,

    Thank you soooo much for this tutorial! Now I'm thinking of what I want my button design to be. :0)

    And I saw on your blog the link to a free graphics program..I have the old version 7 of Photoshop but I've been using an old microsoft digital imaging Pro software...I think it replaced that Picture It! software many years ago. Funny how we get so used to one software...I also have Photoshop Elements but haven't taken the time to explore it much..I seem to jump around and use many programs for accomplishing different things.

    Oh, and I updated my Firefox browser, changed to the old editor and back to the new and sadly nothing correctly itself in the new editor...

    So I'm back in the old editor which is allowing me to hyperlink photos and resize with no issue...BUT NOW another problem has cropped up!! When I go into LAYOUT section to add or move around widgets it's acting all goofy...I'm struggling to get anything rearranged and sometimes it JUMPS and places it above my header [of all places]...then I struggle to move it to the sidebar...

    I haven't the slightest idea what is causing all my blogging miseries all of a sudden...I guess I need to the blogger forum and see if anyone else has my same complaints.

    Oh, and by the way, the spell checker works in the old editor! LOL

    Thanks again for the tut!

    ♥ Love & Faerie Dust ♥
    Stephanie

    ReplyDelete
  4. Fantastic!
    Thanks Suzie, I wanted to learn to do this for ages.
    You're so intelligent, kind and giving ;)

    xxx
    Celia

    ReplyDelete

I absolutely love to receive comments!

But please note - I DO check for spam, and I moderate all comments - any spam is deleted at source.