Thursday, October 18, 2012

Blogging Basics: Button Code

For me, one of the most challenging parts of blog design is all of the codes! I have taken one web class back in 2005 (?). They briefly touched on web design and coding. In this post I will talk about two things:

1. Button Code to send to others
2. Button Code for a "grab my button" box.

The first thing you will need to do is design your image. You can use Photoshop or Picmonkey or another photo site. In my experience, most buttons are usually sized 150x150. Some sites might ask for different sizes. Here's a picture of what this means on Picmonkey:

Once you have your image you will need to "host" it somewhere. Basically that means post it online. I have done two different things. I either:

1. Upload my button pic to my "about me" section and then right click for the image URL
2. Upload my button pic to Photobucket.

Once you have your image uploaded somewhere you can make the code.

This is by far the best site I have found as far as a code generator is concerned:

All you have to do is follow the instructions! 

1. Enter your website name
2. Enter your website address
3. Copy and paste your image URL (either right click on uploaded pic or copy and paste the direct link on Photobucket)
4. I usually click Textarea because I use blogger.
5. Click to preview your code.

(If you are generating a code to email to someone, you can stop here and copy and paste your code).

6. If you are making a "grab my button" box, then continue and click "get code". Scroll to the bottom of the page to get your full code.

To enter the code into your blog (for Blogger) go to your Layout, click "add a gadget", choose "add HTML".

Copy and paste the code, save it, move it where you want it...and...Ta-da! You have a "grab my button" box!

Hope this helps! Feel free to email me with any questions and I will try to answer them!


  1. OK, about to follow all these instructions. Hope I can do it. New to this blogging thing! :)

    Thanks for the help!

  2. Email me if you need help! :) Good Luck!

  3. Thanks for this post, Michelle! I am a computer newb when it comes to all the codes! Did you use a similar method to design your coordinating 'pinterest' 'twitter' 'facebook' etc buttons?

  4. I actually made a "fake" blog post with the icon images and then linked them to my sites. When I was done, I went to the HTML view and copy and pasted that code into my layout. Idk if that made any sense! Good idea for my next blogging post :)

  5. Buttons are seriously a big step into the blogging world. Once you've made a button, you're set :)

    I'm your newest follower! I love the layout and background of your blog :)


  6. Hey :) new follower here found you from She's nominations. Great useful information you have here!
    im now off to make some buttons :D! lol

  7. oh... meant to add.... LOVE your blog name :D my cats called Pixie! :)



Related Posts Plugin for WordPress, Blogger...