Beatufy Your Blog: Part 1 Creating a Linked Button

 

 I recently set out to learn how and create my own linked buttons for my blog. And let me tell you, that was an adventure! {as some of you know from my Valentine Party button fiasco. argh!}And since I thought there might be a few of you in the same boat as me, I'd thought I'd share what I learned and how I did the above button. 

First off, I am not the most computer savvy chic. I dropped a basic photo editing class in college after the first class because I was so overwhelmed. So needless to say, all this html and photo editing business scares the socks off me. BUT I did it!! I conquered my fear of html and created a linked button.

*HUGE DISCLAIMER: this is how I did it. I know there are plenty of better, easier, and faster ways to do this. I'm just sharing what worked for me. I make no guarantees :) Also, note that this probably will not work with Wordpress blogs.*

1. First you need photo editing software. I used Picasa, from Google. It's free, it's easy. Enough said.
2. Select a photo or part of a photo that you would like for your background.
3. Crop your photo to the ratio you want your button to be (ex: square, rectangular). I made mine square just to be simple using the Square Cd Cover option. You don't need to crop the image to the exact pixels you want just yet. We'll do that in a second.
4. Add text to say what you'd. For ex: your blog name, event, etc. This image I will now call your "button".
5. Save and export button file.
6. Now you need to have a Photobucket account or something similar. (a Photobucket account is free)
7. Upload your button file to Photobucket.
8. This is when I resized my button, in Photobucket. Click on "edit", "preset sizes," and then I used "Small 160x120".
9. Now, look on the left side and you'll see "Direct Link to Image" Copy the link and put it into a Word document. You'll need this in a minute.
10. Next I went to Jenieshell's Design Challenge . She lists the code for a linked button (Jenieshell has several blog design tutorials and tips. She's awesome!)

Copy that and paste it into your Word document. Then plug your blog address in the first pink section and then in the second red section, you'll put the image address you got from Photobucket. *Be careful that you don't delete anything in the code other than the pink characters.* (I learned the hard way :) This is what my code looks like:

To create this button:








You've created a button. Yay! Now go plug that code into your sidebar, babe, and show it off loud and proud.



Sidebar Scroll Box
Ok, the next step is to create a scroll box to display the code so other bloggers can grab your buttons. This is the tricky part that had me stumped for hours the other day. I followed Jenieshell's awesome Scroll Box tutorial, but I could not get it to work for the life of me! I had to tweak the code to do to get it to work for me and look right. I have only been successful in getting the scroll box code to work on my sidebar.

First, you'll need the code for your button that you created above, copy it, and go to Java Script Kits. Then paste your button code into the box and click "Convert special chars to entities" (yeah, I have no clue what that means!!) This fixes your code so that your computer will show the code instead of the image. Then copy and paste your "new" button code into your Word document. You'll then paste it where the pink is in this code

 That's the basic scroll box code. I wanted my scroll box to be centered, so I added the center html command at the beginning and end. So this is what my scroll box code looks like with my "fixed" button code:

And there you have a Sidebar Scroll Box for your button's code. You can see mine on the right sidebar. *Note: This code will only work as a sidebar html gadget, it does not work inside a post.* I don't know why. Like I said, I'm not a techy.

Well, hopefully this leads you in the right direction in making your own button and scroll box. Good luck!!