Saturday, February 18, 2012

How To Make an Animated Blog Button

Have you noticed my fancy new Blinky Blog Button I added to my blog recently :)
I've been wanting to learn how to make one of these for quite some time, and once I did my research, I found they're quite easy to make! I thought I'd share my new found info and how I changed the html code a bit to fit my needs.
The site I used was Picasion and they make it so easy for you to create your code! Just upload the photos you want included in the animation, choose your size and speed and click Create Animation. How easy is that!
You can leave your code as is and it will work fine. I wanted mine to look a little different, so I played with the code a bit to customize mine.
Here is the original code:
http://www.blogger.com/%3Ca" title="how to make gif">http://i.picasion.com/pic49/08fe8f98b563f5e26bbf4b029e8fba20.gif" width="125" height="125" border="0" alt="how to make gif" /> http://www.blogger.com/%3Ca to make gif
~~~~~~
And here is my customized code:

Memories for Life

http://www.blogger.com/%3Ca" title="Memories for Life">http://i.picasion.com/pic49/08fe8f98b563f5e26bbf4b029e8fba20.gif" width="125" height="125" border="0" alt="Memories for Life" /> http://memoriesforlifesb.etsy.com/%22%3E%3E
~~~~~~~
I just played around with the code and uploaded it to my blog until it was right.
The main things I changed:
*I changed the web address after both of the href=. I wanted my button to direct people to my website, not picasion's.
*After title= and alt=, I changed these from "how to make gif" to my website name "Memories for Life". Now when you hover over the button, you see my title and not theirs.
Another thing you could change is the size. Where the numbers "125" are located, you can change these to any size you want to fit your side bars. After seeing this in the code above, I was able to fix one of my other buttons that I never could get to fit in my sidebar...problem solved :)
~~~~~~
I hope this was easy to follow and you found it useful :) Leave any questions in the comments and I'll answer them as best I can.

14 comments:

  1. Hi Edi!

    I noticed that button a while ago and wondered how you made it :)
    Thanks for sharing!!

    ReplyDelete
  2. Thanks for sharing the info. The animation is a real attention getter.
    Happy weekend.

    ReplyDelete
  3. Thanks Edi, for sharing the info on your blinky button!! I bookmarked it so that I can add one to my blog too. :)

    ReplyDelete
  4. Thank you for posting this! I just made my first button a few weeks ago and this will be a very fun addition! I am definitely saving this to my little bag of tricks- just what I needed!

    ReplyDelete
  5. Thanks for your visit and kind comments. I love your button, having just done a lot of blog work, I think this is awesome and would love to work on adding something like this for myself. Thanks for sharing, you have a lovely blog.

    Ruth

    ReplyDelete
  6. wow edi! That's fantastic! Thanks so much for letting your readers know how to do this! I'll have to try it out! {:-D

    ReplyDelete
  7. Thanks for sharing Edi; I'll have to try it.

    ReplyDelete
  8. Thanks for the info, Edi! I'll have to try this sometime.

    ReplyDelete
  9. Thanks for sharing! Definitely bookmarking this. I need to make a button first, then I'll move on to a fancy schmancy animated one! :)

    ReplyDelete
  10. Well, isn't that a neat little button! Usually animated buttons drive me bonkers when I see them out the corner of my eye on a blog but yours doesn't. Thanks for the info on how to make one!

    ReplyDelete
  11. This comment has been removed by the author.

    ReplyDelete
  12. Thanks for sharing!! So good to know.

    ReplyDelete
  13. Thank you for sharing this tip! Great idea!

    ReplyDelete
  14. How funny, just a couple of days ago I asked my daughter to make me a button (if I try and find the time to make one it'll be next year before it's up...;) Maybe she can play with this instead! Thanks for the info Edi, your button looks adorable! :)

    ReplyDelete

Thanks for stopping by!
I love your comments!!!

Related Posts Plugin for WordPress, Blogger...