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 160×120”.
  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!!

Share and Enjoy

  • Facebook
  • Email
  • Twitter
  • Pinterest
  • StumbleUpon
  • Google Plus
Linda
Hi! I'm Linda, the craft addict behind Craftaholics Anonymous®, a craft blog. Crafting is cheaper than therapy, right? When not crafting, I can be found chasing my 2 small {but very energetic!} boys or playing with my new baby girl. Or shoe shopping... because you can never have too many shoes! Happy crafting! ♥
Linda

Join the Conversation

Your email address will not be published. Required fields are marked *

Comments

  1. 1
    slommler

    Applause!!!!! Congrats!!!!!! WTG!!!! That is super and easy to follow directions too! Well, they seem pretty easy. I am going to give this a whirl! Thanks
    Hugs
    SueAnn

  2. 2
    Christine

    Great tutorial! Thanks!!

  3. 3
    Nancy

    Wow, thanks!!! I appreciate the help!

    Nancy

  4. 4
    Heather@ theherberfamily.blogspot.com

    One thing I would like to stress- make sure you add the http:// to the link you insert. I had one blog buddy for get that part, and clicking it just sent you to an invalid page on my own blog, with her address following mine.

    Another person left something off the end, can't recall what, and it also didn't work.

    Make sure your link works before adding it to your site!!

  5. 5
    Michelle

    Thanks for the tip! Your button looks great!!

  6. 6
    Froggylady

    Thank you so much for sharing!

  7. 7
    Christine

    Great tutorial! I'm going to give it a try and Jenieshell's Design Challenge!!

  8. 8
    Frugal Home Design

    Great tips. Thanks.

  9. 10
    Kim @ seven thirty three

    When you tried to put the code into your post did you go into html mode or were you in compose mode? You must be in html mode to add html.

  10. 11
    Sarah

    Wow… I have been trying for a month to get a blog button to work. Thank you sooo much for posting this tip. I'm off to try it out!

    Blessings!
    -Sarah

  11. 12
    Anonymous

    nice post. thanks.

  12. 13
    Anonymous

    interesting article. I would love to follow you on twitter.

  13. 15
    Anonymous

    Helol all, thanx a lot for this article .. This was exactly what I was looikng for.

  14. 16
    Robin

    I can not tell you how many times I have come back to these blogging tips posts! They are awesome and got me from thinking about starting a blog to actually going ahead and blogging. thanks again you are awesome!

  15. 17
    Beth

    I just used this awesome tutorial to make a button for my blog. Thank you so much!

  16. 18
    Danielle Bartran

    THANK YOU! I was able to use your tutorial to create a new button AND sidebar scroll box…PLUS a new header for my blog.

    I think it looks great. What do you think? http://www.daniellebartran.blogspot.com

  17. 19
    Danny . April

    This was so helpful!!! Thank you!!!
    My button somehow got messed up and I had to redo it and this helped me out a ton! And I was able to do that scroll box thing that I was so jealous of! Thank you Thank you!!!

  18. 20
    Tim, Allyson, and kids

    We have a button text box tutorial on our blog that over 200 people have used.

    If you're still having problems with that you should check it out.

  19. 21
    ReadyOrNot

    OMG, that was so hard, but I did it! Woo hoo! Thanks!

  20. 22
    Alyssa

    Thank you so much! This was the only tutorial I have gotten to work… only one problem. :D the scrolly thing, isn't scrolly! Please, someone come see my blog and tell me what is wrong with it! It's on the top left. :D Thanks!

  21. 23
    Jen Thaler

    Thank you so much! I figured out how to make buttons for my work blog, but have not been able to figure out how to make a scroll box for it and this REALLY helps! Now I just have to get my logo finished so I can use them on my buttons.

  22. 24

    Thank you so much for this post!! This has been the easiest tutorial on making a button I have been ableto find. You have no idea how grateful I am for that :) You’re the bomb!! Thanks!

  23. 25

    I used this and it worked great, so thank you very much! I was wondering if this is the same way you made your facebook, twitter, email, etc. buttons. I would like to make some on my page, but I am having trouble knowing where and how to start.

    1. 25.1

      Hi Kimberly,
      Yes, you can create social media buttons that way to! If you google FB or twitter icons, they are loads of free ones on the web you can download. Then simply upload them to a photo hosting site like photobucket.com and then use the tutorial to complete the button.
      Hope that helps! Thanks for stopping by! I’m glad you were able to use the tutorial to create a button for your blog!
      happy crafting,
      Linda

  24. 26

    I swear I am more tech savvy than this – But I cannot figure this out! Do you know any sites that create blog buttons and provide the URL box along with it for a small cost?

    Thank you :)
    MattersofMichelle.com