Today I'm going to show you how to use HTML and a little CSS to create a basic image gallery for your blog's sidebar. This is a versatile layout that you can use for sidebar navigation, blogrolls, or just to show off your favorite images.
In this beginner-level tutorial, I'll take you through the steps for creating a two-column sidebar gallery with six 100px square images. Each image link to a different page. At the end of the post, I've included some CSS styling options to customize the gallery.
What You Need To Use This Tutorial
- The option to add custom HTML widgets/gadgets to your sidebar. Blogger, self-hosted Wordpress, and Typepad Unlimited users, you're all set. Wordpress.com users will need the premium Custom CSS option to use CSS.
- Images for your sidebar. In this tutorial I'm using 100px square images. If you have a wide or narrow sidebar, you may need to adjust the image sizes. Keep in mind that the gallery looks best when all of the images are the same size.
You don't need any previous experience with HTML or CSS to use this tutorial, I'll walk you through it.
All set? Let's get started!
Upload Your Images
If you use Blogger, you can upload your images to your Picasa Web Album for your blog. If you're on self-hosted Wordpress, upload your images 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!
After you've uploaded your images, you're ready to start writing the HTML for the gallery.
The HTML
Here's the skeleton template for a 6 image gallery:
<div class="sidebar-image-gallery"> <a href=""><img src="" width="" height="" alt=""></a> <a href=""><img src="" width="" height="" alt=""></a> <a href=""><img src="" width="" height="" alt=""></a> <a href=""><img src="" width="" height="" alt=""></a> <a href=""><img src="" width="" height="" alt=""></a> <a href=""><img src="" width="" height="" alt=""></a> </div>
I've created an editable version of this template on Codepen. You can open the editor in a new tab to code along with the tutorial. When you use Codepen to write your HTML, you'll see a preview of how your gallery will look before you add it to your blog. This is nice since you don't have to worry about making a mess on your blog while you experiment!
If you'd prefer to write your HTML "offline", make sure you have a suitable text editor — Notepad is built-in on PCs, TextEdit is built-in on Macs (you'll need to set it up for use as an HTML editor first). Never edit HTML with a word processing program.
Let me take you through the HTML and explain what each part means.
<div class="sidebar-image-gallery">
The first line is an opening <div> tag with the class of "sidebar-image-gallery". In HTML and CSS, a div is like a container for the elements inside it. In this case, our gallery div will "contain" all of your image elements.
The next 6 lines all have identical markup, but you'll fill them in with different information for each image. Let's take a look at the HTML for your gallery images, and what each of those parts means:
<a href=""><img src="" width="" height="" alt=""></a>
<a href="">
Here's where you enter the link your readers will go to when they click your image. So, for example, if I wanted to link my image to Google, I'd write it like this:
<a href="http://www.google.com"><img src="" width="" height="" alt=""></a>
If you'd like the link to open in a new window/tab, add target="_blank" after the closing quotation mark around the URL, like this:
<a href="http://www.google.com" target="_blank"><img src="" width="" height="" alt=""></a>
<img src=""
Here's where to enter the direct link to your image. If you uploaded your image to your Picasa album, click on the image in your album to reach its full-sized version, then right click on the image and select the option to copy the image location. In self-hosted Wordpress, click "edit" beneath your image in your media library and copy the File URL. Typepad users, right click the image title in your File Manager to get the direct URL.
Building on the last example, here's how I'd enter the direct link to my image:
<a href="http://www.google.com"><img src="http://www.example.com/image.png" width="" height="" alt=""></a>
width="" height=""
Enter the width and height of your image here. I'm demonstrating this with 100 x 100px square images:
<a href="http://www.google.com"><img src="http://www.example.com/image.png" width="100" height="100" alt=""></a>
Don't add "px" after the width or height, enter the number only.
alt="">
Alt text helps readers with visual impairments understand the images on your blog. Since we're linking the images to another page, the alt text should let your visitors know where the link is going. So, for example, I'd fill in alt text for an image linking to Google like this:
<a href="http://www.google.com"><img src="http://www.example.com/image.png" width="100" height="100" alt="Google"></a>
</a>
The closing anchor tag </a> closes the link. Don't leave this off, or your links will behave strangely!
Repeat the same process for each of your image links, making sure to fill in the destination URL first, the image source URL next, then finally the attributes of the image (width, height, and alt).
After you've completed all of the image links, you'll see that the gallery container closes with the closing </div> tag.
The CSS
If you're working along in Codepen, at this point your preview window will show you six images in a horizontal row.
We want to turn that into a two-column layout, and we'll do that with one line of CSS.
In the CSS window in Codepen, enter this:
.sidebar-image-gallery { width: 210px; }
This rule sets the width of the gallery container to 210px, which forces the 100x100px square images into two columns, like this:
Add the Gallery to Your Blog
Once your gallery is complete, you're ready to add it to your blog! We're going to add the CSS first so that your images are immediately styled as soon as you add the HTML.
The CSS
In your Codepen, copy the CSS rule in the CSS window and paste it into the custom CSS field for your blogging platform. 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.
Save your CSS. Nothing will look different on your blog yet. You'll see the CSS working once you add the HTML.
The HTML
Next, copy everything from the HTML window and paste it into an HTML gadget/widget on your blog. 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.
Save your new widget and you should see your new gallery appear in your sidebar. Nice work!
More Customization Options
If you're up for a little bit more CSS, there are a few simple tweaks you can make to your gallery to give it a little more style. Each of these CSS enhancements works in the current versions of Firefox, Chrome, & Safari, and in Internet Explorer 9+. IE8 is left out, as usual.
Make the Images Round
No need to open up Photoshop, you can make images round with one line of CSS! Just add this CSS rule below your .sidebar-image-gallery width rule:
.sidebar-image-gallery img { border-radius: 50%; }
Boom, round images!
Change Image Opacity on Hover
You can use the CSS opacity property and the :hover pseudo-class to make the images appear to "fade in" or "fade out" when they're hovered with the mouse.
To make the images appear to "fade in" when they're hovered, you'll need to lower their opacity in their un-hovered state. To do that, add this rule to your CSS:
.sidebar-image-gallery img { opacity: .7; }
If you've used the border-radius rule demo'd above, you can add the opacity as the next line of that rule, like this:
.sidebar-image-gallery img {
border-radius: 50%;
opacity: .7;
}
That sets the initial opacity of your image at .7 on a scale of .1 - 1, with .1 as the lowest visible opacity and 1 as full opacity. Don't set your initial opacity too low — hover effects don't work as well on touch screen devices, and you don't want your image too faded for touchscreen visitors.
Now it's time to set the hovered opacity with the :hover pseudo-class. Here's the rule:
.sidebar-image-gallery img:hover { opacity: 1; }
Now when each of your images is hovered, it will come up to full opacity.
To reverse the effect and make the images "fade out" a little when hovered, switch the opacity levels in the two rules so that your initial opacity is 1.
Make the Images Move
You can give the images a little bit of motion with a CSS transform. Try this to get started:
.sidebar-image-gallery img:hover {
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
transform: rotate(-10deg);
}
This rule makes the image tilt slightly to the left when it's hovered. If you used the opacity :hover rule up above, you can combine this :hover rule with that one, like this:
.sidebar-image-gallery img:hover {
opacity: 1;
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
transform: rotate(-10deg);
}
You can change the degree of the rotation by changing -10deg to a different number, positive or negative. Make sure to change all 4 instances of the number so that your effect works the same way from browser to browser.
I saved a separate Codepen with all of these extra CSS effects applied here. Experiment with it a bit and see what you come up with!
