Wednesday, 7 August 2013

Technology Tip - Grab My Button Code

Did you notice that I finally have a code with my button?  Now people can simply copy and paste my code into their blog and this will happen:
Grade 4 Buzz


It's kind of like blogging magic!
I'm going to tell you how I did this.  It was actually pretty easy.  I promise!  Go to the website: Grab My Button Code Generator.


The only information you need is:

  • the name of your blog
  • the address of your blog (URL)
  • your image URL
The first two items we can do easily.  I would suggest that when inserting the URL of your blog, copy and paste directly from your website to avoid any errors.
Getting your image URL is a bit more work - but not hard.  Go to your blog.  Click new post.  Click on the insert image button, and select your button from your computer.  (See the little insert image icon at the far right of my toolbar below - beside 'link'?)

Now click on HTML (beside compose at the left).  This changes your image into HTML code.



Find your image URL by looking for the information between the quotation marks "" that have .png (or maybe .jpg) at the end.  This information is duplicated in the HTML code.  Copy the first one - everything in-between those quotation marks.  This is your image URL.  (Mine is http://2.bp.blog...Button.png)  Copy that and paste it into the image URL box on the Grab My Button Code Generator website.  Now you can preview your button and code, add coloured borders around the box, change the size of the box, the colour of the code background, and the colour of text.  If you are happy, click 'get code'.  Copy and paste this code.  Now go back to your blog.  Click on Design, Layout, Add a gadget (HTML/Java Script), paste in the code.  Ta da!!

8 comments:

  1. Congratulations on your button, Lisa! As you probably know, I was just looking for it the other day to link to my blog! ~Deb
    Crafting Connections


    ReplyDelete
  2. Do you have a tutorial on how to make a button? I need that first! :)
    Abbey
    http://teachertalkwithmrst.blogspot.com/

    ReplyDelete
  3. Thanks for the tutorial Lisa, maybe I'll make a coded button for my link-up!
    - Melissa
    Teacher Abroad

    ReplyDelete
  4. Great tutorial, Lisa! You're turning into quite the pro! :)

    A question for you -- and this is only because I am lazy -- would you consider putting a Follow Me with Google Friends Connect button on your sidebar? I follow you through Bloglovin, but also like GFC because then it shows up whenever I go onto my Blogger homepage. I tend to check these GFC blogs first (because they show up right in front of me.) I think you can add a Follow with GFC button through Add a Gadget in Layout.


    Jennifer
    Mrs. Laffin's Laughings

    ReplyDelete
    Replies
    1. I did it! Thanks for your help, Jennifer! (see far right...)

      Delete
  5. Thanks for the tutorial! I think I can do it now!
    Nicci
    Chalet Ré

    ReplyDelete