Started all right here I have logged into my blogger dashboard and if I take a look at the blog right now this is how the website looks right now so I'm using this theme which comes by default with.
Blogger and it is called contemp poite so now let's go ahead and add this hero section to this blogger website so the first thing we need to do is we need to see how this hero section is structured.
Over here right now so this is the Blogger website and if I right click over here and go to inspect here if you take a look at the main container division here we can see we have this.
Header and in the header we have all this content so we need to remove this header from here and we need to add our own hero section in place of this header so let's go back to our theme code and.
Contrl F and type less than header and press enter and here you can see this is the header so you can go ahead and fold this by clicking on this Arrow and this is the header tag and now you.
Can go ahead and delete this code but before that make sure to keep a copy of this as a backup so just copy this and paste it somewhere and I'll just go ahead and delete this header and we need.
To add this hero section at the top so let's go to the theme code and let's scroll up and this is where the page division starts so if you right click over here and go to inspect so if you.
Scroll up here we can see we have the page division now we need to have this hero section before the page division so here before this division with the class of page let's go ahead and type some.
Dummy text so I'll just typ testing and let's click on Save and let's see whether we are in the correct position so let's go back and let's reload this page and now we can see it.
- Usuário padrão ADMIN - Planilha Cadastro de Membros e Controle de DÃzimos.
- System Variables
- Webinar Build a Custom Web App with Make
Says testing so the code is uh being - ID Card Make
Displayed in the correct position now let's go ahead and replace this code with the HTML of our design so let's go back to our source.Code and I will leave the link of the source code in the description of this video now if you go to the HTML file here we can see this is the code for our hero section now here we can see we have.
This nav and we are adding some styles to the nav over here in the CSS now what we need to do is uh we need to add an ID over here for the nav because we may have a nav element inside the theme also.
So we don't want it to clash with the CSS of our design so let's go ahead and add an ID over here and let's set the ID to custom nav and then we have this division with the class of container and.
Uh we may have this container class in the theme as well so let's go and change this to something else so I'll just change the container to my container now before that make sure that you are.
Changing all the instances of containers so I'll just select this container and I'll just press command D or if you're using Windows you can just press crl D and it will select all the instances of.
Container now you can go ahead and go to the start by pressing the left arrow and you can just type my hyphone container and if you scroll down here also we will have the my container class so in this.
Way you can easily go ahead and change all these classes right now let's go ahead and save this and let's go back to the styler CSS file and now here in instead of all the container divisions.
We need to change this to my container so let's press command D to select all these instances and let's go to the starting and let's type my container and now let's select all the nav so let's.
Select all the nav and let's press
Command D to select all the instances for the nav we have an ID of custom nav so let's tap hash custom nav and now we need to make the changes in the Java.JavaScript as well so let's go to the JavaScript file and let's see whether we have the elements so we have the nav so let's select all the nav and let's change this to nav #.
Custom nav right now let's go back to our website and let's see whether everything is working all right and everything is working all.
Right let's take a look at the mobile version and it is also working fine let's go ahead and add this code to our blogger theme code so let's go back to our source code and let's go to the HTML.
File let's copy all this HTML from here till the end of the section and let's paste it over here now here we have this image now instead of this image we need to add the link of our.
Image so right now it is set to images for/ the image name but in the Blogger website we don't have this images folder so we need to store the images somewhere and get the link and paste it over here.
So I'll just go to the Blogger dashboard and let's go to pages and let's create a new page for the images so I already have this page called images so I'll just go over here.
And I just click on this insert image button and let's click on upload from computer and let's click on choose files and here we have this image called hero image so let's select the image and.
Let's click on open and let's select the image and let's click on select and here I'll just select original size and let's click on okay and here we have this link of the.
Image if you don't see this you can just go to the HTML view so let's copy this SF link from here and uh let's go back and let's go over here and let's paste the link over.
Here and now let's go ahead and copy the CSS over here so let's scroll up and here we have the CSS of the theme code so let's go ahead and add a comment over here and let's type.
Custom hero section and let's go back and let's go to the CSS file and let's go ahead and copy all the CSS from here so first of all let's copy this.
Import and I'll just paste it at the beginning of of the CSS so I'll just paste it over here and let's scroll down and let's go back and uh now here we can see we have.
Some Styles added to the body now we don't want to add this body style to the Blogger theme code because it will change the look of the complete page so let's go back and let's copy these two.
Styles from here and let's paste it inside the hero section which is this section with an ID of hero and also this custom nav so let's type nav custom nav and hero.
And let's paste the code over here and now here we have this anchor tag now this will select all the anchor tags in the website so what we will do is here also we'll just type nav H.
Custom nav a here we have the H1 so here also we need to change this to a specific H1 so we need to change it to Hero H1 so so here we can see we have the section with an ID of hero and in.
That we have the H1 so let's type hero H1 right now let's go ahead and copy all the CSS from here so I just copy from this line of code till the end and uh let's paste it over.
Here and now let's paste the JavaScript code so let's go to the end of our theme code and here I'll just create a script tag and here I just paste the code so let's.
Go back and uh I'll just copy all this JavaScript from here and let's paste it over here and uh we also need to paste the link of the gsap library so let's go back to the index.html.
File and let's copy this script tag from here and let's paste it over here right now let's go ahead and save this and let's see how it looks so let's go to the Blogger homepage and.
Let's reload this page and here we can see all the animation and everything is working all right let's take a look at the mobile version and it is also working all right.
Now we have some problems in the button so let's fix that now for the button we don't have the correct color so let's go back let's go to the CSS and uh here we have the.
CSS of the button so here let's type nav custom nav button so it will select the button with the selector and you need to add the selector of the button so let's type nav # custom nav button and let's.
Set the color of the button to White and let's save this and let's go back to the website and let's reload this page and now we can see we have the.
Correct colors for the button if I click on this button now we can see that the button has a different color once it is clicked so let's go ahead and make the color of the clicked button.
To the same white color so let's go back and for that you need to type hero because it is inside the hero section and button column visited and here let's type color of.
White and I you save this and if I go back to our website and if I reload this page here we can see for this light button we have the white color as well.
So let's go back and uh for the light button we have added this class of light so let's go back and uh here here let's type hero button. light column visited and here let's type color of.
