Create a CSS Image Slider with Thumbnails for Blogger

Hey guys, are you having a problem on how to make image galleries/sliders for your blog? This tutorial is the answer for it. Photoblogs  need this kind of trick in order to show their images in a nice and professional manner but not only for those kind of blogs since we need photos occasionally to present some ideas in our readers.  In this tutorial, I will show you  the steps on how to make it. An overview of this is tweak is  having a mini blocks of images at the top which will enlarged at the bottom each time an image is selected  upon hover of the mouse on the  thumbnail and that was acquired through adding some CSS on it.
image slider for bloggger
See demo here.

How to Add A CSS Image Slider with Thumbnails to Blogger


Step 1. Log in to your Blogger Dashboard >> Template >> Edit HTML
Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the Blogger search box
Step 3.  Look for the code below by  pasting it inside the search box and hit Enter.
</head>
Step 4. Just above/before the  tag above, paste the css code below:

<style type='text/css'>
.bttimage-container {
position: relative;
width: 620px;
height: 610px;
margin: 0 auto;
text-align:center;
overflow: hidden;
}
.bttimage-container a {
display: inline;
text-decoration: none;
}
.post-body img {
max-width: 600px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
/* Mini-thumbnails style */
.mini-thumbnail {
width: 18%; /* 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 1.5s ease;
-moz-transition: top 1.5s ease;
-o-transition: top 1.5s ease;
-ms-transition: top 1.5s ease;
transition: top 1.5s ease;
}
.feature {
top: 110px;
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: 110px;
width: 100%;
z-index:3;
opacity: 1;
-webkit-transition: top 1.5s ease;
-moz-transition: top 1.5s ease;
-o-transition: top 1.5s ease;
-ms-transition: top 1.5s ease;
transition: top 1.5s ease;
}
</style>

Step 5. Save template button.

Step 6. Go back to Blogger Dashboard and select any of the post you have published or you may choose a New Post where you will add the add the HTML code  inside a post or page by clicking the HTML section/button.

Hint:

Another way of putting the  HTML codes is thorough going ether to Lay -out and choose Add a new Gadget buttom then click HTML/Javascript.

<div class="bttimage-container">
<a href="http://bloggingtipsandtrix.blogspot.com/">
<img class="mini-thumbnail" src="MINI-THUMB-URL1" />
<img class="large-thumbnail" src="BIG-THUMB-URL1" />
</a>
<a href="http://bloggingtipsandtrix.blogspot.com/">
<img class="mini-thumbnail" src="MINI-THUMB-URL2" />
<img class="large-thumbnail" src="LARGE-THUMB-URL2" />
</a>
<a href="http://bloggingtipsandtrix.blogspot.com/">
<img class="mini-thumbnail" src="SMALL-THUMB-URL3" />
<img class="large-thumbnail" src="BIG-THUMB-URL3" />
</a>
<a href="http://bloggingtipsandtrix.blogspot.com/">
<img class="mini-thumbnail" src="SMALL-THUMB-URL4" />
<img class="large-thumbnail" src="BIG-THUMB-URL4" />
</a>
<a href="http://bloggingtipsandtrix.blogspot.com/">
<img class="mini-thumbnail" src="SMALL-THUMB-URL5" />
<img class="large-thumbnail" src="BIG-THUMB-URL5" />
</a>
<a href="http://bloggingtipsandtrix.blogspot.com/">
<img class="large-thumbnail feature" src="LARGE-THUMB-URL1" />
</a>
</div>

Customization:


  • Replace http://bloggingtipsandtrix.blogspot.com/ with the url of your page/post where you want to land a certain link.

  • To add pics inside the image slider just replace MINI-THUMB-URL and LARGE-THUMB-URL texts with the URL of your image.

  • The URL for the SMALL-THUMB-URL and BIG-THUMB-URL in every set or box is the same. See blockquote below for an example. Or you can do it separately depending on your preferences.

<a href="http://bloggingtipsandtrix.blogspot.com/">
<img class="mini-thumbnail" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZH4PEyml7ukLnLdsD2AUzhoBcqdutGuSfYuFfKIPzx_475rnjbKuf3VsXeqgxRlcbPfw4rmW8kCLooq4Q2m2KLd3CPh08kLEV90yrby66tgJ6fLZk_FUt-s3Lr9Fei50OXkOkH68_08Oa/s1600/photo+slider+in+blogger.png" />
<img class="large-thumbnail" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZH4PEyml7ukLnLdsD2AUzhoBcqdutGuSfYuFfKIPzx_475rnjbKuf3VsXeqgxRlcbPfw4rmW8kCLooq4Q2m2KLd3CPh08kLEV90yrby66tgJ6fLZk_FUt-s3Lr9Fei50OXkOkH68_08Oa/s1600/photo+slider+in+blogger.png" />
</a>

Note:

The last LARGE-THUMB-URL1 should be replaced with the URL of the default image that will appear on your slider.

Read this post to know how to get the image URL from your uploaded photo in Blogger.

Also read:

How To Show Or Hide/Cover Blog Content With Images Using CSS

Step 7. Finally, save your widget/gadget or publish your page/post and that's it! Enjoy Buddies :-)
Credits: helplogger.blogspot.com
About the Author:
tilt  hover effect
Hello folks! This is GOLDEN WORKS TV, the admin of this blog. No words could described my grateful appreciations to all newbie and professional bloggers around the world and most especially to Almighty God who gave me the wisdom...Read More
Follow him @ Twitter |Facebook


Express yourself!
3 comments : Post Your's Buddies!

Post A Comment!
We love to hear your feedbacks and suggestions. We will try our best to reply to your queries as soon as time allows. Please Keep in mind that all comments are moderated manually by our editors team to minimize spamming, and all the links are nofollow.

Note:
1. To add HTML code in the box, please use our HTML editor generator.
2. Please do not spam. Those type of comments will be deleted upon our review.
3. We should appreciate an individual and suggestive discussion.

Best Regards,

GOLDEN WORKS TV
  1. good post thanks
    http://www.freejobaware.com/

    ReplyDelete
  2. Is there a video of someone doing this for stupid people like me?

    ReplyDelete

Related Posts Plugin for WordPress, Blogger...