To the homepage so let's get started now what we're going to do is we're.
Going to create a new page and we're going to redirect the homepage to that custom page and we will add this Custom Design to that page so let's go over here to pages and let's create a new.
Page so let's click on new page and here for the title I'll just tap main page and here I'll just tap testing for now and uh let's click on this options drop down and uh let's select do not.
Allow comments and let's click on publish and confirm and now we can see this page has been created so let's view this page and this is how this page looks right now.
Blogger settings and let's scroll down and here we have this option called errors and redirects so let's click on custom r redirects and here let's add a new redirect and we will go from the.
Homepage to this page right here so I'll just copy this part of the URL and let's paste it over here and let's click on permanent and let's click on okay and now we can see that it goes from this.
Homepage to this page right here so let's click on Save and now we can see here we have one custom redirect and now let's go to the homepage and let's reload this page.
And now we can see that we are redirected to this custom homepage over here so now if you want to access uh the list of all the block post you can just go over here to.
Index.html and now we can see all the block posts are displayed over here but uh if you go to the homepage we'll be redirected to our custom homepage so now let's go ahead and start customizing.
- How To Create A Complete Construction Estimator In Excel + FREE DOWNLOAD
- 150+ Professional Banners Pack Download In PSD Files English Photoshop Tutorial
- Diagrama de Processo de Vendas Dinâmico do MS Excel Sem Micros VBA Tutorial n# 3 Office
This page so the first thing we will do - ID Card Make
Is we will remove all the unnecessary things from here so let's right click over here and go to inspect the first thing we will do is we will remove these.BG photo overlay and BG photo container so you can select these two classes from here so let's go back and let's go to our page and here I'll just remove this and.
Uh let's create a style tag and here let's type BG photo overlay so let's copy this and let's paste it over here and let's typee BG photo.
Container and we can just go ahead and type display of none and now if I update this and if I go back to our page and if I reload this page now we can see that those things.
Have disappeared from here so now let's remove the other things as well so if you scroll up here we can see that we have this header so let's right click over here and go to inspect and let's.
See where is the header so here we can see we have this header we can go ahead and hide this header so let's go ahead and type header over here so I'll just Ty comma header and now we can see that.
The header has disappeared right now the next thing we will do is we will hide this popular post widget from here and also this footer so let's right click and go to inspect and this is the.
Popular post widget so this is the selector so I just copy this and paste it over here here and then we need to hide the footer so let's right click and go to inspect.
And for the footer we have this footer and it also has this ID of footer so let's type footer with an ID of footer and let's click on update and let's go back to our page and.
Reload this
Page and now we can see most of the things have disappeared so now let's go ahead and remove this so let's write click and go to inspect and uh it is.Inside this division with the class of post share buttons so let's copy this and let's paste it over here and let's go back and then we have this heading so it is an S3 with a class.
Of post title so let's go ahead and type post title over here and then we have this border over here so let's see what is that here we can see we have have the comments so.
Let's remove the comments so we have this ID of comments so let's type hash comments and let's update this and let's go back to our page and let's reload this page right now the.
Next thing we will do is we will remove the max width property from here because here we can see that it doesn't span the whole width of the screen so let's right click and go to inspect and first of all.
In the article we have some padding because we can see we have the green border over here so it means that we have some padding so we can see we have this padding of 30 and 40 so let's.
Select this article and it has this class of post outer container so it is this one right here so let's copy this selector and uh let's go back and here let's add the selector and we need to.
Remove the padding so let tap heading zero and uh the next thing we need to do is we need to remove this margin from this widget so here we can see we have this margin bottom of 16 so let's remove.
That let's copy this selector and uh let's paste it over here and let's type margin zero and let's update this and let's go back and let's reload.
This page right now let's go back and let's go to the Post outer and here also we have some margin I think we have some padding so let's copy this and let's paste it over here and.
Now let's go to this division right here and uh it has some padding so let's copy this selector and let's remove the padding so I'll just paste it over here right now let's go to the centered.
Division and for the center third division we need to remove the max width and also the padding so let's copy this selector and let's paste it over here or I just paste it right.
Here and uh let's type padding zero and let's set the max width to unset and let's update this CSS let's go back to our page and let's reload this page and now we can see it.
Has this Max width and uh let's go back and let's see what else we need to do we have a gap at the top so let's see how to fix that so let's go inside the main section and let's go into the inner.
Divisions and here we can see for post body we have some margin so we need to remove this margin so let's copy this and let's paste it over here and we need to add some more styles.
To this p post body so first of all let's remove the margins and then we need to set the color of all the text to Black and we also need to unset this.
Default line height from here so let's do that let's set the color to black and line height to unset and let's update this and let's go back to the page and.
Let's reload this page and now I I think everything is all right right now we can go ahead and add our custom code over here to this page so let's go to the source code now here we need to make.
Some changes before adding it to our page so the first thing we need to do is we need to add a custom class to this header because we already have a header inside our theme so we need to add a.
Class so I'll just type class and let's set the class to my header so that it is different from the header of the theme and the next thing we need to do is we need to change the class name of.
Container because in the Blogger theme we already have a class called container so it will clash with the CSS of our Custom Design so let's change the class name to something else so we have the.
Container over here so I'll just select this and in vs code you can just press command D or croll D to select all the instances of class container so I'll just press command d a couple more times.
And now we can see all the class container have been selected so now we can go ahead and use the right and left arrows over here and go to the start and let's tap my.
Container so now if you save this we can see that the changes are made over here for all these instances and now we need to go over here to Styler CSS file and we need to.
Change all the container to my container so let's select this and uh let's press command D and uh let's go to the start and let's tap my hyphen container right now we can.
Go ahead and copy this code to our page so let's copy all these CSS from here and let's paste it down here so I'll just add a comment I just tap end of theme CSS and let's page the CSS over.
Here and now let's go ahead and page the HTML so let's go back and let's go to the HTML file and let's copy from this line of code till here so let's copy this and let's.
Paste it over here and now we need to add the JavaScript so let's create a script tag for that and let's go back and let's go to the main.js file let's copy all this.
JavaScript from here and let's paste it inside the script tag right now let's save this and let's go back to our page and let's.
