started all right here I have logged into my blogger dashboard and uh we can add this uh effect to a post or a page let's add it to a post so let's go ahead.
And add it to this post right here so let's open this post and uh when you open the post this is how it will look so you have to go ahead and click on this icon and click.
On HTML View and now here you can add the HTML CSS and JavaScript code so let's go to our source code and uh here we can see this is the HTML and here we have the CSS and here we have the.
JavaScript so first of all let's add the CSS so let's click on this Styler CSS file and let's copy this CSS from here now if you take a look at this we can see that these are all the CSS of the.
To the HTML file here we can see we have all this HTML code but this is the code that we need so this division with the class of revealed area and this is going to give us the spotlight effect so let's.
Go ahead and copy the CSS of revealed area so let's copy this and uh let's create a style tag over here and let's past the CSS over here and the next thing we need to do is we need to add.
The HTML so in the HTML we have this division so let's copy this Division and let's paste it over here and then lastly we need to add the JavaScript so let's create cre a script tag for.
That and let's go back to our source code and let's go to the main.js file and let's go ahead and copy all of this and let's paste it over here now here are some things that you can change so.
This is the size of the circle and uh then you can change the transparency and the background color so you can change all of these over here and you also have to change the values in the CSS right.
Posts Related:
- Python Part 17b - VBA using pywin32 Office
- Design Apple Website Hamburger Menu Animation Using HTML, CSS & JS Part 2 BlogSpot
- Create An Excel Delivery Application With Mobile App Sync, Scheduler & Dashboard FREE DOWNLOAD Office
Here so we have the same - ID Card Make
Values over here in the CSS and the main rojs file so once you have made the changes you can go ahead and click on update and let's go ahead and view this.Page so this was the page so let's click on view and here we have the spotlight effect but uh here the search icon is being displayed outside so let's scroll.
Down and uh here also we can see that we have some problems we have this paragraph being displayed so let's go ahead and fix that now for that you have to add a z index.
To our revealed area so that it is above all the other elements so let's go ahead and open this post and here let's add a z index and let's set the value to 900 and let's click on.
Update and let's go back to our post and let's reload this page and now we can see that the search icon is not being displayed so so the spotlight effect is working all right we.
Don't have any problems and then you can go ahead and uh click on any of these links so you can click on this uh logo and now you can see we are taken to the homepage and.
We don't have the spotlight effect over here but if you go to this particular post here we have the spotlight effect so that's basically how you can add the spotlight effect 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 I will leave the link of of the source code in the description of this video so 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
