now the first thing we will do is we will design it using html and css and then we will add it to our blogger website so here i have opened up this.
Folder called download as pdf and i just opened it with vs code and let's start by creating the necessary files so let's create a new file.
And i'll just name it index.html and we'll also create a css file and we'll just name it style.css and we also need to have a javascript file so let's create a new file and i'll.
Just name it main.js let's start with the index.html file now in vs code you have the shortcut where you can just press exclamation and press tab.
And you'll have this basic html5 code right here i will link the css file so i'll just type link and here in the htf i'll just type style.css and let's also link our javascript file over here so.
And let's create a button for the download so i'll just create a button and i'll just give it a class of download button in the button i'll just have a text of.
Download as pdf right now let's open this in our browser so i have this extension called live server installed in vs code so you can just right click over here in.
The html and click on open with live server and here we can see we have this design open in our browser now let's style this so let's go to style.css.
And first of all let's set the font family to roboto so just have font family and set it to roboto right now let's style the download.
Button so i'll just tap dot download button and first of all let's add a padding of 12 pixels top and bottom and 24 pixels left and right.
And we'll set the font size to 16 pixels Wesdigital
And let's set the text transform to uppercase and we'll also set the font weight to bold.And we will set the text color to white and now let's set the background color so i'll just add a linear gradient background color so i'll just type.
Linear gradient and i'll just type two right so it will move from the left to the right and for the first color i'll just type 40a 7fc and then for the next color i'll just.
Have 056cc0 right now we can see we have this background color now let's also remove the border so i'll just add border and i'll just set it to none.
And we'll also add rounded corners so i'll just type border radius and i'll just set it to 8 pixels and let's also add a margin of 8 pixels top and bottom and 24 pixels left and.
Right and we'll also add a box shadow so i'll just a box shadow and we'll set the values to 0 6 pixels 20 pixels negative 8 pixels rgba 0 0 0 and 0.5 and we'll also set the cursor to pointer so when.
We hover over this we have this pointer now when we hover over this we'll also have an animation so let's create a hover state so i'll just type download button colon hover.
And we'll set transform translate y and we'll just set it to negative four pixels and we'll also add a transition so that we'll have smooth animation so i'll just.
Stop transition and i'll just set all to 500 milliseconds is and now when we hover over this we have this animation.
Or that's it with the styling now let's
Write the code to download this page as a pdf now i'm going to show you two different methods of doing this now the first method i'm going to show you is.Using the built-in method that we have in javascript so let's go to our main.js file and let's reference the download button so if you go back to our index.html file here we can see we have.
This class of download button so let's reference that over here so i'll just type const download button equals document dot query selector.
And here i'll just type download button now the next thing we have to do is we have to add an image listener to this download button so let's type download button dot add event listener.
And we will listen for the click event and let's create a function over here and here you have to type window dot print right now let's go to our website and.
Let's click on this download as pdf button and here we can see we have the option of printing it as pdf so you can just select pdf from here and just click on.
Print and here we have the option of saving it so i'll just save it as my website and in this way you can download your.
Web page as a pdf and this is the page that i just downloaded and here you can see we have the heading but we have a different color for this download button now this can happen a lot of times some.
Of the elements will not be displayed correctly and that depends on how the browser handles it and this is how our chrome browser has downloaded it now this is the pdf that i downloaded.
Using the firefox browser and this is how it looks we have the background color but we have a different color for the text so every browser will have different.
Ways of saving it all right now the next thing we will do is we will add this button to our blogger website and there i will also show you a different method of downloading this as a pdf right here.
I'm in the dashboard of my blogger website and let's click on view blog and this is how our website looks right now let's add the download button to a post so let's click on this post.
And here i'll just add the html the css and the javascript so first of all you have to make sure that you're in the html view so just click on this button and go to the html view.
All right now let's go to our source code and let's copy this html from here so i'll just copy this button and let's paste it over here and let's also paste the css so let's go.
Over here to style.css and i'll just copy everything from here and let's paste it over here and i'll just create a style tag.
And in that i'll just paste the css all right now let's add the javascript so let's go back and let's go to the main.js file and i'll just copy all this code from here.
And let's go to the end and here i'll just create a script tag and here i'll just paste the code all right now let's click on update and let's go back and let's open the.
Post and now you can see we have this download button and let's click on this button and here we can see we have the preview.
Of the post and this is how it will look when we download it as a pdf now here in the destination you have to select as pdf and just click on print.
And let's save it as my website three and here's the pdf that i just downloaded right now the next thing we will do is.
We will add this download as pdf button to all the pages in our website so let's close this and let's go back to our post and i'll just delete this code from here so i'll just delete this html and css.
And also the script and let's click on update right now let's go to theme and here i am using this theme called contempo lite so let's click on this button and go to.
Edit html now here in this theme code we'll just copy the css the html and the javascript so let's scroll down and go to the css let's go to the end of the theme css.
All right this is where the css ends and here i'll just create a comment and i'll just type download button.
And let's go back to our source code and let's go to style.css file and i'll just copy all this code from here and let's paste it over here now here we will add some more code we.
Will fix this button to the bottom left corner of the screen so here we'll just type position fixed and we'll set the left position to 80 pixels and the bottom position to 40 pixels and we'll.
Also set the z index to a higher value so that it will stay above all the other elements so i'll just set the z index to 200 right now let's scroll down and go to the bottom of the code and here we.
Will add the html and the javascript so i'll just make some space over here and let's go to our source code and let's go to the html file and i'll just copy this button.
And i'll space it over here and now let's create a script tag and here in the script tag i just pasted the javascript so let's go back and let's go to the main.js file.