How to Make a Blog Button

Not exactly an original tutorial however it’s great to know how to do it AND do it correctly! I’m going to give you two options on how to place the button and the linking back code in your sidebar!

Make the Button

We’re just going to go with the standard 125px by 125px button for now. Here’s a quick one I made up!

Here’s how I made it using Photoshop (you can use any program you’re familiar with to create the button).

1. Create a new document with the dimensions of 125px width and 125px height.

2. Design your button! I stuck with my current color scheme and font to make this basic button.

3. SAVE your button! I always use the highest quality I can get for ANY image I want online.

4. Upload your button via FTP or through your WordPress or Blogger dashboard. If you need to know HOW to do this, just let me know and I’ll help you! Make a note of the PATH of where you uploaded the image. If you did it via your WordPress or Blogger dashboard, it generally gives you the URL of the image.

How to Upload Button and Get Image URL via WordPress

In your WordPress dashboard, you’ll see an area called Media. Hover over that and a second menu will pop out, select “Add New”.

After you upload your image you’ll see the following display. The URL to your image is located in the FILE URL box which I’ve surrounded in lovely pink.

5. Add the button AND code to your sidebar! We have two options here on displaying it.

Option One — Textarea

<img src="http://replacemedomain.com/urltobutton.jpg" alt="your domain name" />
<br /><br />
<textarea rows="4" columns="10"><a href="http://yourdomainurl.com"><img src="http://replacemedomain.com/urltobutton.jpg" alt="your domain name" /></a></textarea>

This creates the following:

Option Two — Div

<img src="http://replacemedomain.com/urltobutton.jpg" alt="your domain name" />
<br /><br />
<div style="overflow:auto; font-size: 11px; width:125px; height:80px; border: 1px solid #c2c2c2">
&lt;a href=&quot;http://yourdomainurl.com&quot;&gt;&lt;img src=&quot;http://replacemedomain.com/urltobutton.jpg&quot; alt=&quot;your domain name&quot; /&gt;&lt;/a&gt;
</div>

That gives you the following:

Add to Your WordPress Sidebar

We’re going to use a widget to easily add the code to your existing theme’s sidebar.

In your WordPress dashboard, navigate to Appearance, when you hover over a second menu will appear, select Widgets.

You might have to look around a bit but find the TEXT widget and drag it over to your sidebar.

When you select or open up the widget, you can then enter in the code!

Keep in mind that if you use the WP-Typography plugin for WordPress there is an extra step you’ll have to take if you use the DIV option to remove the fancy curly quotation marks. I don’t think many people use the plugin, but if you need assistance with that plugin, I will help you out.

Let me know how it works out for you! If you have any questions or need help, comment below and I’ll see what I can do.

• How to Make a Blog Button
• WordlessWednesday: Hair Fluffs
• Blast from the Past: Old OSN Designs
• Leap into Spring: Finale
• Leap into Spring: Grass/Green
• Bubbles
• May 2012 Julep Maven It Girl Box
• Life Updates

• OSN Archives: : Recipe: Chicken Tortilla Soup and Quick Peach Crumble bit.ly/M6KY3J | 6 hours ago
• @nightlockish done! | 7 hours ago
• @tRUstingmama that's awesome! | 7 hours ago