How to Make a Blog Button and Grab Box

I love website designing in my “spare time”.  And as you can see from this blog, I was having fun yesterday.  Since this is something that is as fun as playing in my garden, I’d like to share it with you.

So if you’re not a blogger or have no use for this, it will be very boring and you are welcome to stop reading right now.  I’d sure hate to bore you to tears! 

But if you want to know how to make your own button for your blog or website, along with a grab box – read on.  We will be covering other topics such as making your own favicon, linking photos to a direct url, making your own social media buttons, inserting your own signature, etc.

Picnik.com is where I have been going to make my own buttons.  However, they are closing on April 19, so here are a few options I have found to replace them.  Picmonkey.com is an excellent substitute and I’ve heard is even being designed by the ones who designed Picnik.  However, if you want the collage option, they don’t have it available quite yet, but it’s coming.  Fotoflexer.com and Photobucket is another option. 

For this post, I will edit my button in Picmonkey and upload it to Photobucket.

In Picmonkey, you will want to resize your button to anywhere from 125×125 to 170×170.  You can go bigger, but usually these are the general sizes.

To make a small banner at the bottom of my picture, I choose Overlays (on left hand side), then Geometrics, and click on the rectangle button.  Drag and size like I want it.  Then choose the color from the palette and fade it to where it’s a see-through banner.

Then click on the Text button and write in your blog name on top of the banner.  Click on Save in the very bottom left hand corner and save to your computer.  There are so many things you can do with a button and this is the very basic just to show you.  Play around with your editing program and use stickers, borders, layers, etc.  It’s fun!

Now you will need to upload your photo to Photobucket.  Also go to your blog layout.  In Blogger, you will choose an html gadget and in WordPress you will choose a text widget.

Into this gadget you will need to post this code.  It is the holy grail of buttons and grab box codes!  

160px; height: 100px; overflow: auto; border: 1px solid #666666;”><a href="Yourblogurl" target="_blank"><img src="Yourpictureurl(directlinkinPhotobucket)" alt="Yourblogtitle" width="160" height="172" /></a>