September 9, 2011

How to Add a Button with Text Box to your Blog

   I'm sure many of you already know how to do this or you hired someone, ahem like myself ;),  to do it for you, but I wanted to post for those of you still trying to figure it out and also to keep it on my blog in case I forget someday! lol For this tutorial you need to already have a button, there are a couple ways you can actually design your own button using free programs like picknic  or gimp for mac users, which is what I was using until I got photoshop for my mac. Or you might even have photoshop. A standard button size without it being too small or overwhelmingly huge is 150x150. So if you don't have a button yet go and make one and then come back here to learn how to install it on your blog. 

   Under Design>Page Elements click Add a Gadget and choose HTML/Javascript 


paste the following code: 

<center><a href="http://YOUR WEB ADDRESS/" target="_blank" title="BLOG TITLE"><img alt="BLOG TITLE" src="http://IMAGE WEB ADDRESS"/></a> <center>
</center>
<center><textarea id="code-source" rows="3" cols="13" name="code-source"><center><a href="http://YOUR WEB ADDRESS/"><img border="0" src="http://IMAGE WEB ADDRESS"/></a></center></textarea></center>


You will need to replace the highlighted sections with your
blog/website address, blog name & image web address.
Here is what my code looks like with all of my info replaced:

<center><a href="http://cinsarah.blogspot.com/" target="_blank" title="Cinsarah"><img alt="Cinsarah" src="http://i1200.photobucket.com/albums/bb323/Cinsarah/cinsarahbutton-2.jpg"/></a> <center>
</center>
<center><textarea id="code-source" rows="3" cols="13" name="code-source"><center><a href="http://cinsarah.blogspot.com/"><img border="0" src="http://i1200.photobucket.com/albums/bb323/Cinsarah/cinsarahbutton-2.jpg"/></a></center></textarea></center>

NOTE:
Be careful not delete any of these " or the code won't work!
Make sure to change every section that needs to be changed. 
The bottom section will be your grab code.

You will need to upload your button to a photo hosting site such as Photobucket. If you don't have photobucket and don't want to sign up for an account just for a button there is a free site I like to use once in a while and it's tinypic. You can upload your button on tinypic....

and grab the "Direct Link for Layouts" code to paste
into your grab button code.




Once you have finished replacing what needs to be replaced from your code hit
Save and move the gadget wherever you would like your button to be
and voila you've got yourself a grab button on your blog...

Let me know if this worked for you or if you need any help!
I would be more than happy to help! :)



Posted by
Labels: ,

9 comments:

  1. Melanie @ bear rabbit bearSeptember 9, 2011 at 12:12 PM

    Thanks for an awesome tutorial. I’d love for you to link your great tips to Things I’ve Made Thursdays (going on now until noon tomorrow). I’m trying something new this week- We have two sections to the party- one for kids’ things and one for “Anything”!! I think this post would be an awesome addition to the “Anything Goes” party!

    Hope you’ll stop by and link up!
    Melanie
    http://bearrabbitbear.blogspot.com/2011/09/things-ive-done-thursday-new.html

    ReplyDelete
  2. LindsaySeptember 9, 2011 at 12:26 PM

    Sure adore my tech-savvy friend! You are so knowledgeable at all of this. Thanks for sharing!

    ReplyDelete
  3. Sunshine BlossomsSeptember 9, 2011 at 1:22 PM

    This is great! Thanks so much for posting it!

    ReplyDelete
  4. JanetSeptember 9, 2011 at 8:45 PM

    Cindy, I LOVE you! You fixed it so I could get the Psalm subway art printout. And now, on my 2nd day as a blogger, you're rescuing me from utter confusion. If you stop by you'll see I'm fumbling in the dark as I go along. I meant to have Scripture on it when it published, but my brain was so tired by the time I did what I did, I forgot. You, my sister, are an answer to this woman's prayer! craftythriftydecoratingwifemom.wordpress.com

    ReplyDelete
  5. Mary and DyerSeptember 11, 2011 at 7:37 PM

    Thank you sooooooo much for sharing this! I have been wondering how to do it & was sure that I would have to either search the internet for hours or pay someone. Thank you, thank you!! :)

    I just became your newest follower! I would love for you to check out our blog & follow us back if you'd like.

    Also, check out our giveaway for a Tiffany & Co. necklace!

    Blessings,

    Kat
    www.maryanddyer.blogspot.com

    ReplyDelete
  6. ::little projects in style::September 12, 2011 at 11:12 PM

    awesome tips!! im looking on the internet all the time for idea on to make the blog look and function better. this would be something i wanna look into..

    thanks again!

    xx, zhing

    ReplyDelete
  7. Weiya @ Enjoyer of GraceJanuary 29, 2012 at 2:48 PM

    Loved how your tutorials are so easy to follow... just used this one! Thanks so much again! :)

    ReplyDelete
  8. Autum nMay 18, 2013 at 11:25 AM

    This still did not work for me. *sigh*

    ReplyDelete
  9. AbsolutelyAlexJune 9, 2013 at 1:00 AM

    ^I know how you feel! I have been struggling with this for a long time! Thankyou so much for the tutorial it really helped me! For some strange reason, every time I try to put up a button with a code box underneath, everything works fine except the code does not appear in the little box! So frustrating! Anyways, thankyou again for this great, helpful tutorial!

    ReplyDelete

I would LOVE to hear from you! :)

Subscribe to: Post Comments (Atom)