Suger

The Suger Coat It Archives

{Blog Building} Making a Button

Want one of these? Get reading…

So here we are… How to make a button by popular demand. Well mostly the Madmother demands. You know how it goes. I am her willing servant.

First I really wanted to give a nod to the person who’s blog I read to make my buttons. And I racked my brain and racked it over and over again to remember who it was. And I couldn’t remember. So if this process looks familiar to something you have posted… take credit immediately. In the comments section. Be nice. I tried. 

The de’structions below are written and compiled by me. I cannot gaurentee they’ll always work everytime. And you’ll have to be able to operate a computer for them to work. Ha! Good luck.

    1
    Start by making a button image. You can do this wherever works for you. Paint to Photoshop. Standard size (the small on my blog) is approx 125pixels x 125 pixels. I also offer people a large option because I love a big ass sidebar. Select your size and make the button.

    2
    Export it to JPEG or similar file and upload to somewhere like Photobucket or Picasa web images or something.

    3
    Copy the HTML code that starts with







  1. 4

  2. Open a  browser window with your blog on it and log in. In blogger you would go to Design and select Add Gadget. In WordPress (my sources tell me because I’ve never used it) look for Layout and Page Elements.



  3. 5

  4. Paste your code into the box. 

    5. Click on the rich text button and your image should be there. If not go back and repeat steps 3 to now until it does. Do not email me hate mail until you have tried three times please. This takes time if you are new at recognising the code etc. 




  5. 6

    6. Click on the button image and highlight it/. Click on the hyperlink button (the little chain looking thing) above the box. When the pop up appears enter your blog address and clock OK. Okay? Got that?




  6. 7

    7. Click on the edit HTML link in the right hand corner. There will be a bunch of code stuff. COPY THIS. All of it. now I would click back to Rich Text for ease of separation and paste the code you have just copied. 

    8
    Before the pasted code type this;
    and at the end of the code type this;



  7. 9

    8. Click on the edit HTML link and click back to the Rich Text to view the end result. If it all looks good. You are on your way. If there are spaces or gaps or anything that you don’t want there. Change this in the rich Text editor until you are happy.






  8. 10

  9. And now because I’m a bit of a line it up type person, 

  10. I like to make sure it sits nicely in the centre. Don’t we all. So in front of your text type this;

    11. and at the end of the code type this;




  11. 11


    12. For goodness sake, save and close and go check out your blog immediately to admire how clever you are.

    And that, my dears is the Suger Coat It guide to making a blog button. 
    Let me know how you went. If I missed anything that would have been helpful or if you have any shorter method of doing it. I will update this so it’s simpler for everyone. 
    ME included.
    Leave me a link to your buttons, I’d love to check them out. 

    Suger

    13 responses to “{Blog Building} Making a Button”

    1. Cat Avatar
      Cat

      you are AWESOME. I was actually thinking of doing this today except that I don't know how to do it and nor do I have a reason to share a button! :) Still, you're awesome and when I have a reason to share a button I'll come back to this one. ;)

      Reply
    2. Melissa@Suger Coat It Avatar
      Melissa@Suger Coat It

      ARGH. Am hating the formatting. All those extra spaces. I've tried to fix them. Can't. Grrr. Ignore and love this post anyway, ok!?Thanks, M.

      Reply
    3. Madmother Avatar
      Madmother

      I love it (and you of course). Can't wait to try it after work tomorrow!Oh, and I've never had a servant before, will have to ponder on duties list. ;-)

      Reply
    4. Kimmie Avatar
      Kimmie

      OoOoh looks tricky…anyone wanna make me one perty please? *cheeky grin*Kimmiex

      Reply
    5. Cheeseboy Avatar
      Cheeseboy

      This is perfect! Exactly what I need. Now if I only had Photoshop or Paint on my Mac computer.

      Reply
    6. Lori @ RRSAHM Avatar
      Lori @ RRSAHM

      *Bookmarked*

      Reply
    7. Lori @ RRSAHM Avatar
      Lori @ RRSAHM

      I have a new button for Formspring. I luuuuurve you!!!!

      Reply
    8. Victoria {Victoria's Secrets} Avatar
      Victoria {Victoria’s Secrets}

      Thank you. I now have a button for my Blog.x

      Reply
    9. Melissa@Suger Coat It Avatar
      Melissa@Suger Coat It

      Yay! Great news guys.

      Reply
    10. Catherine F. Avatar
      Catherine F.

      Lori just passed on this link to help me! You too are truly worthy of the title 'LEGEND'. Thanks for the help. Will now try to decipher in time to make a button for Weigh-In Wednesday bloghop – button's designed at least!

      Reply
    11. Melissa@Suger Coat It Avatar
      Melissa@Suger Coat It

      Great news Catherine! I am always pleased to hear of newly created buttons. Go you.

      Reply
    12. Cinda Avatar
      Cinda

      I did it! I made one before but I couldn't remember where I got the tutorial but your post makes it seem so easy. I revamped it and now I have new button for my blog. Thanks!

      Reply
    13. Melissa *Suger Coat It* Avatar
      Melissa *Suger Coat It*

      Woohoo. And it looks great Cinda!

      Reply

    Leave a comment