HOW TO INSTALL A "GRAB MY BUTTON" ONTO YOUR BLOG
By: Karina Struven
Although it took me weeks to finally figure out the very easy application....I want to share it with you ~ to save you time!
Here we go:
How To Put A “Grab My Button” Link on Your Blog
I have seen these all over the place and have racked my brain for many days to figure this out! I finally have. You know where you see a picture of "grab my button" and then a little scrolly box underneath? Well, I wanted one too! Who doesn't? Now I will share with you how to put one on your website. It is actually very easy!
First, you can copy and paste the html language on your blog so that you can insert their button, linked to a blog site on your blog. I have seen this on many sites and they will even enter you in a contest where you can earn an extra entry to their contests if you place their button on your site. I got this great idea that I would add this to my blog since I had created the button for Momma-Preneur (Homemakers Haven). While I consider myself a pretty good web searcher, but I simply could not find instructions for this. The problem? I simply didn’t know what these were called so I had no idea what to search for. I finally stumbled upon instructions though, and it’s now here!
Yep - look over at the right side of my blog, and you’ll see my handy dandy “Grab My Button” thingy! (Or as Google refers to it as a "chicklet").
I wanted to make it easy for you and share what I have learned in this long process, in case you are wanting to add a 'grab my button' to your site also.
How to Add “Grab My Button” To Your Sidebar (or even a web post)
NOTE: **These instructions include the HTML language for this task. In WordPress, you could type this into a post in the HTML view or add to your sidebar by adding a textbox and including the entire code. If you use something other than WordPress, I’m not sure where’d you would place this code, but you should still be able to use the code whereever you can post html code and have it shown on your site**
In Blogger you simple follow these instructions set forth below:
Step 1: Choose a picture that you would like to create for your 'grab my button' chicklet. This will assist people in knowing what they are grabbing. Save it to your hard drive for uploading purposes. I also added my text to it "Momma-Preneur Homemakers Haven," by using Picasa3. Free download here: http://picasa.google.com/ When you have it just the way you want it you are ready for:
Step 2: After you have the image you want, simply upload it to either to your blog images file or an outside source such as: www.photobucket.com. You’ll need to know the exact location of your image. You probably know this code, but just in case, the HTML for inserting the button linked back to your site:
CREATING YOUR BUTTON:
<div align=”center”>
<a href=”http://www.YOURWEBSITE.com” target=”_blank”><img src=”http://www.THELOCATIONOFYOURBUTTON.jpg”></a>
</div>:
For an example, this is what mine looks like:
Step 3: Adding a Text Box with the Code for your Button. This must be a text box/area. The code looks almost identical to the code you used above except you have to surround it with the text box/area html..
The code looks almost identical to the code you used above except you have to surround it with the text box/area html <form><textarea>. A complete example:
<div align=”center”>
<form><textarea rows=”6″ cols=”19″ readonly=”readonly”><a href=”http://www.YOURWEBSITE.com” target=”_blank”><img src=”www.THELOCATIONOFYOURBUTTON.jpg”></a></textarea></form>
</div>
The command rows and cols defines how large the box will be. You can change these numbers as you see fit to adjust the size of your text box. The first number (rows) defines how tall the box will be, and the second number (cols) defines how wide the textbox is. The next part (readonly) is optional. You could delete the entire command and it would still function; however, I chose to include it as it prevents someone from accidentally hitting a button and changing the code during the copy/paste process. The <ahref….> is what actually appears in the text box. Here is my actual instructions:
<div align=”center”>
<form><textarea rows=”6″ cols=”19″ readonly=”readonly”><a href=”http://karinastruven.blogspot.com” target=”_blank”><img src=http://i712.photobucket.com/albums/ww128/thegardenofgrace/grabbutton2.jpg”></a></textarea></form>
</div>
When you put all of this together, this is how it looks,
It is that simple!
Many Blessings,
Karina's Garden of Grace