Mom Loves 2 Read: How to Make a Blog Button with a Grab Code

Jan 1, 2012

How to Make a Blog Button with a Grab Code

Although I have now been blogging for over a year, I am still a newbie when it comes to creating HTML codes.  I have searched the web numerous times in order to try to find "easy" or "simple" instructions on how to do . . . on my own.  Here is what I have found to be the easiest way to make a Blog Button and Grab My Button Code for it. This is for blogger, as I'm not familiar with the other blog sites or styles.

#1) Upload your button or picture to a website like Photobucket.com

#2) Copy the "direct link" HTML code from the button on the website

#3) To put a "grab our button" on your blog:
 ~ copy the following html code.:

[div align="center"] [a href="http://YOURBLOGNAME.blogspot.com" target="_blank"][img alt="YOURBLOGNAME" src="http://YOURPICTURE.jpg"/][/a][/div] [div align="center"] [form][textarea rows="6" cols="20"][a href="http://YOURBLOG.blogspot.com" target="_blank"][img alt="YOURBLOGNAME" src="http://YOURPICTURE.jpg"/][/a][/textarea][/form][/div]

~ open your blogger account and choose "layout"
~ click on "add a gadget"
~ choose "html" and wait for the blank box to load
~ paste the code you copied here into the blank box
~ change all of the "["  for these "<" and  "]" into these ">"   (I had to change them so you could see the code here on the blog post)
~ change the areas in RED to your info ~ add YOUR blog URL, your blog's NAME, Your photo's html link (direct link code from photobucket or similar sites)
~ now click SAVE

Your new button with code should look something like this:

Loves 2 Read


Enjoy your new button!

7 comments :

  1. This rocks! You are the best. I've had my blog since May 2011 and haven't been able to figure this out. I thank you a million times for making this any easy process....I now have a button people can snag if they want to!

    Saph

    ReplyDelete
    Replies
    1. Glad I could help. I searched many differnt sites and posts until I finally figured it out. Then thought I should post what I did for others to find.

      Delete
  2. Great tutorial, i'm having issues with photobucket, what else could i use?

    ReplyDelete
    Replies
    1. I've been told that you can also use picassa or flickr.com, but I've not used them before so I don't know for sure.

      Delete
  3. i did everything but the picture it self doesn't show up :(

    ReplyDelete
  4. OMG! THANK YOU THANK YOU THANK YOU!!!! After 7 straight hours of trying to make a button your code is what got it done- needless to say my children and I are eternally grateful :)

    ReplyDelete
    Replies
    1. LOL - I know - when I first tried my own button, I went to 4 different sites and used their instructions and still couldn't get it to work. Finally I "sat down" and combined their directions and was able to come up with what works, as described here. I thought it would be great to add it to my blog so I would not forget LOL - glad I could help!

      Delete

Thanks for stopping by! Comments are always welcome!