Then we have all these details over here and we also have this hover effect now i have shown you how to design this from scratch using html and css in the previous video so if you want to learn.
How to design this from scratch you can watch that video i will leave the link in the description of this video now in this video we're just going to add this design to our blogger website and i will.
Also leave the link of the source code in the description of this video so you can just go ahead and copy and paste the code to your websites so let's get started.
all right here i'm in the dashboard of my blogger website and you can add this design into a post or a page let's just.
Add it inside a post so let's click on new post if you want to add it inside a page you can just create a new page over here by going to pages and clicking on new page but here i'll just click on new.
It'll be in the compose view so you have to click on this button and click on the html view now here we can add the html and the css so let's add the css first so i'll just.
Create a style tag over here and let's close it over here and let's go to our source code and i will leave the link of the source code in the description so let's go to.
Style.css file and i'll just copy all the css from here and let's go back and paste it over here inside the style tag all right now let's add the html so.
Let's go outside the style tag and here let's add the html let's go back to our source code and let's go to the index.html file and let's copy.
Everything inside the body and i'll just paste it over here inside the blogger post all right now the next thing we need to.
Do is update the source of the video so Wesdigital
Right now it is set to videos forward slash network dot mp4 and we don't have any folder called videos in our blogger website and we also don't have this mp4.File so first of all you have to upload the video somewhere and get the link of the video and paste it over here now in blogger you have this option called insert video so let's try.
That so let's click on insert video and upload from computer and let's click on choose a video and here we can see i have this video called network.mp4.
So this is the same video that we have for our design so let's click on open and i'll just select the default settings and click on ok now here we can see that the video has.
Been uploaded but it is uploaded as an object so we cannot find the link of the video if you go to the compose view here we can see that the video is displayed over here we can play it in.
The post if we publish this post but we cannot get the link of this video so that's why we have to find a different way to upload the videos so let's delete this video from here.
So i'm going to use this service called cloudinary.com so you can just create a free account on this website and just log in with the account information and just go to this tab called media.
Library now cloudnary is basically a media management service so you can upload your photos and videos on this website and then you can access them from any other website so here we can.
See we have these two images uploaded by default so these are some sample images and if i click on this options button we can see we have all these options over here we can also.
Edit the image analyze the image and
Here we have this option called copy url and we also have the option of downloading the image and adding to a collection.And then deleting the image now the option that we need is this one called copy url you can also copy the url from this button right here called copy url so let's upload our video over here so.
I'll just click on this button called upload and let's click on browse and here we have our video so let's click on this video and click on open.
Right now we can see that the video has been uploaded so let's click on copy url and the url has been copied so let's go back to our blogger post and i'll just paste the url over here.
All right now let's click on publish and confirm all right our post has been published so let's click on weave and we can see that our card is displayed over here and we.
Also have this video background and everything is working all right so that's basically how you add an element with a video background to your blogger website now if you want to learn how to.
Design this from scratch using html and css you can watch my previous video i will leave the link in the description of this video and i will also leave the link of the source code so that you can.
Just copy and paste the code alright so that's it for this video if you have any doubts you can ask in the comments below and if you like this video please click on the like button.
And subscribe to this channel to get the latest video updates thanks a lot for watching have a nice day .