How to Make a 'Contact Me' Button for Blogger

Create a 'Contact Me' button to insert into a Blogger sidebar.

Design a "Contact Me" button for your Blogger.com blog as a visual aid for blog visitors to easily locate your website contact information. Color-coordinate your "Contact Me" button with your website's colors or choose a fun image. The "Contact Me" button is uploaded to your blog sidebar as an image and linked directly to your contact information. Before creating the button, you must know the width of your blog sidebar. Create your "Contact Me" button with any graphic design program; these instructions are based on Paint, or you can use a more comprehensive option such as Adobe Photoshop.

Things You'll Need

• Paint (optional)
• Pencil and paper

Instructions

Find the Width of Your Blogger Sidebar

1. Open a Web browser. Go to Blogger at www.blogger.com. Type your email and password. Click the gray "Sign in" button.

2. Click the blue "Design" link under the blog name. Click "Edit HTML" under the "Design" tab.

3. Scroll through "Edit Template" until you find the width of your sidebar. The coding looks like this:

   #side-wrapper {
   width: 240px;
   float: left;
   margin: 0px 0px 0px 0px;
   padding: 0px 0px 0px 0px;
   }

4. Write down the width of the sidebar in pixels.

Design the Contact Me Button

1. Click "Start" and click "All Programs." Click "Accessories" and click "Paint" to open the program.

2. Click the "Paint" menu next to "Home" and click "Properties." Type the width and height in pixels, using the width measurement you located in Section 1. Click "OK."

3. Design your "Contact me" button. Use the "Shape" drawing tools, "Text" and "Brushes" to personalize it.

4. Click the "Paint" menu and click "Save As." Save as a JPG or PNG file on your computer desktop.

5. Sign in to your blog at Blogger.com. Click the "Design" link and click "Page Elements." Click "Add a Gadget" and click "Picture."

6. Upload the "Contact me" button picture and add the link to your email or contact information. Click the orange "Save" button.

Tips & Warnings

• Use an envelope graphic instead of designing a button shape.

References

• Microsoft Windows: Using Paint
• Blogger Help: Layout Guide