[Music] started right here I have logged into my blogger dashboard and uh we can add this Des assign to a post or a page let's add it inside a post so let's go over here.
To posts and let's click on new post and here for the title I'll just add a title I'll just type pulse animation for now you can add your own title and the next thing you need to do.
Is you need to change this into the HTML view so by default it will be in the compos view so click on this button and click on HTML view now here you can add your HTML CSS and JavaScript code so.
First of all let's add the CSS I'll just create a style tag for that now let's go to our source code and let's copy the CSS from here so this is our CSS so I'll just copy everything from this line of.
Here and let's paste it over here so I just go outside the style tag and I'll just paste it over here now we can see that we have this image over here and uh the source is set to imagesking.
Fisher.jpg but right now in our blogger website we don't have this image so we need to first of all upload the image I just go ahead and uh insert the image right here so let's click on this insert.
Image button and let's click on upload from computer now here we can see I have this image called King fisher.jpg so I'll just drag and drop the image right here.
And let's click on original size and uh let's set the alignment as none and let's click on okay and here we can see that the image was uploaded and uh we just need to have the link of the image.
So I'll just copy the link from here so it is inside the srf attribute so let's copy this link and I'll just paste it right here and now we can go ahead and delete.
Posts Related:
- Resiliency & Grit for Changing Times Office
- Word Advanced Tutorial
- DAX for Power BI Part 2.3 - The Switch Function
This so we have the link of the image
And here we can see we have the animation so you can change these to whatever you want so if you go to our source code here we can see in the.Styler CSS file we have the animation so right now it is set to scale 1 to 1.5 so if we just change this to something else so for example if I just change this to.
2.5 this is how the pulse will look so in this way you can go ahead and customize this animation to your needs and here there is uh the duration of the animation you can change this to.
Whatever you want as well right now it is set to 3 seconds and all these pulse divisions will be running the animation after 1 second each and then we have the color of the pulse so you can change.
This to whatever you want so once you made all the changes you can go ahead and publish your post so now let's go ahead and click on publish and.
Confirm and the post was published let's click on view and here we can see that the pulse animation is working but we have some problems in the CSS so the image is not.
Being displayed correctly so let's right click over here and go to inspect and let's see what's the problem so here we have the image and here we can see that for the post body image.
There is a height set to inherit by the theme itself and if we remove that we can see that the image is displayed correctly so if we scroll down here we can see that for the round image that we.
Have in our design so if we go to the HTML file here we can see we have this class of round image and for that we have this height of 150 pixels but it is being overridden by this uh theme CSS so.
What we can do is we can add an
Important over here and now we can see that we have the correct height for the image so let's go back to our.Post and uh here for the height let's add an important and and uh there is one more thing we need to do so let's reload this now what we will do is we will add some.
Margin above and below this image so right now it is touching this date over here so let's go ahead and uh take a look at the HTML so right now the HTML has this division with the class of.
Pulse container so let's go ahead and add some margin over here so let's tap margin of 30 pixels top and bottom zero for left and.
Right and let's reload and now we can see that we have this margin over here at the top I think we need to add some more margin top so I'll just inspect this uh element so.
Let's go to pulse container and uh let's goad and add a margin top of let's try 50 pixels or I think 60 looks all right let's also bring this to the center so we can just add a display of flex and.
Justify content to the center and it'll be positioned in the center so let's copy these three lines of CSS and let's go back and paste it over here and let's.
Update and uh now we can see everything looks all right so that's basically how you can add this pulse animation to your blogger website all right so that's basically 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.
