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:

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.

Related Posts

Fading Box With Newer/Older Posts Links and Titles for Blogger

The navigation links are those that appear at the bottom of the page that says “Older Posts”, “Newer Posts” and “Home” and help us to move through…

Before/After Photo Effect with jQuery

If you have a design or makeup blog, or if you are using before and after image comparison, this script will most likely be useful for you….

How to Add an Admin Control Panel in Blogger

A while ago I posted some tutorials on how you can remove the Blogger Navbar or add a Peek A Boo Effect so that it would show…

Using JQuery + EasyDrag to Move Elements or Images by Clicking on Them

This is a simple and easy-to-use jQuery plugin which enables drag and drop functionality to make your site more interactive so that readers can “play” with certain…

Share Blog Posts in Social Media using AddThis

AddThis is the most complete social sharing service allowing you to share your posts in more than 270 different social networks. If you want to use the…

Add a Pinterest Pin It Mouseover Button on Blogger Images

Images have always played a prominent role in attracting new visitors through search engines like Google and Bing. But when Pinterest decided to enter the social media…

Leave a Reply

Your email address will not be published.