Your blogger website and i will also leave the link of the source code so you can just go ahead and copy and paste the code to your websites so let's get started.
right here i'm in the dashboard of my blogger website and we can add this design into a post or a page let's add.
It inside a post so let's click on new post and for the title i'll just type our courses and now here we can add the code now the.
First thing you have to do is go into the html view so if it is in the compose view just click on this button and click on html view and here we can add the html the css and.
The javascript so first of all let's add the css so let's create a style tag and in this style tag we will add the css so let's go to our source code.
Style tag right now let's go ahead and paste the html so i'll just make some space over here after the style tag and let's go back to our source code and.
Let's go to html file and let's copy this line of code inside the body so let's copy this and let's paste it over here and the last thing we need to add is the.
Javascript so let's create a script tag and let's go back to our source code and let's go to the main.js file and let's copy all of this javascript from here.
And let's paste it over here inside the script tag and now the next thing we need to do is we need to upload the images and get the link of the images and paste it over.
Here so here we can see for the thumbnail we have images for slash course three dot png now we don't have this folder called images in our blogger website so we had.
To first of all upload the image Wesdigital
Somewhere and get the link and paste it over here and here we can see inside this array we have all these details of the course.So this is a url of the course we have the title the thumbnail image category description price and duration and if you go back to the design here we can see we have all those details over here.
So whatever we have over here will be added inside the design so if you want to change anything you can go ahead and change it over here and if you want to add new courses you can just go ahead.
And copy and paste this object and paste it down here and if you want to remove any of these courses you can just delete one of these objects from here right now let's go ahead and upload the.
Images so i'll just upload it over here itself and let's get the link and paste it over here inside the array so let's click on this button called insert image let's click on upload from.
Computer and let's click on choose files and we have all these four cores thumbnails let's select all of these and let's click on open.
And let's select all of these and click on select and let's select original size and let's click on ok and here we can see we have all the.
Images uploaded over here now we have to get the link of these images and paste it over here inside the array so first of all let me just arrange this code a little bit.
So here we can see we have all these four images over here now we don't know which image is which so for that we have to go to the compose view so let's click on this button and let's click on.
Compose
View and here we can see the first image is this one right here so this is the first image then we have the second image the third.Image so all these images are in order so let's go back to the html view and let's get the link of the first image.
So this is the first image link so let's copy this from here till the end and let's paste it in the first thumbnail value.
Right now let's select the second image so this is the second image let's get this link and let's paste it over here in the second course thumbnail.
So let's just replace this with the link and then we have a third image let's get the link and let's paste it over here in the third thumbnail.
And then lastly we have the fourth image and let's get the link and let's paste it over here in the fourth thumbnail.
Value right now let's go ahead and delete all these images and now let's click on publish and confirm.
Right here we can see our post has been published let's click on vive and here we can see that our courses are displayed over here but we have some problems in the styling so let's fix it.
First of all let's right click over here and click on inspect and the first thing we need to fix is that we don't have the correct width for these images.
So here we can see this is the image and if we take a look at the styles over here we can see that for the image we already have some height set to inherit and we also have a max width set over.
Here by the theme so we have to remove these two styles from here so this is our selector so here i'll just type height and set it to unset.
And also max width and set it to unset and now we can see we have the correct width for the image and the next thing we need to improve is the padding over here.
For this category if we take a look at the original design we don't have that much padding so let's take a look at the category and let's see what are the styles.
Applied over here so scroll down and here we can see we have a line of code line height and it is set to 1.6 m.
And if i remove that we have the correct padding so we have to add the correct line height for the category so this is our selector and here if i just type line.
Height and set it to 1 we'll have the correct padding so let's fix these two issues let's go back to our post and let's go to the image and here we.
Need to type height and set it to unset and also max width and set it to unset and for the category we have to set the line height so let's type line height and set it to 1..
Right now let's update this and let's go back to our post and let's refresh this page and now we can see we have the correct styling.
Let's also check the mobile version and this is the ipad version let's also check the mobile version and this is the mobile version so everything looks all right.
Now you can go ahead and add the links of your courses over here so if you go back to your post and if you go to the array here we can see we have this url and if.
You add a url over here so let's test this url let's type http google.com and let's update this and let's go back to our post and let's refresh this page.
And now if i click on the first course we are taken to the google home page so that's basically how you add this design to your blogger website alright so that's it for this video i.
Will leave the link of the source code in the description 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 .