The posts are being displayed over here now that is not always you want to have sometimes you need to have a static page as the home page you may need to display some of your products or.
Some of the other information that you want on the home page and this list of blog posts may not be that important for you on the home page so in that case you need to change the.
Home page to a static page that's what we're gonna do in this video so let's get started now what we're going to do is we're.
Going to redirect the home page to another page that we create in our blogger website now when someone goes to this url over here we will redirect.
Our blogger dashboard and let's go to pages and let's create a new page now you have to select the title that you want to have as the url of.
The home page so we'll just type home over here now we'll have this page as the home page i'm not going to add the home page design over here i'll just create a.
Simple text and i'll just type home page so that will be able to understand that the home page is displayed so if you want you can go ahead and click on.
Html view and create your own custom design for the homepage for now i'll just have this text over here and maybe i'll just create this as a heading.
Right so now we're going to make this as the home page of our website so let's go over here to options and we'll just click on do not allow or hide existing comments.
Posts Related:
And then click on publish
And here we can see our home page has been created so let's go ahead and view the page this is how it looks below we also have the popular post.Displayed over here so we'll remove this from our homepage and we also want to remove this date and this title but before that let's go ahead and.
Redirect our main page to this new homepage that we created so for that you have to go over here to blogger dashboard and go to settings and then scroll down and go to.
Errors and redirects and then click on custom redirects and then click on add and here you have to add the links of the main page and the.
Homepage that you created but you don't have to add the whole link over here you can just add forward slash for the home page and for this we can just.
Copy this from here and add it over here and then click on permanent and then click on ok and then just go ahead and click on save or we can see that our settings have.
Been updated so here we can see it says one item let's click on that and we have two forward slashes over here let's delete one.
And click on okay save right now we have the custom redirects from the main page to the custom home page let's go back to our website and refresh.
This page and we can see that the main page is being redirected to our custom home page let's delete this and refresh it once more.
You can see it goes back to the custom
Home page now let's go ahead and hide some of these elements so we have to hide this popular post widget from here.And we also have to hide the date and this title so for that we will add a body class to our blogger website so if i right click over here and click.
On inspect and if i scroll up we can see that for the body tag we have some classes right now we have class of item view and the version number so these are the two.
Classes that we have right now for this static home page now we'll add a specific class to the static homepage so that when we are on this home page we will.
Have that class but when we are on any other page we won't have that class so for that let's go back to our blogger dashboard and go to theme.
And we'll click on this arrow and click on edit html and let's scroll down and here when we go to the start of the body we can see we have.
Some b class over here and we have a condition and if the condition is true we have this name which is going to be added as the class.
So let's go ahead and add our own custom b class over here so we'll just type less than b colon class and we have to add a condition so i'll just type.
O cond equals and i'll just close this over here and in the condition we have to check whether the current url is this url right here so here we will.
Type data colon block dot url and then we'll type equals equals and we'll just copy this page url from here.
And let's paste it over here inside double quotes right now we are checking whether the current blog url is this right here and if it's the case.
Then we have to add a custom class so let's type name and we'll just add a class of static homepage and let's save it.
So let's refresh our page and let's right click and inspect and if you go to the body we can see we have this class called static home page.
And if we go to any other posts so let's go over here to the first post and right click over here and inspect now you can see that the static home page class is not here in the body.
So the body only has the static home page when we are on the custom homepage right here so now we can use this class to hide all the elements that we don't want.
So let's go back to our theme code and let's go to the css so this is all the css let's go to the end of the css and here let's add our own custom css so i'll just add a comment we'll just.
Type static home page and here we'll type body dot static homepage which is the class that's being added when we are on the static homepage so here we.
Need to hide all the elements that we don't need so let's go to the post and see what are the classes so i'll just right click over here and.
Inspect and here we can see for popular posts we have this id called popular post one so we'll target that so here i will just type hash because.
It's an id i'll just type popular posts one and we'll just type display none and let's save it and let's refresh our page and here we can see on the custom.
Homepage we don't have the popular posts and let's go to another post and here we can see we have these popular posts but on the.
Custom homepage we don't have the popular post and let's also delete these two elements from here so right click and inspect this one has a class called post.
Header and the s3 has a class called post title so let's target them let's go to the css and here i'll just add a comma and i'll just.
Copy this and paste it over here and i will just type post header and comma and paste it over here and post title right now let's save it and see whether.
It works and let's refresh our page and we can see that all the elements that we don't need are hidden and.
We just have homepage displayed over here now you can go ahead and add your own custom html and css to create your own custom static homepage as you need now the next.
Thing we need to do is we need to have a page that displays all the posts because our main page is now redirecting to this custom homepage and now we cannot access all the other.
Posts but in blogger if you type the main url forward slash index.html you will find the list of all the posts so we'll use this page to display all.
The posts so let's copy this url from here and let's go back to our page so we'll go to pages and click on home and here we can add a link so i'll just.