Monday, September 26, 2011

How to code a sponsor button/grab badge

Figuring out the code to place a "grab my button" block was one of my first really hair-pulling moments in my journey of blogging. I read a bunch of tutorials and still had NO CLUE what I was doing!! Eventually I figured it out though, so I thought maybe you'd like it if I shared it here.

First go to your blogger dashboard. Click on the "layout" button and then "add a gadget" choose "html/java script" and then you'll want to paste this code into that box:

<img src="http://farm4.static.flickr.com/3011/5784915982_3a0f8e0faf_m.jpg" width="150" /> <br/> <textarea style="text-align:left" rows="4" cols="16"><a href="http://faith-simplicity.blogspot.com" target="_blank"><img width="150" src="http://farm4.static.flickr.com/3011/5784915982_3a0f8e0faf_m.jpg" /></a></textarea>

So what the heck does it mean?

img this means "image" and is the prompt for inserting an image
src this is the "source" url for your image
Then I like to follow up my image source with a width/height code
Make sure to use the <   /> brackets!! They are very important :)
Once you have that code - you've inserted your button image!!
<br/> this will insert a break between your button image and the grab text
textarea this is what creates the little scrolly-thingy text box
style= this is where you can tell the text box to align the text to the left, right or center.
rows= this is telling your browser how many rows of text you want to display
cols= I love this little bit of code since this is what manages how wide my text box will be and allows me to match the width of the text box to the width of my button if I so choose.
<a href etc... I explained all of that in my last blogger tutorial which you can find here.
</textarea> this is what closes your text box!

So there you go - how to code your grab badge. You're practically a blogging ninja now ;)

Making a blog badge is quite easy. You can even do it for free in Picnik! If you need to have a button made or want to have your button redesigned, here are a few designers I've found that can help you! Fleur Bloom
Amber's Articles
Casey Leigh
Life Made Lovely Designs
Do you offer blog button design? Leave a link to your blog in the comments!!

Now that you have an awesome blog button and you've put it up on your blog.  It's time to swap buttons!! Learn how to code your button swap area here. And link-up to swap blog sponsors here: Once you've linked-up be sure to visit some of these other bloggers to contact them about blog sponsor swapping. Want to swap ads with The Bartering Blogger? Let me know!

Next week's blogging tutorial will be for Word Press users. I have a free WP account so hopefully I'll be able to figure out how to do that. If you have a WP blog and you'd like to do next week's blog tip tutorial (or one for in the future) please send me an email! I'd be thrilled to have you.

Thank you so much for your support of Bartering Blogger!! There are so super-awesome things coming soon :) This week I'll be posting the first link-ups for swapping actual stuff like books and DVDs and stuff like that. Anything you'd like to see go up first?!