Will also leave the link of the source code so you can just copy and paste the code to your websites so let's get started .
right here i'm in the dashboard of my blogger website and you can add this design into a post or a page so if you want to add it inside the page you can.
Just go over here to pages and then click on new page and add the html css and javascript but i will add it inside a post so let's go over here to posts and let's click on new post.
And let's add a title over here so i'll just add animated card right now the first thing we need to do is we need to change this view into the html view so by default it.
Css and let's go to our source code and let's go to the style.css file and let's copy all these css from here we can just copy from this line of code.
Because these styles were for the body so we had added the styles to make this design appear in the center but in our blogger website we don't need to have these lines of code so let's start from.
Here and let's copy it till here and let's paste it inside this style tag right now let's paste the html so let's go outside the style tag.
And let's go back to our source code and let's go to the html file and let's copy the html from here so let's start from here and we'll copy it till the end of this.
Script tag where we are referencing the gsap library which we are using for the animation so let's copy all of this and let's paste it over here inside our blogger post.
Posts Related:
And here we can see these are all the
Elements inside our design so this is the heading you can go ahead and change this to whatever you want and this is the paragraph that we see.Over here and then this is the button you can change the text of the button over here and then here we can see this is the image and the source is set to images.
Forward slash one dot jpg now in our blogger website we don't have this folder called images so we have to first of all upload the image somewhere and get the link and paste it over here so.
I'll just upload the image over here itself so i'll just click on this button called insert image and let's click on upload from computer.
And now let's click on choose files and this is the image that we need so let's click on open and let's select this image and click on select.
And let's select the original size and click on ok so here we can see this is the code for the image and we need to get the link of the image so the link is inside this.
Href attribute so let's copy from here till the end of the link so let's copy it till here and let's paste it over here inside this image source.
Right that's it with the link of the image now we can just delete this code right now the last thing we need to add is the javascript so let's create a script tag over here.
And let's go back to our source code and here in the javascript file we have all the code for the animation so here we are using the gsap library for the animation so here we can see we are.
Creating a gsap timeline and in that we
Are adding these properties so if we add from then it will start from this property which.Is y negative 100 pixels and then it will go to the styles that we have over here so here we can see for the image it goes from y.
Negative 100 pixels to the default which is zero and then we have this duration over here and then we have the easing and you can go ahead and experiment with these.
Values and adjust them to your needs and we are doing the same for all the elements in our card if you want to learn all of this you can watch my.
Previous video all right let's copy all of this from here and let's paste it over here inside the script tag right now let's publish this.
And click on confirm right our post has been published so let's click on view and here we can see we have the animation for all the elements inside.
Our card now we can see we don't have the correct color for these text so here we have black color but here we don't have the black color so let's go back to our post.
And let's add the black color over here so i'll just add it inside the main container so let's type color and set it to black let's update it and let's see.
Whether it works so let's refresh this page and now we can see we have the black color for the text and all the animation is working all right.
So that's basically how you can add an animated card to your blogger website now if you go back to our post here we can see for the button we have an anchor tag so you can just replace this hash.
With any link you want and whenever the user clicks on this get info button they'll be taken to that particular page all right so that's it for this video i will leave the link of the source code.
In the description and 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 then you.
