Thursday, November 17, 2011

Holy Cow- I made a grabbable blog button!

Ask anyone, I am the most technology challenged human alive.  Seriously, my students usually have to update my computer and work my dvd/vcr combo. A few weeks ago when the hubs saw me blogging he was AMAZED that I could do it. Like he kept repeating "Wow, I'm so impressed!" over and over.

Some would say that's insulting, I'm kinda taking it as a complement.

Anywho- a few people have asked why I didn't have a blog button, and when I said I had no idea how to make one they did give me some names of people who would make them for me for a small fee. I think the prices ranged from $8-20....which really isn't bad, unless your cheap like me. When I told the hubs he told me that I could pay to have one made, because he didn't think I could do it on my own. Oh he of little faith!

So off to the blogosphere I went. I actually googled 'How to make a grabbable blog button' and got a few different sites. The first one was super easy to follow, but it didn't work in the end. 
I started by making the picture for the button.
First, I uploaded a picture to picnik (LOVE that site!!).  Then I cropped it into a perfect square (click on crop on the left hand side, then in the drop down menu that says "no constraints" choose square) and applied the settings. Then I had to resize it to 125x125 by clicking on the resize option and putting in 125 and applying that.
Your image should get pretty small, then you can zoom in by adjusting the zoom on the bottom right of the screen. It may look a little pixelated, but that's okay.
Now youre done with the basic edits, and you can proceed to add text by clicking on the text tab. Play around and have some fun, you can do whatever you would like! Then when you're done click on the Save and Share tab and save it to your computer.

Then you need to upload it to a photo sharing site, I used photobucket. Alot of people recommended picasa, but I couldn't find the URL for the photo on there, and on photobucket its super easy to find. Just hover over the image and click on the direct link and it will automatically copy to your clip board.

Now you can make two kinds of buttons, the first is just a blog button that will link to your site. The second is a grabbable button that others can copy and paste onto their blogs.

The first code is pretty easy:

<a border="0" href="yourblogURL" target="_blank"><img src="yourimagedirectlinkURL"/></a>

So you copy and paste this into the HTML section on your blog and change the items in red to fit your specific blog. You have to keep the quotation marks and when you're done it should look like this:

<a border="0" href="http://inthiscrazylife-bethany.blogspot.com/" target="_blank"><img src="http://i851.photobucket.com/albums/ab79/lperkaos/BlogButton1.jpg"/></a>

Now this wont put in the option for others to grab, but it will make it appear on your blog or in a post and will link back to your blog.
If you want a grabbable blog button that code is a bit more complex. I found the one that worked for me over at The Pink Lemon Tree.
<div align="”center”">
<a href="YOURBLOGADDRESS" target="”_blank”"><img src="YOURIMAGEADDRESS"/></a>
</div>
<div align="”center”">
<form><textarea rows="”6″" cols="”19″" readonly="”readonly”"><a href="YOURBLOGADDRESS" target="”_blank”"><img src="YOURIMAGEADDRESS"/></a></textarea></form>
</div>

Here's what mine looks like:

<div align="”center”">
<a href="http://inthiscrazylife-bethany.blogspot.com/" target="”_blank”"><img src="http://i851.photobucket.com/albums/ab79/lperkaos/BlogButton1.jpg"/></a>
</div>
<div align="”center”">
<form><textarea rows="”6″" cols="”19″" readonly="”readonly”"><a href="http://inthiscrazylife-bethany.blogspot.com/" target="”_blank”"><img src="http://i851.photobucket.com/albums/ab79/lperkaos/BlogButton1.jpg"/></a></textarea></form>
</div>


Then just save the code and it should appear in your blog, allowing everyone to grab it.
 Easy peasy lemon squeaszy!
PS- hubs, if you're reading this I really did do this all by myself...check the bank account, I didn't pay a cent for it. HA!

15 comments:

  1. LOL you're hubby sounds like mine. I was clueless at first too. I used The Cutest Blog On The Block to help me with all my blog design and stuff. Otherwise, I wouldn't know what I was doing. But the button looks great! Good job

    ReplyDelete
  2. thanks for stopping by Couponing & Reviewing in Texas..we are now following you via GFC

    ReplyDelete
  3. Here from the Feed Me Friday Blog Hop!

    Funny that this is your topic for today - I just realized the code in mine was broken this morning and had to google it to fix it :)

    Brooke
    http://cupcakecucumber.blogspot.com

    ReplyDelete
  4. I still have no idea how to do this and I have had many a blog! I of course just go ask my husband! You did a great job, it's so cute!

    Following from the Trendy Treehouse blog hop!

    Alicia
    http://blog.polkadotelephant.com

    ReplyDelete
  5. Thanks for the info. I had to ask friends every time to make mine. I just need to DO it!

    ReplyDelete
  6. Oh congrat's I wouldn't have the slighest idea, hence why I had to pay someone. Visiting from the FMF blog hop.

    ReplyDelete
  7. Awesome! I've been trying to figure out how to make a FREE button too!! Thanks :)

    ReplyDelete
  8. Wow - I'm going to have to give this a try - thanks!

    ReplyDelete
  9. Bethany, I just followed your instructions and (with the hubs help), I made buttons for my blog! I'm so happy to have this done. I've been meaning to do it for some time now. I gave you a shout out there. Thanks so much for posting these instructions!!

    ReplyDelete
  10. This was the easiest thing ever! You did such a wonderful job, I am the worst at this stuff and it was a breeze to make one. Thank you so much.

    Found you through Think Pink Sundays at Flamingo Toes and a new follower. :-)

    ReplyDelete
  11. still sounds very complicated, but I will have to give it a try!

    ReplyDelete
  12. Thanks so much for this tutorial! I have been thinking about adding a button to my blog.

    Christine @ Projects Around the House

    ReplyDelete
  13. Oh my! I'm gonna have to give this a try! Thanks for the inspiration!

    ReplyDelete
  14. Good job i love the button. Thank you for sharing and for linking up to last weeks show and share party. Please come back this week and share your latest project with us.

    A mommy's life...with a touch of yellow
    wjwiki07@hotmail.com

    ReplyDelete
  15. Thanks for the info. I just started my blog and have been looking on how to create a button. Thanks so much. I am visiting from It's So Very Cheri. Glad I found you!

    ReplyDelete

Hello! Thanks for taking the time to stop by! I LOVE your comments, so please keep them coming! I promise I do read each and every one :)