Making a Bloggy Grab Button {Tutorial}

I've received lots and lots of bloggy questions in my live laugh rowe Inbox lately -- so slowly, but surely,  I'm going to try to answer some of them.  For this post, I'm going to assume (shame on me, I know) that you have a button or will be making a button in the very near future.  Side Note: I would {love} to do a tutorial on making a button, but I'm not sure how many of you have Adobe Photoshop.  That is what I use and {love}.  I know there are a lot of different resources and sites that can be used, so that post is still iffy {smile}.  Feedback is welcome.

Anywho, are you ready to make a "Grab A Button"
scroll box for all of your bloggy friends to grab??  

Alrighty, let's do this! {yay}

STEP 1: FIND A PLACE TO STORE YOU BUTTON
You can store it on your own server, or upload it to one of the many of the photo hosting sites like Flickr or Photobucket. I use Photobucket because once you upload the file, you can hover your mouse over the picture and it generates the HTML link code for you (code you will need). Then with one mouse click you can copy this code. And who doesn't like that {woot}? A point to note here is if you don't use a lot of pictures, you may not need to pay for membership. The down side is there is a limited amount of space on their free accounts, so keep that in mind.  

STEP 2: EDIT THE HTML LINK CODE
So, go ahead and upload your photo, hover over the picture, and left-mouse click on HTML Code. You will see Copied flash in the box to the right.

This is the code I've copied from photobucket for my button:
<a href="http://s1184.photobucket.com/albums/z329/Kelly_Kuert-Rowe/?action=view&amp;current=kelly_avatar_200x100rounded.png" target="_blank"><img src="http://i1184.photobucket.com/albums/z329/Kelly_Kuert-Rowe/kelly_avatar_200x100rounded.png" border="0" alt="Photobucket"></a>

This code is made up of two major tags. The first tag is the <a href=http...> ending with </a>. Enclosed in that tag is the second tag named <img src="http...>.

We'll explain the second tag first. This tag is the image source tag - make sense, right? The link "http://i1184.photobucket.com/albums/z329/Kelly_Kuert-Rowe/kelly_avatar_200x100rounded.png" is where the browser goes to get the image that displays on the page. Any errors in this code will break the link to the button and it will not show on the page.

The first tag is where the browser will go when you click on the button. In the copied link from Photobucket, the highlighted link will send the browser to the source of the image, and you do not want that to happen. So you will need to replace that link with your web address.

So your code will go from this:
<a href="http://s1184.photobucket.com/albums/z329/Kelly_Kuert-Rowe/?action=view&amp;current=kelly_avatar_200x100rounded.png" target="_blank"><img src="http://i1184.photobucket.com/albums/z329/Kelly_Kuert-Rowe/kelly_avatar_200x100rounded.png" border="0" alt="Photobucket"></a>

to this (the center tag added afterwards):
<center><a href="http://www.livelaughrowe.com/" target="_blank"><img src="http://i1184.photobucket.com/albums/z329/Kelly_Kuert-Rowe/kelly_avatar_200x100rounded.png" border="0" alt="Photobucket"></a></center>

A curious note: if you are wondering what target="_blank" does, it opens the link in a new browser window. Remove it if you do not what this to happen.

STEP 3: CONVERT THE HTML LINK CODE
This explanation of this step is somewhat technican. Basically, your browser interprets all tags as formating instructions. So if you browser sees <b>bold</b> it will display bold. But what if you are doing a tutorial on coding and you want to show the tag code? Well, you will need to tell the browser not to interpret the tag but display it as is. To do this we have to convert the tag characters. So <b>bold</b> becomes &lt;b&gt;bold&lt;/b&gt; Of course! Simple!

Well, lt is "less than," or the less than sign and gt is "greater than," or the greater than sign. We enclose the lt and gt text within & and ; to make the browser display < > and not interpret it as a formatting code. Now, you could go through your code and do all this by hand, or...take this code and visit {here}.  You'll see this box:

Go ahead and paste your html code into that box and click on the Convert special chars to entities button. Your code will convert to the necessary code that can be used within your scroll box, as you can see here:

Go ahead and copy that code, as you'll be needing this to place within the html for the scroll box.

STEP 4: CREATE THE SCROLL BOX
All you'll need for this is the following code to create a 125x125 scroll box:
<div style="border: 1px solid black; overflow: auto; height: 125px; width: 125px; color: black; background-color: white;">YOUR TEXT HERE</div>

See the text in all CAPS and bolded that says YOUR TEXT HERE?  That is where you're going to paste the converted text you copied earlier.  I've added and bolded mine below.

<div style="border: 1px solid black; overflow: auto; height: 125px; width: 125px; color: black; background-color: white;">&lt;center&gt;&lt;a href=&quot;http://www.livelaughrowe.com/&quot;&gt;&lt;img src=&quot;http://i1184.photobucket.com/albums/z329/Kelly_Kuert-Rowe/kelly_avatar_200x100rounded.png&quot; /&gt;&lt;/a&gt;</div>

If you were to take this new code and paste into your html widget box or the html tab of your post, this scroll box is what you should see once it's published or in preview mode. YAY! Isn't this exciting?

Let me also mention that you can modify this box.You can change the border color from black to another color, or the size of your box by changing the number of the height and width (the px numbers), the color of your html code, and the thickness of your border. Just tinker around and you'll see there are quite a few options.  I tried to coordinate the items I'm referring to with the items in the code below, does that help at all?

<div style="border: 1px solid black; overflow: auto; height: 125px; width: 125px; color: black; background-color: white;">&lt;center&gt;&lt;a href=&quot;http://www.livelaughrowe.com/&quot;&gt;&lt;img src=&quot;http://i1184.photobucket.com/albums/z329/Kelly_Kuert-Rowe/kelly_avatar_200x100rounded.png&quot; /&gt;&lt;/a&gt;</div>

Here's an example where I've changed some things out in the code:

<div style="border: 3px solid pink; overflow: auto; height: 200px; width: 125px; color: lightblue; background-color: white;">&lt;center&gt;&lt;a href=&quot;http://www.livelaughrowe.com/&quot;&gt;&lt;img src=&quot;http://i1184.photobucket.com/albums/z329/Kelly_Kuert-Rowe/kelly_avatar_200x100rounded.png&quot; /&gt;&lt;/a&gt;</div>

This is what the box would then look like:

 

STEP 5: ADD YOUR BUTTON
Okay, now that we have the box, we probably want our readers to know what the button is going to look like that they're grabbing, right?  I mean, duh! {giggle}  Remember the original code above, the code that we converted to use within our scroll box?  Well, that's the buttons original code, and we need to place that above the scroll box code.  Please note that I inserted the break <br> between the two codes so that there would be a slight space between them -- because I'm so very anal.

<center><a href="http://www.livelaughrowe.com/"><img src="http://i1184.photobucket.com/albums/z329/Kelly_Kuert-Rowe/kelly_avatar_200x100rounded.png" /></a>
<br>
<div style="border: 1px solid black; overflow: auto; height: 125px; width: 125px; color: black; background-color: white;">&lt;center&gt;&lt;a href=&quot;http://www.livelaughrowe.com/&quot;&gt;&lt;img src=&quot;http://i1184.photobucket.com/albums/z329/Kelly_Kuert-Rowe/kelly_avatar_200x100rounded.png&quot; /&gt;&lt;/a&gt;</div>

That's it!  The code above equals this button and scroll box:

I'll be partying {here}!

Subscribe to Updates | Like on Facebook | Follow on Pinterest

Pin It