Here and we also have this author and if i refresh this page we can see we have a new code displayed over here and we also have the author displayed over here and we also have.
This new code button and if i click on that we have a new code displayed over here so this is how it works now if you want to learn how to create this from scratch.
Using html css and javascript i have created videos on that you can go ahead and watch them i will leave the link in the description of this video so let's get started.
all right this is the blogger website where we're going to add the random code generator so let's go to the dashboard of our blogger website and here we can.
See in the theme i have used this theme called notable light and it is a theme that comes by default with blogger so if you scroll down here you can see the notable light theme.
Pages and let's create a new page and here in the title i'll just type random code generator and here first of all you have to make.
Sure that you are in the html view so if i click on this button we can see there are two views over here by default it will be in the compose view so you have to go over here to this button and click.
On html view because we're going to add html css and javascript to this page so i'll just delete this from here and let's add the html first so let's go to the source code and i will leave the.
Link of the source code in the description of this video all right let's copy everything inside the body so i'll just copy everything from here till here.
And let's go back to our page and i'll just paste it over here so that's it with our html now let's add the javascript so i'll just create a script tag over here.
And here in the script tag i will add Wesdigital
The javascript so let's go back to our source code and let's go to the main.js file and i'll just copy everything from here.And let's paste it over here so that's it with the html and the javascript now let's add the css so here i'll just create a style tag and let's go back to our source code and.
Let's go to the style.css file and i'll just copy everything from this line of code because we don't want to change the styles of the body inside the page.
So i'll just copy everything from here till the end and let's paste it inside the style tag right now let's publish this and let's see whether it works all right.
Let's click on confirm and let's click on view page and here we can see our random chord generator is being displayed and we need to make some changes in the css but it.
Is working all right if we click on this new code button we can see that a new code is being displayed over here so everything is working all right and.
Even if you refresh this page we can see a new code is being displayed over here now let's make some changes to the css first of all we will just remove this sidebar from here.
So let's right click over here and let's click on inspect and if you scroll up we can see that this is a division with a class of post sidebar.
So we can just add a display of none so i'll just type display none and now we can see that the sidebar is not being displayed now here we can see on the right we have.
A lot of padding so let's click on the
Post body i think we have the padding inside the post body container so here we can see we have a padding.Right of 290 pixels and if i just set it to zero pixels then we can see that everything works all right so let's add these two things to our css so i'll just copy this selector.
From here and let's go back to our page and let's add the selector over here and here i'll just type padding right and we set it to zero.
And if we go back to our inspector here we can see for the post sidebar we have this selector so i'll just copy this from here.
And let's paste it over here and here i'll just type display of none and let's click on update and let's refresh this page and here we can see that the styles are.
Being applied now the last thing we need to change is this new code button now this button should not be fixed over here at the bottom we will change the position to absolute so that it will be.
Positioned relative to this container so let's right click over here and click on inspect and here we can see the new code button and here i'll just set the position to.
Absolute and i'll just remove this bottom position from here now here we can see we have this new code button displayed over here we can.
Also add a margin top so let's type margin top and i'll just set it to 40 pixels and that looks alright so let's go back.
To our page and let's make changes to the css so let's scroll down and let's go to the button and here i'll just change the position to.
Absolute and we'll just remove this bottom position from here and we will add a margin top of 40 pixels.
And let's click on update and let's go back to our web page and let's refresh this page and we can see that everything works all right but when we load the code we don't.
Have the correct width for this button so we will set a minimum width for this button so it will always have at least that amount of width so let's go back and i'll just set a min width of.
200 pixels and let's click on update now let's go back and let's refresh this page and now we don't have any problems in.
Our code generator so everything works all right so that's basically how you add a random code generator to your blogger website now if you want to learn how to create.
This from scratch using html css and javascript i have videos on that you can go ahead and check them out in the description of this video 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.