That I'm using is called Contempo light which comes by default with blogger so we need to add this to our website so let's open the website and this is how the website looks right.
Now so this is the Contempo light theme now we need to add this uh interactive hero section to the top of our website and we need to add it only to the homepage so first of all let's go ahead.
And see how this website is structured so let's right click and go to inspect and here we can see we have this header and in the header we have all the content of the header so we need to.
Replace this header with the current design that we have so let's go ahe and do that let's go to our theme let's click on this arrow and let's click on edit HTML and let's find the header tag.
Clicking on this triangle and now let's go ahead and comment this out so we can just type less than exclamation hyphen hyphen and end the comment after the header tag so let's tap hyphen hyphen.
Greater than so everything inside the header is now commented now if we save this and if you go back to our website so let's go ahead and uh reload now we can see that the header is.
Not being displayed anymore so now let's go ahead and add this design to our blogger website but uh right now we don't have any navigation menu over here so I'll.
Just go ahead and simply create a really simple navigation menu over here you can go ahead and add your own navigation menu later but for now I'll just create a simple nav let's give a class name of.
Navigation menu and here just create an anchor tag and for the SF we need to add the link of the homepage so here I'll just type live blogger as the text and uh.
Posts Related:
- Scheduling And Activating Your Workflow
- Best Infographic PowerPoint Slide Design Tutorial Thin Line Infographic Scheme With 6 Options
- Export bulk data to Excel using from database - Oledb .NET E12
Let's go ahead and add the HF so for the
HF we will add the homepage so for that we can go ahead and convert this to an expression so we can just type exp colon SF and here we can add some blogger.Specific code so here we can simply type data colon blog. homepage URL and uh let's add some basic styles to this navigation menu so let's go to the Styles now these are all the styles.
Of the theme so I just go to the end and let's create a comment I just type custom CS and uh let's tap navigation menu and let's set the position to.
Fixed and let's set the top position to zero and let's set the left and right to zero as well so that it extends the whole width of the screen and let's add a padding of 32 pixels and let's add a.
Background color of white and add a z index of let's try 500 because it should be above all the other elements now if you go ahead and save this and if you go to our website and.
Reload now here you can see we have this simple navigation menu and if I go to any of these posts and if I click on this uh anchor tag we'll be taken back to the homepage.
So the link is working all right now since we have added this uh navigation menu as a position of fixed we need to add some padding top to the elements so that the content below the navigation.
Menu is also being displayed so let's right click over here and go to inspect and uh let's take a look at the height of the navigation menu so here if you take a look at the navigation menu we.
Can see that the height is being displayed over here and it is set to 81.5 so let's go ahead and add a padding top of 81 to this page body because in the Page Body we have all the other.
Content of the website so let's target
The Page Body class so here I'll just type do pageor body and let's add a padding top of 81 pixels and let's click on.Save let's go back to our website and reload and now we can see that we have the correct spacing at the top and if you go to the homepage everything is looking all right over here as well so.
Now let's go ahead and add our interactive hero section so let's go back to our theme code and uh let's scroll down and go to our navigation menu and uh let's go outside the.
Navigation menu and let's go ahead and add our content so let's go to our source code and I will leave the link of the source code in the description of this video so let's go to the index.html.
File let's copy all this HTML from here so let's start from the header tag till the end of the header tag so let's copy all of this and let's paste it over here and we need to add all of this inside an.
If condition so that this is displayed only on the homepage so let's T less than b column if and let's add a condition and in the condition we have to type data colon vi. e homepage and.
Let's close the condition after the header tag so here let's tap less than SLB column if and now the next thing we need to do is we need to update the URL of the images so right now it is set to.
Images for slash the image name now we need to upload the image somewhere and get the link and paste it over here so what I will do is I'll just go over here to our uh dashboard and I'll just create.
A page and let's go over here to pages and let's create a new page and here I'll just upload the image so let's click on insert image button and let's click on.
Upload from computer and let's click on this browse button and we have these three images let's select all of them and let's click on open.
And here let's select the size as original size and okay and here we can see all the images have been uploaded so let's go ahead and get the URL now the URL is inside the SF attribute so let's.
Copy this first one which is for 1. jpg so let's copy this and let's paste it over here for images 1. jpg and uh let's go back and let's copy the URL of the next image and this is.
The second one so let's copy this to. jpg and let's paste it over here for the second image and then lastly we have the third image so let's copy the.
HF and uh let's go ahead and paste it over here right now let's go ahead and copy and paste the CSS of our hero section so let's scroll up and go to the.
CSS and uh let's add the the CSS over here so let's go back and go to the sty CSS file and let's copy everything from this line of code till the end and let's paste it over here right now let's go.
Ahead and click on Save and uh let's see how it looks so let's go to the homepage and reload and the hero section is not being displayed so I think we have some.
Problems in the code let's go back and let's scroll down and go to our HTML and uh here in the if condition we have some typo so it should be is homepage so there's a typo over here so let's Ty h o.
M b a g so now let's go ahead and click on Save let's go back to our homepage and reload and now we can see that our interactive hero section is being.
Displayed over here but we have some problems in The Styling since we added this navigation menu the height is not matching correctly so let's go to one of these.
Posts and let's see whether it is being displayed and everything is working all right in the post section so for the homepage we need to change the height of this uh hero section and we need to.
Minus the height of this uh navigation menu over here so let's go back and the height of the navigation menu that we calculated was 81 pixels so let's go over here to the header and uh in the.
Header I'll just go ahead and set the height to calc 100 V put height minus 81 pixels so it will minus the height of the navigation menu and we also need to add a padding top because uh the numbers.
Are not being displayed right now so let's also add a padding top of 81 pixels and then if you go back we also need to change the color of the text right now it is set to some gray color.
We need to change it to black color so here let's go ahead and type color black and let's click on Save let's go back to our homepage and reload and now we can see that.
Everything is working all right and if you scroll down we have the correct height for the interactive her section and uh now let's take a look at the mobile version so let's decrease the.
Width of the browser window and this is how it will look on smaller screens and we have some problems in the small small screen because uh we have set the height to 100 vport height so that's why if you.
Take a look at the scroll bar over here on the right side here we can see that the scroll bar is reaching the end when we go to the end of the hero section and then it is starting again so here when.
We go to the mobile version we need to change the height so right now the height is set to this Cal 100 vut height minus 81 pixels so let's go to the mobile version and uh this is the mobile.
Version so here let's change the height I'll just tap height and let's set it to Auto and let's go ahead and click on Save and let's go back and reload this page we don't have any problems in the.
