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.

blogspot.com/" target="_blank" title="Scarlett Rains

blog"><img alt="Scarlett Rains 

blog" src= "http://2.bp.blogspot.com/oSqZY23BcZw/T7WHis_StZI/

 

AAAAAAAABIM/1P6Cs_deHfw/s1600/scarlettblogger

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

 </center>

<center><textareaid="code-source"rows="3"name="code-source"><center><ahref="http://scarlettrainssistersoftheheartsblog.blogspot.com/"><img border="0"src=" http://2.bp.blogspot.com/oSqZY23BcZw/T7WHis_StZI/AAAAAAAABIM/1P6Cs_deHfw/s1600/scarlettbloggerbutton.jpg "/></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!