I've had several readers ask how I made my social media buttons line up vertically like they do in the sidebar to the right.
The answer is: HTML & CSS! But, there's a bit more to the answer than just those acronyms, so let me show you how it's done.
What You'll Learn
How to make your social media icons line up vertically in a sidebar. If you'd like to take a sneak peek at the HTML & CSS we're going to use, you can see an interactive demo on Codepen.
What You Need To Use This Tutorial
You need a blog that allows you to add custom HTML widgets/gadgets in the sidebar. Blogger, self-hosted Wordpress, and Typepad Unlimited users, you're all set.
You also need a set of social media icons. The buttons in the screenshot above are from Brandi Girl Blog. My current buttons are from Icomoon. There are also many free and premium options out there. The HTML I'll give in this tutorial is suitable for any icon set.
First, Upload Your Icons
If you use Blogger, you can upload your icons to your Picasa Web Album for your blog. If you're on self-hosted Wordpress, upload your icons to your media library. Typepad users can upload images to the File Manager. No matter what platform you're on, if you prefer to use Photobucket or another image hosting service, you can!
Once you've uploaded your images, you can start putting together the HTML for your buttons.
Next, Write the HTML
You can use my Codepen demo as a template, or you can write out your HTML on your own.
Before you start writing your HTML, make sure you have a suitable text editor — Notepad is built-in on PCs, TextEdit is built-in on Macs. Do not write HTML with word processing software.
For each of your social media buttons, you're going to use the same few lines of HTML. Here's the skeleton of one button's HTML:
<a href="" title=""><img src="" width="" height="" alt=""></a>
If you're familiar with HTML, you'll recognize that as the HTML to create a clickable image. If you're not familiar with HTML, let me break down each part so you know what goes where.
<a href=""
Your social media link goes here. For example, if I'm creating a button for Twitter, I'd fill it in as: <a href="http://www.twitter.com/MMosley".
An email link is slightly different. To link to email, fill it in like this:
<a href="mailto:marie@codeitpretty.com"
title="">
Enter the name of the social media service you're linking to here. To continue the Twitter example, I'd enter it like this: title="Twitter">. The text you enter here will show when your visitors hover over your social media button.
<img src=""
Here you'll enter the direct link to your social media button image. If you uploaded it to your Picasa album, click on the image in your album to reach its full-sized version, and right click on the image to copy its location. If you're on self-hosted Wordpress, you can get the link by clicking "edit" beneath your image in your media library and copying the File URL. Typepad users, you can find the direct URL to each image by right clicking its title your File Manager.
width="" height="" alt=""
Here you'll enter your images' width, height, and alternative text. I'd fill it in like this for my Twitter button: width="52" height="52" alt="Twitter icon".
After everything's filled in, the element closes with a </a> tag.
Putting it All Together
Now that I've broken the HTML down to bits, let's put it back together so you can see what the complete HTML for a social media button looks like:
<a href="http://www.twitter.com/MMosley" title="Twitter"> <img src="http://www.example.com/twitter.png" width="52" height="52" alt="Twitter icon"></a>
Repeat that process for each of your social media buttons until you've marked up each one. Then, paste your HTML into a sidebar widget. On Blogger, use an HTML/JavaScript gadget. On Wordpress, enter it in a text widget. On Typepad, use the "Embed your own HTML" option in your Content menu.
Make the Buttons Vertical
Depending on the size of your buttons and the width of your sidebar, your buttons may already be vertical. In that case, you're done. Congrats & enjoy your buttons!
But, if your buttons are displaying horizontally, you'll need to take another step to get them lined up properly.
Go into your sidebar widget and add this line at the very top of the HTML:
<div class="social-sidebar-buttons">
Then, scroll down to the very bottom of your HTML and add this line:
</div>
You've just wrapped your HTML in a div! A div is like a container for HTML — when you apply CSS to a div, it affects the entire container. We're going to use CSS to line up your buttons vertically.
Adding the CSS
Now that your HTML is all wrapped up, you just need to add a bit of CSS to force your social media buttons into line. If you're on Blogger, go to Template > Customize > Advanced > Add CSS. If you're on Typepad, go to Design > Custom CSS. On Wordpress your custom CSS location will vary. If you're using Jetpack's Custom CSS option, it's under Appearance > Edit CSS.
Once you've found the spot for your CSS, enter this into the custom CSS field:
.social-sidebar-buttons {
width: XXpx;
}
Replace XX with your buttons' width. This makes the div "container" that's holding your buttons contract to the width of your buttons, forcing all of the buttons into a vertical line. Save your CSS to apply it to your blog.
Further Customization
You may need to tweak the left or right margin of your social-sidebar-buttons div to get it into exactly the right spot in your sidebar. You can add a margin to your div's CSS like this:
.social-sidebar-buttons {
width: XXpx;
margin-left: XXpx;
}
If you want a right margin instead, enter margin-right instead of margin-left. Replace XX with the number of pixels you'd like to move your buttons — start small, then increase as needed.
