And javascript i have videos on that you can go and check them out and this is also responsive so if i just decrease the width of the screen here we can see this is how the mobile version looks and.
We also have this menu button over here and if i click on that we have the mobile navigation menu displayed over here and if you click on this close button it goes back so this.
Is what we're going to add as the home page of our blogger website so let's get started .
Right here i'm in the dashboard of my blogger website and i'm using this theme called contempo lite it comes by default with blogger over here now if you're using a different theme you can use the.
Same method that i use in this video to customize that theme and you just need to select different classes based on the theme right the first thing we need to do is we need to set.
So for that let's go back to our dashboard and let's click on pages and let's create a new page so let's click on new page i'll just give it a title of home.
And let's type something over here i'll just type testing and let's click on publish and confirm right now if you click on this view.
Button we can see this is how the page looks right now so we want to have this page as the homepage of our website so let's.
Copy this url from here and let's go back to our dashboard and let's go to settings and i scroll down and find an option called custom redirects.
So let's click on this and here you can click on add and for from i'll just type forward slash because this is the homepage and here for two we have to paste the.
Link of our home page so let's paste the Wesdigital
Link over here and we don't need to paste the whole link we just need to paste from forward slash p forward slash home three dot html so i'll just cut.Everything from here and let's click on permanent and okay and let's click on save and now here we can see we have one custom redirect so let's click on this.
And let's click on it once more and here we have two forward slashes so i'll just delete one of them all right let's click on ok and save let's click on it once more and.
Everything looks all right right now let's go to the home page so let's delete this from here and.
Let's press enter and here we can see we are redirected to the custom homepage that we created so now whenever someone goes to the homepage of our website they'll be.
Redirected to this custom homepage that we just created right now the next thing we need to do is we need to change the design of this home page and make it look like this so the first thing we.
Will do is we will remove all the unnecessary elements from here so first of all let's remove this popular post widget from here so let's right click over here and click on inspect.
So here we can see we have this division with the class of popular posts so let's click on this and here is the selector of this element and here if i just type display none.
Now we can see that the popular post widget is not being displayed so let's copy this selector and let's go back to our page so let's go to pages and click on this.
Page
And here we'll just create a style tag and in this style tag we will add all the css so let's paste the selector over here.And here i'll just type display and set it to none and now if i update this and if i go back to the page and if i refresh this page.
Now we can see that the popular post widget is not being displayed over here in the same way let's hide all the other elements so we need to hide all these elements except testing.
So the next thing we will hide is this footer so let's right click over here and click on inspect and this is the footer so here we can see we have the selector of the footer.
So let's copy this and here also i'll just type display of none so that we can see it over here live so i'll just type display of none and now we can see that the footer is.
Not being displayed so let's copy this selector and let's paste it over here inside this page so here i'll just add a comma and i just paste it over here.
Now i'm not going to update this page every time and test it over here we'll just assume that it is working so let's go ahead and hide the next element let's hide this comment so just right click.
Over here and click on inspect and let's scroll up and uh let's go to the parent division so here we have the parent division we have a section with a class of comments.
And we also have an id of comments so let's get the selector here we have the selector comments so i'll just type display of none and now we can see that the comments are.
Hidden so let's copy this selector and let's paste it over here i'll just add a comma and paste it over here all right now the next thing we will do.
Is hide this header so let's right click over here and click on inspect and let's scroll up and so here we can see we have this header.
With the class of centered top container so let's copy this class let's go back to our page and let's paste it over here so i'll just type header and we have a class of.
Centered top container and we'll also hide this element over here in the inspector so here i'll just type display of none right now the next thing we will hide is.
This title so let's scroll down and let's see what is the selector for the title let's just right click over here and.
Inspect so here we can see we have this s3 with the class of post title so let's copy this class from here or we can just copy this selector so i'll just copy this and.
Here also i'll just type display of none and let's go back to the page and i'll just paste it over here i'll just add a comma and paste the selector right now let's go back to our page and.
Let's hide this share button so let's right click over here and inspect so let's scroll up and find the parent division so it is this.
Division with the class of post share buttons so just type display of none over here and we can see that the button has been hidden.
So let's copy this selector and let's paste it over here right now let's go back and let's hide this background image so let's right click over here and click on inspect and.
Here we can see we have bg photo container and bg photo overlay so let's hide both of these so let's copy this selector and let's paste it over here.
And let's add a comma and the next selector that we had was bg photo overlay so i'll just type overlay over here right now let's update this and let's go.
Back to our homepage and let's see whether everything looks all right so let's refresh this page and here we can see everything looks all right we don't have any other elements.
Beside this text right now the next thing we need to do is we need to remove the padding and the margin of all the elements so let's right click over here and click on.
Inspect and first of all here we can see we have this margin for post body so here we can see we have a margin of 1.5 m and two so we have to set the margin to.
Zero so i'll just type margin zero over here and now we can see that the margin has been removed so let's copy this selector and let's go back and paste it over here.
And here i'll just type margin 0 let's go back to our homepage and let's go to the inspector and let's find some other elements so let's start with the post outer.
Container and here we can see we have some padding for the post outer container we can see the green border around the element so let's scroll down and here we can see.
We have a padding of 30 and 40 pixels so we have to set the padding to zero right now let's copy this selector and let's paste it over here in the page we have to create a new block over here.
Because this is for the padding so just have padding zero right let's go back to the inspector right now let's go to the next element and for the post after here we can see.