Monday, July 16, 2012

How to Make a Blog Button ... and Remain Sane

Be a ‘Champ’ in the continuing battle of

Blogger vs. Computer!

I know many of you have been waiting for this post since I told you about it in When is it Hip to be Square, and you saw all those cool buttons of My Blogging Friends.  So, here goes.  First of all, I must tell you that I am not a programmer.  I’ve taken two HTML courses, a CSS and a JavaScript course:  mixed well with a basic knowledge of Photoshop, and I know enough to muddle my way through and somehow get things done.  Changing code can make you crazy.  I’ve been there, done that.  So, I’ve decided to share some tips with you that may keep you sane.  There are a few ways, I’ve found, to make a button.  The easiest way is described below. Follow the steps and you should be fine, but take them at your own risk. J
1)    Choose a picture you like with, or without, text.  I would size it at 150 to 200 pixels (square) and save it as a JPEG.
2)    It’s a good idea to compress the picture for the web before you upload it.
·       How to compress your picture so it doesn’t bog down your blog: Using Microsoft Office Picture Manager: Edit picàcompress picà for web pagesàOK
3)    Open a new post in your blog and name it ‘blog button’:
·       Click on the little picture icon and upload your newly made blog button pic into the post. 
·       Right-click on the pic and open ‘properties’.  You will see a gazillion-long URL which is your web address for this pic.  Copy that down.  You will need it, and your blog URL, to make your button.
·       Save the post as a draft.
4)    Copy all of the code below into a Word file where you can comfortably play with it and not do any damage.  Don’t change the line spacing or anything.

<center><a href="http://scarlettrainssistersoftheheartsblog." target="_blank" title="Scarlett Rains

blog"><img alt="Scarlett Rains 
blog" src= "


button.jpg "/></a></center>


<center><textareaid="code-source"rows="3"name="code-source"><center><ahref=""><img border="0"src=" "/></a></center>           
5)    Now, for the meat and potatoes: 

· Remove the information in red (in both paragraphs) and put your blog link (URL) there. DO NOT ERASE THE QUOTATION MARKS!
·       Replace the purple text with your blog name, in both places. DON'T YOU DARE ERASE THE QUOTATION MARKS!
·       Replace the green text with the URL of your pic (in both paragraphs). DO NOT ERASE THE QUOTATION MARKS!
·       Save this as a Word file so you have it in case of emergency.  J
6)    Go to your blog-àLayoutàclick ‘Add Gadget”à select HTML/JavaScript
7)   Before you paste the code into the gadget remember to click the box on the top-right of the gadget and change from HTML to Rich Text Format (RTF).  Put a snazzy phrase like, ‘Grab my Button!’ in the Title area & click ‘Save’. 
8)    Now, check that everything looks good and works.  If you click on the pic it should reload your blog because it should be a clickable link to it.

There you are!  Now, all you have to do is swap buttons with your pals and you are good to go.  Please, make sure to grab mine, and my friend, Krista’s.  She showed me a MUCH easier way to make this code work, and deserves a solid pat on the back.

Thank you so much for your comment at Scarlett Rains Sisters of the Hearts Blog. Every comment is read and appreciated.
Don't forget to subscribe either by RSS feed 
or by email . Hope to see you again soon!


  1. This comment has been removed by the author.

  2. ack! I'll try!God bless you for trying to teach me!

  3. Hmmm. I think I better leave this to the experts. But I a duly impressed.

    1. C'mon, Margaret. If I can do it, you can do it. :)

  4. Scarlett, thanks for sharing the tips. I'll create my blog button soon. Sure, I'm intimidated, but will try to make it work!

    1. Don't be intimidated. Let me know if you need help.

    2. Scarlett, I finally did it! Thanks for your tutorial. Happy 2013!

  5. Thanks for the very clear instructions. Actually, I'm ashamed to know that you had to build mine for me. If I'd understood all of this, I coulda, woulda, shoulda...well, you know! LOL

    Now, how do you 'GRAB' someone else's button?

    Margaret--don't say you can't until you try!

    1. Just for you, my dear, I've created a follow-up post.

  6. This comment has been removed by a blog administrator.

  7. This is a very helpful post, thank you for sharing it. The blog button for yours is adorable! I am coming over from Book Blogs.
    @authorewalker - Twitter


    PS - If this ends up a duplicate comment, please erase!

    1. I've got you covered, Emily. :) Removed the duplicate. Thanks for coming by. Let me know if you need help with the button.

  8. I've been trying to follow the directions but I keep ending up with one button above the other instead of the code beneath the button. What am I doing wrong?

    1. Hi Teller-girl. I'm not sure. Why don't you email me your code and I'll look at it.


Folks who are kind enough to nominate me for blog awards and such, thank you so much, but...please, don't. I barely have time to comb my hair. :)