My photo
Welcome to my own little corner of the Web! I love my family and do what I can to leave as little of a carbon footprint on this beautiful earth we call home. We have become a paperless kitchen family! We make a lot of our stuff homemade. I love coffee and web browsing on blogs/facebook/pinterest, healthy organic (GMO free) cooking, and lots of kisses from Chris, Aiden, Coren and Mason...I am complete. I thrive to make our lives better. I have began a new stage in my life for my children. I want to show health to my children and what better way thru our every day life. I am currently on a weight loss journey and I will be sharing my success and failures on here. I am here to motivate and keep me accountable to reclaim my health and get my life back! Enjoy the ride :)

Thursday, May 3, 2012

How to Add a "Grab my Button" Box to your Blog

How to Add a "Grab my Button" Box to your Blog

There are about one million tutorials out there on how to create a grab button for your blog. Some of them have extensive amounts of code, while others just plain don’t work no matter how hard you try. Here’s the short hand version:
Create your Image in a Design/Photo Editing Software (I use Adobe Photo Shop)

You can’t have someone grab a button, if you haven’t generated a button now can you? Most bloggers prefer a 125×125 or 150×150 image. If you’re creating the button for someone else, make sure you ask them what size they prefer before hand. Once you create your image, you’ll need to upload it to a Photo Sharing Account. A lot of people use Photobucket, but if you are on WordPress you can actually host the images on your own website, without worrying about the risk of the Photobucket server going down. (To host images on your own blog, simply upload it to your media file. Once uploaded, you will see the image code in your file. This is the code you will need for your button. Make sure to copy it!)
Generate the Code

You are going to write your own code here (or, you can cheat and copy mine if you don’t want to learn to do it). First, you’ll open up the widget section of your blog. WordPress is setup so that you can use html code in the text widget. There are no fancy shortcuts in the text widget, so you’ll have to add your own coding (again, or copy from somewhere else). But, if you want to shorthand it there is an HTML/Javascript Plugin that you can download in the Plugins Section. I used it when I first started my blog on WordPress, but now that I do my own coding, I use the text editor.

When you get your widget box pulled up, you’ll want to show readers the image that they will be grabbing. So the first bit of code you’ll want to insert is the source code for your button:

It is vital that you use this code as is. The colon’s must remain where they are or the image won’t work. I also like to add two breaking tags to separate the bottom of the button from the top of the grab box, but that’s just a matter of preference (you can do this by simply adding
to the end of the preceding code. This code just places the image into the sidebar, so now you want to make the grab box so that other people can grab that fabulous button

This snippet of code creates the code box so others can grab the button, and links the button back to your website homepage. From a bloggers perspective let me add that the code to automatically center the buttons people grab is a bit of a pain. When I was first learning code, it frustrated me to no end to snag a button and have it centered when everything else in my sidebar was aligned neatly. I don’t recommend adding the auto-center code to grab buttons for this reason. A lot of bloggers like to have things lined up and justified neatly. There is a code that they can add on their own if they want the image centered.

Now you’ve created a button and placed your code. The final code in your sidebar should look like this:

Questions? Comments? Feel free to leave them below!

No comments:

Post a Comment