How To Make a Blog Badge with HTML Take-Along Box

So here is the skinny: 

 

I used to be a successful couture event stationery designer.  I ran a successful business catering to people with too much money and way too much entitlement.  I liked the money, but the people sucked.  And I worked like 60 hours a day.  And I just can't afford my kids ending up in the hospital every month due to a lack of supervision.  

 

So I quit.  I DID!  And it feels glorious!  Poor as dirt, but glorious!

 

During the time I was building and growing my business, I learned quite a bit about web design, HTML, and all the back-end stuff that goes along with getting a page on the internet to look pretty and be functional.  So now, I am left with a whole bunch of skills that I feel could better benefit those who don't suck. 

 

Don't roll your damn eyes!! 

 

So, this right here is a "How-To Create A Blog Button" tutorial so y'all can bling up your site with a cool little blog badge complete with take-along code box.  You know, so other crazies who love your crazy can graffiti their own blogs with your button.  Cool, huh?

 

This is what the finished product will look like:

<a href="http://www.3monkeysandamartini.com" target="_blank"><img src="http://i1339.photobucket.com/albums/o715/3monkeysandmom/MonkeyButton1.jpg">

 

Go ahead and grab my code and paste it all over your website.  OR... read on to see how to customize it for your little corner of the web.

 

FIRST:  You need a graphic. 
 

It can be a photo, a vector graphic, some of your kid's art that you scan into a JPEG, whatever.  And you need that graphic to be 125 x 125 or 150 x 150 pixels (you can actually make it whatever the hell size you want.  If you want it to be as big as your head, go ahead... but no one else will ever use it).  125 x 125 and 150 x 150 are standard sizes because most sidebars will accommodate them. 

 P.S.  A sidebar is where you typically put this crap.

 

You've got a graphic as big as your head and don't know how to cut it down to size, you say? No problemo.  Go to PHOTOBUCKET, a free online photo editing and storage facility where you can edit your photo.  If you've got a family portrait, I strongly encourage you to touch-up the faces of your children with a painted-on mustache for your Christmas cards while you're at it.

 

Photobucket will also create an html snippet for your new cut-to-size graphic.  Perfect! Because you need it.  So even if you have the perfect sized graphic, upload it to Photobucket.
**You will use the "Direct Link" code.

 

SECOND: Installing the Widget and Code
 

Take the following code and paste it into an html widget or gadget box on your blog:

 

{<div align="center"><a href="YOUR-URL" target="_blank"><img src="http://YOUR-IMAGE-URL"></a></div>

 

<div align="center"><form><textarea rows="3" cols="19" readonly="readonly"><a href="YOUR-URL" target="_blank"><img src="YOUR-IMAGE-URL"></textarea></form></div>}

 

***Change YOUR-URL to your full web address (e.g. http://www.3monkeysandamartini.com)

***Change YOUR-IMAGE-URL to the html  "Direct Link" snippet you got for your photo (it should be located in a box in the right had side of the screen of Photobucket).

*** Remove { and } from the beginning and end of the code.

 

Save your gadget/widget and check out your new bling. 

 

When people steal the code from the take-along box, all that will show on their website is the graphic portion of the button.

~If you find this helpful and want to share it with the world, go ahead and add the 3 Monkeys and a Martini button bling to your site.  You will be infinitely cooler for it ;) ~