Monday, July 25, 2011

Adding a Badge with Code to your sidebar - Grab My Button

Here's an easy way to add your own "Grab My Button" Gadget to your blog.
Make it easy to share your shop or blog with the rest of the world :)

First off, you need a button
(don't have one? scroll to the bottom of the post)
and you need to upload it to a site like www.tinypic.com
I suggest you also have it emailed to you in case you lose the page while you are working on your code.



You are going to want the Direct Link For Layouts code.
And here's what you do with it...

Open up a HTML gadget



Then copy and paste this code into it:


<div align="center">
<a href="YOUR SHOP OR BLOG URL" target="_blank"><img alt="grab my button" border="0" src="YOUR IMAGE URL" /></a></div>

<div align="center">
<form>
<textarea cols="15" readonly="readonly" rows="6">&lt;a href="YOUR SHOP OR BLOG URL" target="_blank"&gt;&lt;img src="YOUR IMAGE URL" border="0" alt="SHOR OR BLOG NAME" /&gt;&lt;/a&gt;</textarea></form>
</div>




Here are the changes you are going to have to make:



Where it says YOUR SHOP OR BLOG URL
Change that to the location you want your button to link to.

Where it says YOUR IMAGE URL
Change that to the tinypic url that you just created.

Where it says Shop or Blog Name
That is the title of the page you are sending people to.

When you copy the code, MAKE SURE you don't leave anything out.
Make sure when you replace the text with those urls that you don't leave a space or delete a " along the way. 

You can change the size of your scroll box by changing the numbers "15" and "6" to fit your sidebar. You'll need to play around with this.

If you have your own code to add to the scroll box, use this code


<div align="center">
<a href="YOUR SHOP OR BLOG URL" target="_blank"><img alt="" border="0" src="YOUR IMAGE URL" /></a></div>

<div align="center">
<form>
<textarea cols="15" readonly="readonly" rows="6">YOUR CODE HERE</textarea></form>
</div>


I checked it out and it worked for me
now it's your turn to try it out!
Let me know if you have any questions or problems :)
Good luck!

If you don't have a button, you can use the image you are already using for your etsy avatar. If it needs resizing, let me know and I'll see if I can resize it without losing resolution. If you want me to make you one, Promo Frenzy Team members get 20% off everything in the shop. Convo me for the code... it's only for team members, because you all rock!

18 comments:

  1. Kelly, you rock...I am going to spend some time on your blog and get some of these wonderful tips and use them...

    ReplyDelete
  2. your post helped me to learn how to add widgets to my blog! thank you!

    ReplyDelete
  3. Kelly - this is a perfect post for me, because we don't have a button yet (and thanks to my daughter, we have a new avatar to use)! Thanks so much. You're awesome!

    ReplyDelete
  4. Thanks Kelly! I'm going to try it!

    ReplyDelete
  5. Thanks so much for posting these tutorials Kelly. You are helping a lot of people!

    ReplyDelete
  6. Thanks Kelly! It's so nice of you to take the time to help us all out with tutorials, and buttons. Making codes, etc. You rock! I appreciate everything you do for the team!

    ReplyDelete
  7. Your instructions are always so easy to follow! Thank you!

    ReplyDelete
  8. Great tutorial as usual. I'm going to hang on to this.

    ReplyDelete
  9. Good info. Thanks for this and all of your hard work for the Promo Frenzy Team. I really have utilized the listing jpeg for my empty photo slots.

    ReplyDelete
  10. wow, thanks so much for this tutorial!

    ReplyDelete
  11. Thanks! Information overload. I may have to let me 18 year old look at this and get me through it.

    ReplyDelete
  12. great info- i'm gonna have to try this!
    thanks so much~

    marilyn

    ReplyDelete
  13. thank you thank you thank you!!! i made my own button!! ur awesome!
    xoxo

    ReplyDelete
  14. I got this web site from my friend who shared with me regarding this site and at the moment
    this time I am visiting this website and reading very informative articles here.
    website design

    ReplyDelete

I want to hear what you think...