Now in the previous video i showed you how to host this website online for free using a service called netlify now in this video i'll show you how to add this design to your blogger website so let's.
Get started all right so here i'm in the blogger dashboard and the first thing we will do is create a.
New site now since this is a single page website we don't need to have any posts in our blogger website so let's go ahead and create a new blog and i'll just name the title as my.
Portfolio and let's click on next and let's choose an address let's try my portfolio and let's see.
Whether it is available and it's not available let's add some random numbers all right this is available so let's go ahead and click on save.
This is our website looks right now i don't want to have any of this design we want to have our custom design which is this design right here so for that let's go into.
The theme code so let's click on this arrow and click on edit html now we need to delete all the code of the current theme so the first thing we will do is delete everything inside the.
C data so inside this b skin c data we have all the css of our current theme so let's start from here and let's scroll down and go to the end.
Now this is where the css ends so let's select it till here and let's delete it right now let's delete everything else inside the head section.
So i'll just search for the starting body tag so here we can see this is where the head tag ends now we need to delete everything else inside the head section.
So we can select everything from here Wesdigital
Till this line over here and let's delete it right now the next thing we need to do.Is delete everything inside the body so i'll just fold all of this and i'll just delete this and just create a starting and an ending body tag right now if you click on save.
Here we can see we have this message we did not find any section in your theme so a theme must have at least one b section tag so let's add that so here inside the.
Body tag let's create a b section so just type b colon section and for the section we need to have an id so i'll just type id and just add an id of main.
And let's close the section over here and now let's click on save and now we can see that our theme was successfully updated now the next thing we will do is add all the code.
So let's go to the source code now i will leave the link of the source code in the description of this video so you can go ahead and check that out the first thing we will do is copy.
Everything inside the head so here we have all these lines of code inside the head section so i'll just copy everything from the title till this link right here.
We don't need to copy the link of the style.css file because we're going to just copy and paste the css directly into the theme so i'll just copy this and let's paste it over here inside the.
Head section and here we already have this title by the theme itself so let's delete this line of code all right now the next thing we will do.
Is add all the css so we need to add the
Css inside the b skin tag so inside the c data we will add all the css so let's go back to our source code and let's go to the style.css file and.Let's copy everything from here and let's paste it over here all right our css has been copied now let's copy all the html so here just after.
The b section tag let's paste the html let's go back to our source code and let's go to the html file and let's copy everything from here till the end so i'll just copy it till.
Here now we don't need to copy this line of code for the main.js file because we're just going to copy and paste the javascript directly into our theme.
So let's copy all of this and let's paste it over here right now let's create a script tag for our javascript and here in the script tag i'll just add.
The javascript so let's go back to our source code and let's go to the main.js file and let's copy everything from here and let's paste it over here inside the.
Script tag all right now let's click on save and let's see whether we have any problems and here we can see we have this error on line number 10 so let's go to line.
Number 10 so here we can see it says attribute name cross origin must be followed with an equals character so i'll just remove this and we also need to add ampersand.
Amp semicolon for all the ampersand signs so here we have this ampersand sign so we need to add amp semicolon and we need to do the same over here as well because here also we have this.
Ampersand symbol so let's type amp semicolon all right now let's click on save and we have some more problems we have a problem at line number 898 where it says.
The attribute netlife should be followed by the equals character so let's go to line number 898 and here we can see we had added this netlife attribute to our form now we had.
Added this so that the form should work in our netlify website but for now we can just delete this from here right now let's click on save and let's see whether we have any more issues.
And now we have this problem at line number 919 so let's go to 919 so here we have this ampersand symbol so.
For that we have to type amp semicolon and let's save it and the next issue that we have is at line number 990 so let's scroll down and here we can see at 990 also we have this amp percent symbol.
So let's type amp semicolon and amp semicolon and we can also see this error over here so this is for the less than symbol so wherever we have this less than symbol we have to type.
Ampersand lt semicolon and here also we have this less than symbol so let's type ampersand lt semicolon.
And let's click on save and now we can see that our theme was updated successfully so let's go to our website and let's refresh and let's see how it looks.
So here we can see all the css has been added and we just need to add the images so everything else is working all right now for the images we're going to use a.
Service called cloudinary you can create a free account on cloudenary.com and just log into your cloudinary account and go to media library and here we already have these two demo images.
Uploaded so let's click on upload and let's click on browse and these are all the images that we need in our website so let's select all of this and by the way these images are.
Inside the images folder in our project so let's click on open and we can see all the images have been uploaded to our cloudinary account now we just need to get the link of these.
Images and paste them into our theme code so let's go to our template code and let's scroll down and go to the html so here we have the html and the first thing we need to have is.
The image for the menu icon so let's go to the cloud dna account and let's scroll down and this is the menu icon so let's click on this button to copy the url.
And let's go back and paste it over here and now if you save this and if you go back to our website and if i refresh this page here we can see we have this menu icon.
Image displayed over here and if i click on that everything is working all right so in the same way we need to add all the other images so you can just go back to your theme code.
And go to wherever you have the images so here we can see the next image that we need to have is the close icon so we can just go over here to the cloudinary account.
And search for the close icon so this is a closed icon let's click on copy url and let's paste it over here so in this way you can go ahead and.
Update all the other image links so i'll just do it really quick right so here i have updated the links of all the images so let's click on save now let's go back to our website and.
Let's refresh this page and now here we can see we have this custom design for our website let's click on this menu icon and we have all these menus let's click.