DIY: Blog Button with Grab Box

Last night I decided to create a few blog buttons with grab boxes and so I thought it would be terrible of me not to post a tutorial on how to make these!  If you've never made one before, I know that it can be quite intimidating.  It's actually pretty simple though and I hope that that shows in my tutorial!

  1. Select a photo that you'd like to use and edit it.  I edit all of my photos on PicMonkey and I definitely recommend it for anyone who's looking for a spectacular FREE photo editing website.  It's super easy and you don't even have to have an account!  So the first thing you need to decide on is the size of your button.  You may have to do a bit of fiddling around to get the size you're looking for, but the most common size is probably 125x125.  I decided to make my button width 240, because it looks nice on my sidebar.  240 is ginormous for a blog button, but I'll be creating more buttons in various sizes to add to my button page (which is accessible via my nav bar).  I'll share with you my PicMonkey editing process to give you an idea of what you can do.  Once your photo is uploaded onto PicMonkey go ahead and re-size the photo to the width of your choice.  The next thing I like to do is go into the effects menu (click on the little chemistry vial image on the far left of the screen) and add whichever effects I like (there are so many to choose from!).  After that I go down to the text menu and add text to my image.   Once I've done those three things I go ahead and save the image to my computer. 
  2. Upload your photo to a host website. I use Photobucket and highly recommend it-it makes things soooo easy!  Once you're photo is uploaded to Photobucket (or your image host of choice), copy the image code.  Write it down or paste it into a word document so that you have it close by-you're going to need it, but not yet. 
  3. Create the html code.  Don't worry you don't have to be an html whiz to be able to do this step.  It might be a bit tricky, but I'll make it very easy.  The code you'll need is at the bottom of this post.  Replace the words: YOUR IMAGE CODE with the image code you got from step 2.  Replace the words: YOUR WEB ADDRESS with your website address :)  There's the code!  That wasn't too difficult eh? 
  4. Add the code to your blog.  I use blogger, so I'm not sure how different this part is for readers who are using Typepad or Wordpress but I'm sure it's quite similar.  You're going to want to go into the dashboard and click on Layout.  Choose "Add Gadget" on whichever column you're wanting your button. You'll want to choose HTML/JavaScript.  Copy and paste your completed code into the content box and save.  That's it!  You've done it!  Enjoy you're new blog button!
I really hope that this is helpful and if you have any problems or questions please feel free to contact me

Here is the basic code that you need to plug your image code and web address into:

<center><a href="YOUR WEB ADDRESS"><img src="YOUR IMAGE CODE" /></a><textarea><a href="YOUR WEB ADDRESS"><img src="YOUR IMAGE CODE" /></a></textarea></center>

8 comments:

  1. Sounds easy, but html scares the pants off me! Love the look of your blog!

    Etsy Blog Team

    ReplyDelete
  2. I'll definitely mark this - I made one a while back, and of course can't remember how I did it! But I'm ready to update my picture, so I'm glad I ran into your instructions!

    ReplyDelete
    Replies
    1. I had done it once before as well and totally forgot how to do it! Good luck with yours!

      Delete
  3. Hey Mindi,

    This is a great post!!! I've bookmarked it, as I'm hoping to make some badges for my blog in the next few weeks, so this will be a great help.

    Look forward to more helpful tips in the future.

    Love Claire
    http://www.fashionrhetoric.com

    ReplyDelete
    Replies
    1. Thanks Claire! I'm happy to be able to help fellow bloggers and I plan on posting more blog tips in the future!
      Heading over to your blog now!
      Have a great weekend-Mindi

      Delete
    2. Just used your step by step instructions and made a badge for my blog- it looks great!! So easy to follow and simple to execute. Thanks again Mindi!!

      Love Claire :o) xx

      Delete
    3. Thank you Claire! I'm happy it worked out for you and it does looks great!

      Delete
  4. Thanks this page helped soooooo much!

    Luv Domo xx

    http://threeshadesoffashion.blogspot.com/

    ReplyDelete