Monday, September 26, 2011

Installing a "Grab Button" block in your sidebar in Blogger

If you haven't read my "How to Install a Button in Your Sidebar" post click here

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="" width="150" /> <br/> <textarea style="text-align:left" rows="4" cols="16"><a href="" target="_blank"><img width="150" src="" /></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!!

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. Read that tutorial here

No comments:

Post a Comment

Your comments make my day!!

Sign up to be notified about upcoming classes!!

* indicates required