[Applause] [Music] started now this design is completely responsive so if you decrease the width of the browser window this is how it.
Will look on a tablet and this is how it will look on smartphones so here I have already logged into my blogger dashboard and uh let's add this design to a post so we.
Can simply go ahead and click on new post and uh let's add the title of the post over here so I just type our pricing and the next thing you need to do is you need to go over here to this.
Button and uh change compose view to HTML view so click on this and click on HTML View and now you'll be able to add your HTML CSS and JavaScript code to your posts so first of all let's add the.
Paste it over here and I'll just make sure to delete The Styling for the body and everything so that we don't have any problems with the theme right now let's go ahead and add the HTML so let's go.
Outside the style tag and let's go back to our source code let's go to the HTML file and let's copy this HTML from here and let's paste it over here so with that we have added all our code to our.
Post now here if you go back to your HTML file here we can see that all the things that you can change are displayed over here so here we have the H2 which is right here on the left side and then.
We have the subtext for that and then if you scroll down we have the plan name and the price per month so you can change all of these over here and then we have the features of the plan.
Displayed over here so you can change all these list items over here you can add new ones by just duplicating this and adding your text over here you can also delete any of these list items and.
Posts Related:
- Everyone has the power to automate with Microsoft Power Automate
- How to AUTOMATICALLY Fill PDF Forms Using Microsoft Excel in 1 CLICK
- How To Design A Responsive Portfolio Website Using HTML, CSS & JavaScript Part 4 BlogSpot
The same goes with the other plan as
Well now here we can see there are two buttons now you can add any link over here here so just replace this hash with the link you want the same for this.Button right here so once you have made all the changes you can go ahead and uh click on publish and confirm and our post has been published let's click on view and here we can see.
Our pricing table is being displayed for the rest version we have some problems in the design let's take a look at the other versions so this is the tablet version and it looks all right let's.
Take a look at the mobile version and it also looks all right we have problems in the desktop version now the issue is that we don't have much width for this content to fit in in the dtop version.
Because of the styling of the theme so in the post the theme has set some Max width now here in our design we have all this space to add this content so let's make some changes over here what we can.
Do is we can simply change the font size of some of these elements so let's go over here to this heading and for the hed2 let's change the font size a little bit let's decrease it to let's try 30.
Pixels and now that looks all right now let's go ahead and change the font size of this price so it is inside the right Division and we have the card and here we have the price so right now the price.
Is set to font of 60 let's change this to 40 and now I think that looks all right now we can also change the gap between these elements and we can decrease it a.
Little bit so let's go over here to right and uh here we can see that we have a gap of 30 pixels let's decrease it to let's try 10.
Pixels and uh now I think everything
Looks all right so let's go ahead and make these changes in our CSS so let's go back to our post and let's go to the CSS and here for the right division.Let's change the Gap to 10 pixels let's see what else we had changed so we had changed the font size of this heading so here for the H2 let's change this to 30 and then we have changed the font.
Size of the price so let's go over here to price and let's change this to 40 and let's update this let's go back to our post and reload and now we can see everything.
Looks all right so that's basically how you can add this custom pricing table design to your blogger website all right so that's basically for this video I will leave the link of the source code.
In the description of this video and 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 [Music] w [Music].
