Create a CSS Image Slider with Thumbnails for Blogger

Image galleries/sliders are particularly useful for photoblogs, but they could also be useful for users who occasionally need a gadget like this. We already posted a tutorial on how to add Thumbnail Image / Photo Gallery in Blogger with a big thumbnail at the top and smaller thumbs at the bottom which were enlarged each time an image was selected. The difference is that we had to click on the image in order to make it larger and that was acquired with JavaScript.

This time, however, we will use only hover and CSS. To see how it works, please visit the demo blog:

Demo blog

How to Add CSS Image Slider with Thumbnails in Blogger

Step 1. Log into your Blogger Dashboard and go to "Template" > press the "Edit HTML" button.

Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the Blogger search box

Step 3. Paste the </head> tag inside the search box and hit Enter to find it.

Step 4. Just above the </head> tag, add the CSS code:

<style type='text/css'>
.image-container {
position: relative;
width: 100%;
height: 530px;
margin: 0 auto;
text-align:center;
overflow: hidden;
}
.image-container a {
display: inline;
text-decoration: none;
}
/* Mini-thumbnails style */
.mini-thumbnail {
width: 18.4%; /* mini-thumbnails width */
margin:1px;
opacity: 1;
-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.5);
box-shadow: 0px 0px 3px rgba(0,0,0,0.5);
}
/* Style for the main thumbnail */
.large-thumbnail {
position: absolute;
width: 100%;
top: 800px;
margin:0 auto;
text-align: center;
display: block;
-webkit-transition: top 1s ease;
-moz-transition: top 1s ease;
-o-transition: top 1s ease;
-ms-transition: top 1s ease;
transition: top 1s ease;
}
.feature {
top: 85px;
width: 100%;
opacity: .3;
}
/* style for the selected mini-thumbnail */
a:hover .mini-thumbnail {
opacity: .5;
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
}
/* transition effects for the selected image */
a:hover .large-thumbnail {
top: 85px;
width: 100%;
z-index:3;
opacity: 1;
-webkit-transition: top 1s ease;
-moz-transition: top 1s ease;
-o-transition: top 1s ease;
-ms-transition: top 1s ease;
transition: top 1s ease;
}
</style>

Here we set a specific height of 530px so that we can slide an image out of the container margins and set the overflow value to hidden.

The position: absolute of the larger thumbnails (.large-thumbnail) pulls them out and places them in the spot that we've chosen using a value of 800px for the top property.

The mini-thumbnails which are actually a second image, stay all the time above in a static position and are slightly modified only in terms of style for distinguishing the active (a:hover .mini-thumbnail) on mouse over.

Step 5. Save the changes by clicking the "Save template" button.

And finally, we need to add the HTML code.

Step 6. Paste the below HTML structure to where you want to display the gallery by going either to the "Layout" page and add a new gadget (click on the "Add a gadget" link and choose "HTML/JavaScript"), or inside a post or page within the "HTML" section.

<div class="image-container">
<a href="javascript:void(0);">
<img class="mini-thumbnail" src="MINI-THUMB-URL1" />
<img class="large-thumbnail" src="LARGE-THUMB-URL1" />
</a>
<a href="javascript:void(0);">
<img class="mini-thumbnail" src="MINI-THUMB-URL2" />
<img class="large-thumbnail" src="LARGE-THUMB-URL2" />
</a>
<a href="javascript:void(0);">
<img class="mini-thumbnail" src="MINI-THUMB-URL3" />
<img class="large-thumbnail" src="LARGE-THUMB-URL3" />
</a>
<a href="javascript:void(0);">
<img class="mini-thumbnail" src="MINI-THUMB-URL4" />
<img class="large-thumbnail" src="LARGE-THUMB-URL4" />
</a>
<a href="javascript:void(0);">
<img class="mini-thumbnail" src="MINI-THUMB-URL5" />
<img class="large-thumbnail" src="LARGE-THUMB-URL5" />
</a>
<a href="javascript:void(0);">
<img class="large-thumbnail feature" src="LARGE-THUMB-URL1" />
</a>
</div>

The javascript:void(0); leaves the link empty but you can add one if you want. Just replace javascript:void(0); with the URL of your page/post.

To add pics inside the image slider, replace MINI-THUMB-URL and LARGE-THUMB-URL with image URLs. Note: The last LARGE-THUMB-URL1 should be replaced with the URL of the default image that will appear on your slider.

If you don't know how to get the images URL, visit this tutorial: How to upload images and get their URLs.

Now, Save your widget/gadget or publish your page/post and you're done adding the CSS image slider with thumbnails in Blogger.

Share this post