Everything is working all right now let's click on this contact button when we click on this contact button we should be taken to the contact section so let's go to the source code and let's.
Go to this button right here this is the contact button so in the ester if you have to type hash contact so now let's click on the contact button and we get taken to the contact section and then we.
Have some logos over here and these are basically images but what we want is when we click on these images we want to be taken to that particular social media account so let's go to our source code.
And we will have an anchor tag wrapping the images so here let's create an anchor tag and here you can type any link you want so I'll just close this right here after the image we'll do the.
And remove the underlines from the social icons anchor tags so here we will type hero container left social icons a and here we'll type text decoration to none so now we don't have the underlines.
And these are also clickable and all these sections look alright alright now let's move this design to a blogger website so first of all you need to go to blogger.com and you need to have a.
Gmail account to sign in to the blogger website so just click on sign in and use your gmail account to log into the blogger website so I have logged into my blogger account now you have to create a.
New blog so you may have a button to create a new blog over here somewhere but since I have some blogs already so I had to click on the name of my blog and here you have this button called new.
Blog so just click on that and then you can choose a title so let's start my portfolio and then you can choose a domain name so let's type my portfolio and it is not available so let's add.
Posts Related:
Some numbers over here and this blog
Address is available so this is a website my portfolio - eight three nine dot blog spot.com and later if you want to change it to a custom domain you can.Do that easily in blogger com now the next thing is to choose a theme but since we have a custom design it doesn't matter which theme we choose so let's click on create blog and our new.
Blog has been created let's click on View blog and see how it looks right now so this is how a blog looks right now so whatever you see over here is basically the theme that we selected.
So let's go back to our blogger dashboard and the first thing you need to do is go to theme and then click on edit HTML the next thing you need to do is remove everything inside the B skin.
So this is the B skin so you have to remove everything after this open square brackets so just select from here and then scroll down and see where it ends so this is where the B skin ends so.
Select till here and then click on delete now the next thing to do is select from the next line over here the template skin and select till we find the end of our head tag so this is the.
End of the head tag so select till here and delete it the next thing to remove is everything inside the body so select everything inside the body and delete all right so.
All the theme is deleted right now so let's click on save theme and here we have a message called we did not find any section in your theme a theme must have at least one B section tag so let's.
Add a B section tag over here B colon section and we'll also give it an ID of main and we just close it over here now let's save our theme and we don't have any error messages so let's click on.
View blog and we can see our website is
Completely blank now we can add any custom design we want over here so let's add an h1 over here and see how it looks let's click on save theme and let's.Refresh our page and we can see our h1 is displayed over here now it's time for us to add our custom design to our blogger theme so remove the h1 and save the theme now we'll add our.
HTML and JavaScript in the layout so let's go to layout and click on add a gadget and then select HTML / JavaScript and here you to paste your HTML and JavaScript so let's go to our source.
Code and this is our HTML so what we'll do is to make it easier for us to copy everything we'll just create a script tag over here and add everything inside our main J's inside the script tag so.
Let me just add a script tag and I'll just remove this line of code from here and copy everything inside our main dot J's file and paste it inside the script tag so now let's copy everything inside.
The body and we'll paste it inside the gadget so just paste it over here and click on save all right now let's add our CSS so just go to standard CSS and copy everything inside here and we'll go.
To theme and then click on customize and then click on advanced and add your CSS over here inside add CSS and then click on apply to blog and then go back to blogger now let's click on View blog and.
We can see that our design is almost ready but we don't have any images over here so we can see that the CSS and everything is working alright but we don't see any images that's because in.
Our site we don't have any folder called images so if you go to the HTML we can see for the images we have given a source of images / logo dot PNG but in our blogger website we don't have any.
Folder called images so we have to first of all upload all the images to blogger and then add the links of those images to the images inside our design so to upload images we'll just.
Create a page or you can even create a post so just click on new page and we'll just type images over here and here you can add all the images by clicking on this button called insert image so just.
Click on choose files so here are all the images inside our website so just select all of these and click on open and the images are being uploaded now we have to add each image one by one to our.
Page so let's start with this first image and click on add selected and just select the original size and click on OK so our first image has been added that is the address logo now let's go ahead.
And add all the images in the same way so just go to from this blog and you can find all the images so all our images have been uploaded now we have to add the link of these images.
That is the source from here and then copy these to our design so let's go to our dashboard and we'll click on layout and then click on edit we'll just maximize this and wherever we.
Have these images we had to change the source to the source from our uploaded images so the first one is the logo so let's go over here and find the logo so here we can see this is the logo image.
So go over here and copy everything inside the source and paste it over here inside the source of the design so just do the same with all the images inside our design so this is also the logo so.
Just paste the same link over here and then we have the mini button so just go over here and search for the menu button so here's the menu icon dot PNG so copy everything inside the source and paste.
It over here so I'll just speed up the process of me pasting all these links in our image sources .
All right we have updated all the links of our images now let's click on save now let's click on View blog and we can see that our website is looking perfect so we have all the images and everything.
Is working just as we wanted we can even click on these links and everything is working perfectly now the last thing we have over here is that we don't see any animation so if we refresh our page.
We can see that the animation is not working so if you go to the layout and if you edit and we can see that we have added everything we had to add and we have added the link of our AOS library.
And we have even initialized it but it is not working so let's go ahead and delete this and delete all the references to AOS so we'll delete all the data iOS attributes and I don't know.
Why the h2 tag was not closed over here so let's close it right here and remove these three attributes and also the three attributes from here and here and here and we also have some.
Animation over here so let's remove these and let's click on save and see whether everything is still working all right all right the design is working all right.
Now I have written some custom CSS to replicate all the animation that we had using the AOS library so let me just copy that to our blogger website so let's go to theme and go to customize.
And go to advanced and after our CSS we will add some more CSS for the animation and I'll paste the CSS right here and I'd provide the source code of all these in the description below so that you can.
Just copy and paste this to your blogger website and while we are here in the CSS let's also add the link of our phones so let's go to google fonts and the font that we used is Roboto condensed and.
Just click on that and we had used the regular font and the bold 700 now go to M bit and click on import and just copy this line of code from here and paste it inside the CSS on the first line alright.