Wednesday, April 10, 2013

A picture of you part 2: how to create a button and why you should

I hope I have convinced you in part 1 of this series that a logo is an invaluable addition to your marketing repertoire.  In this post, I explain how to use that logo to create a button for your Blogger website.  For those unfamiliar with them, buttons are a way for your readers to "grab" your logo and copy it to their own sites.  When their readers click the image, they are redirected to your website.  It is a visual replacement of a www.blablabla.com link to your page.

I have to offer an enormous thank you to Cory Cuthbertson of Coryographies, as it was her step-by-step advice that permitted me to do this myself.  I now pass this information along to you, because I want your buttons on my sites.  Before we begin, allow me to share that I'm a moron when it comes to HTML.  If I can do this, so can you.  So here goes:

Creating a button on blogger is easy.  On the upper right hand corner of your blog is the "Design" link, which you enter to make any changes to your site.  Start by clicking there.  Now click "Layout" on the left hand side of the new screen, to be redirected to a page that has all of your various blog elements arranged.  Click "Add a Gadget."

A pop-up window will give you a list of gadgets to add.  Click the plus sign on "HTML/JavaScript" and a new window will open.  The title is where I currently have "Grab Murder Lab", but you can entitle your button any way you'd like.  Please don't freak out at this point: the next step is easier than it looks.  Copy this text exactly:


<center><a href="http://www.murderlab.com" alt="Murder Lab"><img
src="http://images2.snapfish.com/232323232%7Ffp54393%3Enu%3D3269%3E95%3A%3E395%3EWSNRCG%3D38%3A56994%3B332%3Anu0mrj" /></a>

<textarea cols="15" rows="4" wrap="virtual"><a href="http://www.murderlab.com"><img src="http://images2.snapfish.com/232323232%7Ffp54393%3Enu%3D3269%3E95%3A%3E395%3EWSNRCG%3D38%3A56994%3B332%3Anu0mrj" /></a></textarea></center>

Now paste this into the "Content" box of your "Configure HTML/JavaScript" window.  This is my HTML gibberish that works for my button.  All you need to do is replace a few bits of my HTML gibberish with your own.

First, in the two places above where I have "http://www.murderlab.com", replace the text between the quotation marks with your own website.  You must include the http://.  This will direct the button to your page.  You're half done.

Next, after the <img src= (again, two spots), replace this with a link to your own image (this can be a Photobucket site or any other site on the web where you have uploaded your logo.  I use Snapfish, and when I right click the image on Snapfish I have the option to "copy image URL" and paste it here.)

That's it!  Click "Save" and arrange your layout how you want it.  Then click "Save Arrangement" and you should have a brand new button for the stealing on your site.

How to steal other people's buttons?  Create a new HTML/JavaScript gadget, just as you did the first time.  Entitle it whatever you'd like (mine is called, "Kris is a fan.")  When you see a button on a website you'd like to copy, click into the text box below it and copy the HTML gibberish.  Then paste it into your new HTML text box.  You may copy and paste as many buttons as you'd like into a single HTML box.  Save, arrange, and voila!

No comments:

Post a Comment