How To Make a Button For Your Blog in 4 Simple Steps

Design a button for your blog using your favorite design program.  (Powerpoint, Photoshop,  ) It will need to be either 150x150 or 200x150 pixels (I prefer the bigger).  Today I am going to show you my new favorite way... Canva.com   It is FREE and easy to use.  Here is a 3 minute video of how to use Canva if you are interested.

Once you have made your button and saved it as a PNG or JPEG you are ready to move on to step 2.

You will now upload your picture onto a picture host site of your choice.  Personally, I use Photobucket.com.  

You will upload your picture so that you are able to use a direct link code.  (You will need this for the next step.)

You will not replace all of the highlighted text with your own links.  Copy and paste this code into a Word or Pages document while you play with it and then I will tell you where to place it in the next step.

Copy the example below

<div align="center" style="padding: 5px;"><img src="http://DIRECTLINKFORPHOTO"  title="YOUR BLOG NAME" alt="YOUR BLOG NAME" /></div><pre style="background: none; border: none; padding: 0;"><textarea style="background:#f0f0f0;border: solid 1px #cccccc; color: #777777; font-size:100%; height: 50px; margin:auto; text-align: left; padding: 7px 0 2px 5px; display: block;  width: 90%;">&lt;div align="center">&lt;a href="http://YOURSITE.com" title="YOUR BLOG NAME"&gt;&lt;img src="http://DIRECTLINKFORPHOTO" alt="YOUR BLOG NAME" style="border:none;" /&gt;&lt;/a&gt;&lt;/div></textarea></pre>

You will fill in your sites web address, the name of your website, and the direct link to your photo.   If all else fails and you find yourself stuck at this point you can just head over to The Code Generator and use their tool to create your HTML Code.  

My filled in version for my button looks like this...

<div align="center" style="padding: 5px;"><img src="http://i594.photobucket.com/albums/tt28/mackenziesheahan/Untitleddesign4copy.png"  title="Teaching Upstairs" alt="Teaching Upstairs" /></div><pre style="background: none; border: none; padding: 0;"><textarea style="background:#f0f0f0;border: solid 1px #cccccc; color: #777777; font-size:100%; height: 50px; margin:auto; text-align: left; padding: 7px 0 2px 5px; display: block;  width: 90%;">&lt;div align="center">&lt;a href="http://www.teachingupstairs.com" title="Teaching Upstairs"&gt;&lt;img src="http://i594.photobucket.com/albums/tt28/mackenziesheahan/Untitleddesign4copy.png" alt="Teaching Upstairs" style="border:none;" /&gt;&lt;/a&gt;&lt;/div></textarea></pre>

Now you will insert the HTML Coding that you created into your Blogger Template.












To do this head to your Blogger Dashboard and click on the Layout Tab.  See the green arrow below.

Choose to add a Gadget. See green arrow below.

Chose to add HTML/Java Script

Add the HTML Code that you created.  You can title it whatever you want, most use "Grab My Button" .

The product that is produced from the code should be similar to the one below.  Sit back and enjoy your work!

Let me know if this tutorial worked for you and link up your store so we can see!