Making blog buttons

I wanted to share my new blog buttons with you! To add them to your site, copy the code in the text box below each image and paste it into a widget (if you use wordpress) or gadget (if you use blogger) on your side bar.

For those of you interested in making your own blog buttons, I’ve also included the resources I used to make them.

Here they are!

215×75 pixels

HPS octopus button




215×122 pixels

HPS bee button






The internet is chock full of quality tutorials for coding almost anything! I followed these tutorials to create the code for my buttons:

1. I used images from the Graphics Fairy . It is a website of vintage clip art image and DIY projects. It is a great resource for vintage stock images, and everything on it is free (under the terms of use). I used Adobe Photoshop to create the buttons using the images from the Graphics Fairy and the text tool. Make sure your images fit the width of your side bar (215×75 pixels is a good place to start). I made two different images so people could choose which size they want.

2. I followed this tutorial to make the code for the button (its from Teacher Blogging Basics). It walks you through creating a widget and customizing the code so the button can show up in your side bar. Clear instructions, very easy to follow. This is good if you only want to add a button. If you want to add code below the button so people can copy it, read on to step 3.

3. I used this tutorial to make the code for the text box below each button (seen in the side bar).  It is a “Grab a Button” generator. It will generate code for the button and text box below. Paste the code into a widget on your side bar to see it show up on your blog.

I learned SO much about coding and HTML code from this project. I knew next to nothing about it before, and I understand a great deal about it now. This is definitely a project that a beginner can handle. Good luck! Let me know if you want to swap buttons.



Leave a comment

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: