Thursday, February 17, 2011

How to Create a 'Grab My Button' link for your blog ~ Easy!

I am always getting emails from fellow bloggers asking me how I made my 'Grab My Button' link.  Although I did not personally make these, they were part of the wonderful blog design package by Sheila at Blog Designs by Sheila...but I have done them in the past by myself. When someone asks me how to do it I have a difficult time explaining how to do it and usually end up just making them myself and giving them the html to post it on their blog.

But today I learned about a really great mom blogger named Billie at The Unexpected Mother blog, who has found a way to explain just 'How To' make the 'Grab It' button in really easy to understand steps. She gave me permission to share her instructions with my readers as well. So here it is...

~xxxxxxxxxxxxxxxxxxxxxxxx~

Hey Mommas!  Have you ever seen those cute little ‘grab it’ buttons on other blogs and wondered how to get one of them new-fangled contraptions for your own blog?  Well, I’m going to make it easy-peasey-lemon-squeazy for you. 

 Just follow these simple directions:

 1)  You need a grab it button.  You can create one in an image editing software like Photoshop or Paint Shop Pro.  A typical blog grab it button is 125×125.  On the other hand, if you don’t feel comfortable creating one yourself, there are tons of graphic designers out there that can create one for you for a small fee.

2)  Once you have got your blog button designed, you will need to upload the image to Photobucket, Flickr or if you have WordPress you can upload it to your media file there.  You will need to have the URL address for your photo, regardless of where you upload it. 

3)  Next step: the HTML coding.  Make sure you copy and paste the following coding into your HTML editor or into a text box for your side bar.  DO NOT USE the WYSIWYG(what you see is what you get) editor for blog posts, it will not work properly that way.

 <div align=”center”> <a href=”http://www.theunexpectedmother.net” target=”_blank”><img alt=”The Unexpected Mother” src=”http://theunexpectedmother.net/wp-content/uploads/2011/01/newbutton2.jpg“/></a> </div> <div align=”center”> <form><textarea rows=”6″ cols=”20″><center><a href=”http://www.theunexpectedmother.net” target=”_blank”><img alt=”The Unexpected Mother” src=”http://theunexpectedmother.net/wp-content/uploads/2011/01/newbutton2.jpg“/></a></center></textarea></form> </div>

Okay, so using the code I have given you above, all you will need to do is change the highlighted coding to reflect your blog information.  For example, where the coding says http://www.theunexpectedmother.net, you will need to change the URL address to your blog’s URL.  Where the coding says “The Unexpected Mother”, you will need to change that to the name of your blog.  Where the coding shows http://theunexpectedmother.net/wp-content/uploads/2011/01/newbutton2.jpg, you will need to place in the URL address for your blog button.

Note: Be sure to NOT CHANGE OR DELETE ANY OF THE OTHER CODING.  Make sure you leave any quotation marks, arrows, etc. If you accidentally delete something, your grab it box will not work properly.  If you do delete something, just copy and paste the coding from here again.  Better safe than sorry.
Now that you have replaced my information in the coding with your own, you’ve got your very own blog grab it button!  Just place the edited coding into your HTML editor for a blog post or into a text box to place it on your sidebar!

Voila! You are all done! You’ve got yourself a pretty new grab it button for your blog! Check out the finished product below!

The Unexpected Mother

Enjoy!

I hope this has been helpful to you!  Feel free to email me at Billie.Poteet@gmail.com if you have any questions.

 
Template: Blog Designs by Sheila