Friday 21 January 2011

Grab My Button Tutorial

Hi Folks, happy Friday!

You might notice that I have created one of those Grab My Button thingies that the likes of Kelly Rae Roberts have on their blogs, and may I just say, it took a LOT of effort to get this button things to appear correctly on my blog.
So as a result of the tears and tantrums I had with various code generators, HTML's and the like I have decided to do a simplified description of how to create on for your very own blog in 10 easy steps.
It goes like this:

1.  Create an image that you want to use as a button, make it smallish and upload it to photobucket,

2. Go to the design tab in Blogger, and click "Add Gadget"  next click to add html/javascript, add the title "grab my button" or whatever you want it to be.

3. Go to this button generator:  http://www.mycoolrealm.com/sandbox/gbgen/,

4. Enter your blog title, for example I entered "Serendipitychild",

5. Enter your website URL, this is the web address for your blog which appears in the long box at the top of the internet page, (where you type in website addresses) when you are actually on your blog homepage.  For example mine is http://www.serendipitychild.blogspot.com

6. Next you need to enter your image URL.  You get this by going back to photobucket and running the mouse arrow over the image that you want to use as your button.  Underneath the image several boxes will appear.  Click on the the one that says "IMG code" this is the image URL.  It looks like this:


7. By clicking the IMG code, you automatically copy it.  Go back to the code generator and paste the URL code into the box that says image URL.  You will notice that at the start and end of the code you have got this: [IMG].  Delete this from the start and end of the code.

8. Click "preview" to check everything is ok, if it is then click "get code". 

9. Copy the code from the box that appears underneath, it looks like this:


10. Go back to blogger and paste this code into the html/javascript box that you opened in step 2. Click "save"  than "save" on your dashboard.  When you go to view blog you should then find your lovely little button along with the code underneath for others to copy onto their blogs!


And that is all there is to it!!  My problem was that I didn't know what an Image URL code was or how to get one, and couldn't find anywhere that told me.  So now you know.  Hope this is helpful and will stop you from getting cross with your laptop like I did!



9 comments:

  1. Thank you!!!! I know you can pay for buttons but I really didn't want to do that. I'm going to give this a whirl this weekend.

    ReplyDelete
  2. Hope it works for you!
    Let me know if you have any trouble.

    ReplyDelete
  3. Hi Helen, I really want to add your button to my blog - just like all your things it is very beautiful! I know that this must be a very simple version of a How To, but I think I will have to wait for a son (any one of 3) to be available for me :0) But when they are I will definitely add yours and have a go at one for me.
    I wondered if you might be interested in something I discovered over at Terri's blog - which she links to a few other blogs - making a sort of journal - basically it is one card a week, building up to 52 in the year. The idea is to use playing cards. Take a look I think it is a really nice idea. On my blog roll Terri's Notebook, I am sure you will like her blog anyway, but if you click on her top bar Art Journal it takes you straight there.
    May you be blessed as you worship tomorrow,
    love Val xx

    ReplyDelete
  4. Thanks so much for doing this post! I'm clueless when it comes to 'complicated' stuff like this and am off to give it a go now x

    ReplyDelete
  5. Thanks! I've just followed your instructions and now I have one. I'll be grabbing your button! I wouldn't have been able to work out that image url thing either so thany ou again x

    ReplyDelete
  6. I have passed on 'The stylish blog' award to you, details are on my latest post Linda x

    ReplyDelete
  7. Great tech post! Thanks for sharing.

    ReplyDelete
  8. Wanted to let you know I just tried this and it's a perfect--you couldn't have made it more clear and it worked great. Thanks for sharing--I would have given up because i don't know if I would have figured it all out!

    ReplyDelete
  9. Thank yet again for this! I use it every time I make a button for my vintage fairs! xxx

    ReplyDelete

I love reading people's comments on what I have written, but I am not in the business of debating, this blog is my space, so if you can't say something nice, the please, don't say anything at all. If you don't like what I have written then please don't read it.