I have added an image slider into my blogger so can you!
Step 1: In blogger, click on layout
Step 2: Add a gadget. Select "HTML/ Javascript". Drag and position the gadget to where you want your image slider to be located.
Step 3: Copy and Paste the below Script into the gadget. Kudos to dimpost.com for sharing this script.
Step 4: And volla! You are done!
Step 5: Let's do some configuration now. instructions posted after the script.
I would suggest you to read through the whole post before giving up and saying it's too hard.
Html and CSS are all about trial and error. Keep trying until you get it right. Read the whole tutorial for an overview first and try to understand the gist behind it. It always works for me.
<style type="text/css">
/* http://dimpost.com */
#sliderFrame {
position: relative;
width: 900px;
margin: 0 auto 40px;
}
#slider {
width: 900px;
height: 580px;
/* Make it the same size as your images */
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0i9Q1A3VA-olH6P7iKbvnFvSndktIdHPotGSMXYAIHo2MaWyTUJS8xvn0UWkJ2uP1AJo0EmBmqcc6bkRX7wfrKVUyif4J7evGYP4rKI46UDLcg0QUbKGc2J2UksjnxTrz2TyCObHfe-dQ/s1600/loading.gif) no-repeat 50% 50%;
position: relative;
margin: 0 auto;
/*make the image slider center-aligned */
-webkit-box-shadow: 0px 1px 5px #999999;
-moz-box-shadow: 0px 1px 5px #999999;
box-shadow: 0px 1px 5px #999999;
}
#slider img {
position: absolute;
border: none;
display: none;
}
/* the link style (if an image is wrapped in a link) */
#slider a.imgLink {
z-index: 2;
display: none;
position: absolute;
top: 0px;
left: 0px;
border: 0;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
/* Caption styles */
div.mc-caption-bg,
div.mc-caption-bg2 {
position: absolute;
width: 100%;
height: auto;
padding: 0;
left: 0px;
bottom: 15px;
z-index: 3;
overflow: hidden;
font-size: 0;
}
div.mc-caption-bg {
background-color: black;
}
div.mc-caption {
font: bold 14px/20px Arial;
color: #EEE;
z-index: 4;
padding: 10px 0;
text-align: center;
}
div.mc-caption a {
color: #FB0;
}
div.mc-caption a:hover {
color: #DA0;
}
/* ------ built-in navigation bullets wrapper ------*/
div.navBulletsWrapper {
top: 600px;
left: 340px;
/* Its position is relative to the #slider */
width: 150px;
background: none;
padding-left: 20px;
position: relative;
z-index: 5;
cursor: pointer;
}
/* each bullet */
div.navBulletsWrapper div {
width: 11px;
height: 11px;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIvsGvOQeSnW8j_PvOoyc9So5nK77FfNC5VhDoowzipLzU4Q9HEjNLpjzhSzpXjiM_qsVtR4zLi-KTTvMGwKTp1RzmeSHeVOE3cKtKi06CRlEI1m6hootwl2lA5VRPjUDixaF4Y7xqCALO/s1600/bullet.png) no-repeat 0 0;
float: left;
overflow: hidden;
vertical-align: middle;
cursor: pointer;
margin-right: 11px;
/* distance between each bullet*/
_position: relative;
/*IE6 hack*/
}
div.navBulletsWrapper div.active {
background-position: 0 -11px;
}
.intro {
bottom: 0;
color: rgba(0, 0, 0, 0.2);
font-size: 16px;
position: absolute;
right: 0;
text-decoration: none;
z-index: 99999;
}
/* --------- Others ------- */
#slider {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
}
</style>
<script src="http://project.dimpost.com/image-slider/js-image-slider.js" type="text/javascript"></script>
<div id="sliderFrame">
<div id="slider">
<a href="#"><img src="https://drive.google.com/uc?id=1MAHmoNB8oPGgAIcGQlp9tv6doZAVh2l7" alt="#htmlcaption1" /></a>
<a href="#"><img src="https://drive.google.com/uc?id=1wckjtAuyBWPxG1KZUhvKj1QzypTogHYM" alt="First we eat, then we do everything else." /></a>
<a href="#"><img src="https://drive.google.com/uc?id=1qOroOEFbja6RqD88OhFqMntHxkv4bjoo" alt="One cannot think,love and sleep well if one has not dined well." /></a>
<a href="#"><img src="https://drive.google.com/uc?id=1dTK2eal8Ewpk-KkGDLyyD9lLq8-8j33w" alt="#htmlcaption2" /></a>
<a href="#"><img src="https://drive.google.com/uc?id=1ga0BmQ6K3rC6BtUs9rUeh3BhlRiHBVDA" alt="Travel makes one modest. You see what a tiny place you occupy in the world." /></a>
</div>
<div id="htmlcaption1" style="display: none;">
Be fearless in the pursuit of what sets your soul on fire!
</div>
<div id="htmlcaption2" style="display: none;">
A hungry man is an angry man.
</div>
</div>
Things you can touch to configure your image slider.
#1 Edit the image size you are going to use in your image slider first.
The Image size you upload must be same in terms of width stated under #sliderFrame { & #slider {
code above. (See Yellow highlighted)
#2 Tip: You can use Windows (Paint 3D) to open your picture, after which click on edit picture function to crop and resize your picture so that it fits the frame. There are many inbuilt photo editor in computers these days. So feel free to use what you are comfortable with.
#3 /* Make the & #slider { width and height the same size as your images */.
If your Image size is 900 px (width)580 px (height) <-- Make sure all your other images used are also of this size!
Then, you amend the & #slider { width and height to the same. See below.
#Slider {: 900px (width) x 580 px (height) <-- simply amend the px on the script you posted in your blog above AND adjust it to the same size as your image
See yellow highlighted section and see how I match them in the above script.
In this image slider, you can't adjust your image's height and width BUT you can adjust the slider and slider frame.SO the purpose of #1 and #2 is to ensure you have already standardize your image size first.
There are issues with the image slider position as some are aware. This script is not perfect. The trick to doing this is to make sure your image width and height is set to the exact same as the slider.
ALLOW SOME FLEXIBILITY IN CONFIGURATION.
In my case, my #slider { is of width 900 px and height 580 px.
Whereas, my image size is actually 960 px and height 640 px. I kind of make the original image height and width more than the slider so as to focus on the scenery more instead of myself. So this is a trick you can use.
The #slider { acts like a frame to how much of an area your pictures will be shown. So this is something you can play around.
#4 Ensure that the width of the #sliderframe is same as your #slider. But do not touch anything else other than the ones I highlighted. Especially if you are a novice like me.
#sliderFrame {
position: relative;
width: 900px;
margin: 0 auto 40px;
#slider {
width: 900px;
height: 580px;
#5 As you amend the sizing of your image and slider. You will realize the 5 grey dots position
o o o o o
may be misaligned. As such, you can amend the px section below on the script above. It means how far your bullets should be counting from the top and how far from the left side it should be position.
So feel free to amend the below in your script.
div.navBulletsWrapper {
top: 600px;
left: 340px;
#6 Let's play with the captions! If you look at the above script, you notice that those in quotes " " are exactly what is appearing in my screen. So simply amend the text in between and you have successfully edited the caption in your image slider. Do it for the rest as you go.
"Travel makes one modest. You see what a tiny place you occupy in the world."
#7 Let's upload your own image after you have done the resizing of your image on #3.
It is time to host your image. Copy your image URLand paste them in the img src="url here" section. See the blue highlighted section.
#8 Feel free to share what works for you! I am not expert in css script and i am aware that there are image slider using css script that are wayyy better than this. This image slider is the most simple and straightforward slider I have ever come across. I hope you like it too. You can use it in blogger and wordpress as well or any other html sites. Have fun with this image slider.
Disclaimer: There are more advanced designs of image slider out there which may cost money or will require yourself to have certain IT knowledge before proceeding.
Another simple trick you can do is to do a GIF image and put inside your website. No need for scripts/ CSS to do something like this.
“Learning HTML and CSS is a lot more challenging than it used to be. Responsive web design adds more layers of complexity to design and develop websites.” ―
Date shared: 26.04.2019
Follow me at my Instagram
