0:00
Hello everyone, welcome to KeyTube blogging and in this video I will show you how can
0:04
add image gallery to your blogger website. So as you can see I have added image gallery like this and I will show you how can do it
0:11
in your blogger website. So for this you need to go to your blogger dashboard and you need to open an existing
0:19
blog post or new post and then you need to switch to the HTML view from compose view
0:26
and then you need to copy a code like this. So let me just scroll down and here it is, this is the CSS code so you need to add the
0:33
style tag just above and below the CSS code. So let me just copy the CSS code and I will paste it like this and I will just add the
0:44
style tag just above the CSS code like this and I will close the style tag like this
0:57
Now I need to add the HTML code so let me just copy the HTML code and I will paste it
1:03
here and here you will see options like image 1 and image 2 and if you want to add more
1:09
than one images then you can just copy this section and you can replicate this like this
1:18
So it will show three images at once and you can also add four images like this and you
1:24
can change this to like three and you can change this like to four so you can remember
1:33
the position and here you need to add the source image URL so for this I will use some
1:42
stock images from pixabay. So let me just copy the image address from here and I will add the image address in the
1:52
image URL field. Now let me just copy a different image so let me just select this one and I will copy
2:01
image address and I will add the image URL like this. Now I will copy another image so let's copy this one copy image address and I will add
2:16
the URL here. Now let's select a different image like this one and copy image address and let's add the
2:31
image URL here. Okay now we have add the image URL of that those images we need to add the link of the
2:40
images so whenever someone click on the image it will redirect to that page so you can add
2:45
the URL in the hash value and you can also add a image caption below the images so let
2:52
me just first publish this page so let me just add a name like gallery and let me just
2:58
publish this page. Now let's open this page and as you can see the image is showing like this so you need
3:10
to use the same size image otherwise it will not looks good
3:14
So let me just remove the third image from here so let's remove this one and let me just
3:25
replicate this one some more times and let me just add it below here and let's copy this
3:39
section and let's replicate it again and one more time so there is one two three four
3:47
five six seven so let's add it one more time. Okay there is eight image now so let me just update this page
4:00
Now let me just refresh this page and you can see it is showing eight images at once
4:08
and you can remove the image caption if you don't want it so just select this deep class
4:13
image caption and remove it so let me just remove the caption from all of the images
4:20
and you can also show a image description below all images if you want so in that case
4:25
I don't want the image caption and you can also add a image alt tag to improve your SEO
4:31
so just describe the image in the alt text field so you have to add your keywords or
4:38
add the images name like this in the alt field so let's update this page first
4:48
Now let me just refresh this page and as you can see the image caption is now gone and
4:53
whenever someone click on the image it will go to the link where you have paste in the
4:58
hash value and you can also show three images in a row so to do this just go to the CSS
5:05
code and here you will see this option width 24.9999 so you just change this percentage
5:12
to something like 33.333 like this so let me just update this page
5:22
Now let me just refresh this page and as you can see now it is showing three images in
5:29
a row so it is also mobile responsive so let me just click on inspect element here and
5:35
let me just choose iPhone SE and as you can see it is showing one images at a time so
5:40
let's change it to iPad Air and it will show three images at once and let's change it to
5:46
responsive and as you can see it will show images according to the screen size like this
5:55
so it is fully responsive and work in all devices and in this way you can add multiple
6:02
images so just copy this section and then you need to add the source image URL and add
6:08
the link of that image and you can add multiple number of images in the gallery sections
6:17
Okay as you can see it is now showing nine images at once so in this way you can change
6:21
the position if you want to add two images in a row then you can just simply change the
6:27
CSS code from 33% to around 50% so let me just quickly do that and let me just update
6:35
this page now let me just refresh this page and as you can see now it is showing two images
6:42
at once so in this way you can further customize the image gallery and you can also add border
6:48
around the images at a background sections so to add the background you can just click
6:53
on inspect element here and just select the whole image gallery and let me just click
6:58
on plus one here and let's add a background and let me just add a background like this
7:09
so let's add the Alice blue background and let's add a padding of something like 8 pixel
7:18
let me just close this and you can see there is a background color around the images so
7:28
let me just make it a deep color so you can see it properly so let's select the image
7:34
gallery here and let's change the background color to something like this so you can further
7:44
customize the gallery if you want using the CSS code so I hope you have learned how to
7:49
add a image gallery to your blogger website and if you have any doubt regarding this then
7:54
you can ask me in the comment section and if you found this video helpful then make
7:59
sure to hit the like button thank you
