Print as well so if you go back to our source code here we can see that for the print we are setting the display of header and download button to none and we are also setting the color of the H1.
To Red so that's why if you go back here we can see we have this black color but if I click on download as PDF we have red color over here for the H1 so in this video I'm going to show you how to.
Add this download S PDF button to your blogger website so let's get started right here I have logged into my.
Blogger dashboard and uh we can can add this button to any of our posts so let's add it to one of these posts let's add it to the first post and this is the content of the post.
Need to add our button so I'll just go ahead and add the HTML right here so let's go back to our source code now here if you go to the HTML file we can see that we have this simple button tag.
With this class download BTN and we have this text download as PDF so let's copy this and let's paste it over here and then we need to add the CSS so I'll just go over here to the top and let's create.
A style tag and in this we will add the CSS so let's go back to our source code and in the CSS this is the CSS you need to copy so you can just go ahead and pause the.
Video and copy this CSS or you can add your your own CSS and let's go ahead and paste it over here and now if you want to edit the print page then you can go ahead and uh copy this CSS as well so.
Let's copy this and let's paste it over here and here instead of header and all these things we need to add the things that we have in our post and I'll just remove this H1 color from here so for.
Posts Related:
- How To Design An Onboarding Screen Using HTML, CSS & JavaScript - Part 3 BlogSpot
- Ramadan Social Media Post 2020 Templates Free Download In PSD Sheri Sk
- DAX for Power BI Part 2.3 - The Switch Function
Now I'll just remove these things I'll - ID Card Make
Just remove everything inside this we will add this code later and then the last thing we need to do is we need to add the JavaScript so let's create a.Script tag over here and let's go back to our source code and let's copy this JavaScript from here and let's paste it over here and now you can go ahead and click on.
Update and uh let's open this post and this is how the post looks but if you scroll down we have this download as PDF button and if I click on that we have this print preview displayed over.
Here and now let's go ahead and hide some of these things so I'll just keep the header and let's hide this download S PDF button and also this comments section and also this uh popular post.
Section and we'll also hide this sidebar and also this footer so let's go ahead and see what are the classes and the IDS of all these elements so let's right click over here and go to inspect and.
Let's scroll up and let's find the container division so for the comments we have this section with classes comments and embed and with an ID of comments so let's target this so.
Let's go back to our post and here let's tap hash comments and display none and let's go back and for this download.
As PDF button we have this class of download BTN so let's add that as well do download BTN and then the next thing is this.
Popular post widget so let's right click over here and go to inspect and let's find the container division so it is this division right here and it has this ID of popular post we can Target this.
Main popular posts so let's copy this
Selector and uh let's paste it over here and then the next thing is the footer so here we have the footer so let's right click and go to inspect and here we have.This footer so we can just Target this footer element so let's go ahead and type footer and then the last thing is uh the sidebar so right now the sidebar is not being displayed but if you click.
On this download S PDF button and if you scroll down here we have the sidebar displayed so let's go ahead and zoom out our page and now we can see that the sidebar is being displayed so let's take.
A look at the container division so for the sidebar we have this aside with a class of sidebar container so let's target this sidebar container so let's type dot sidebar.
Container and I think that's basically it so let's go ahead and update let's go back to our post and uh let's reload this page and now scroll down and let's click.
On this download as PDF button and now we have the header and this content displayed over here if you scroll down we can see that everything else is hidden and now if you click on save it.
Will be saved as a PDF file so if you go to the end of this name we can see that it says PDF so that's basically how you can add this download as PDF button button 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 nice day oh.
