How To Install A Blog Button

Yesterday, I explained how I made my own blog button in Pixlr.  I really love Pixlr because it's free and it can do a ton of things.  I used it to create my button and header.  I've been playing around with it a lot and starting to become more comfortable with the program.  It's a lot of fun (and sometimes a great source of frustration, if I'm being completely honest).  But since we're losing Picnik (which was so user-friendly), learning a new program is essential.  I'll share more of my Pixlr creations soon.  I'll even show you how I made my header (and how I centered it, and eliminated the padding, etc).  But, today I'm going to show you how to install a blog button in blogger.  I'll give you step-by-step instructions for putting it in your sidebar, so others can take it!

To start, you need to find a host for your new button.  I use Photobucket.  It's easy to use and has worked well for me.  Just open an account -

Next, upload your picture - 

Once it's uploaded, click "view album" to see your picture.  If you hover over the picture, a drop down menu will appear.  You will need to find the HTML Code in a minute so make sure you can find it.

Now, head back to your blog (you may want to open a new tab).  In the upper right hand corner, choose "Design".  Look in your sidebar, and choose "Add a Gadget" - 

In the pop-up box, choose "HTML/Javascript" - 

If you want to add a title, you can (I added "Grab My Button!") but it isn't necessary.  In the larger box, you need to add the following - 

<center>

<a href="http://mycoveredbridge.blogspot.com"target="_blank" title="My Covered Bridge"><img alt="My Covered Bridge" src="http://i1180.photobucket.com/albums/x414/kristenW4/mycoveredbridgebutton.jpg"/></a><center>

</center>

<center><textarea id="code-source" rows="3" name="code-source"><center><a href="http://mycoveredbridge.blogspot.com"><img border="0" src="http://i1180.photobucket.com/albums/x414/kristenW4/mycoveredbridgebutton.jpg " /></a></center></textarea></center>

</center>

BUT you need to make the following changes - 

1. There are 2 lines in red.  This is your blog address.  Insert YOUR URL in place of mine - in both places.

2. There are 2 lines in green.  This is where your picture is located.  If you head back to Photobucket, and hover over the picture that you want to use, the drop down box will have an option titled "HTML Code".  Just click on it to copy.

Now replace the 2 green lines with YOUR HTML code.

3. There are 2 lines in blue.  Just replace them with your blog name.

Now click "Save" and "View Blog".  Your new button and grab box should be nicely centered on your sidebar.  If it isn't, just go back and check the code - it may just be missing a quotation mark or other character.  Unfortunately, HTML code needs to be very accurate.  Hopefully, it works for you.  And remember, I'm not an expert and I did it.  You can do it too!

I've shared this post here - 

My Romantic Home

30 Handmade Days