Smaller screens so we're going to use this design as the homepage of our blogger website now for that we're going to create a new page in our blogger website.
And we're going to redirect the homepage of the Blogger website to that new page and in the new page we will add this Custom Design so let's get [Applause].
[Music] started all right so here I have logged into my blogger dashboard and let's create a new page let's go over here to pages and let's click on new page and uh.
Let's give it a title of homepage and for now let's go ahead and just type testing over here and let's publish this page let's also go to options and uh click on do not allow comments and let's.
Here for the theme I'm using this theme called Soho light which comes by default with blogger and now let's go and redirect the homepage to this page right here so let's go over here to.
Settings let's scroll down and here you have to go to errors and redirects and click on custom redirects and add a new redirect now you want need to go from the homepage to this page right here so.
I just copy this and I'll just paste it over here and let's click on okay and let's click on save so now we can see here we have one.
Redirect from the homepage to this page right here so now if you go to the homepage so let's delete this and go to the homepage let's press enter now we can see that we are redirected to this.
Custom homepage that we created all right now let's go ahead and start customizing this page so the first thing we will do is we will remove all this content from here so first of all let's.
Posts Related:
- How To Design Responsive Navbar Using HTML, CSS, & JavaScript - Part 2 BlogSpot
- How To Add Custom Animated Menu To Blogger Website BlogSpot
- How to Make Birthday Card in Ms Word PowerPoint
Remove this popular posts widget so
Let's right click and go to inspect and here we can see that we have this widget with an ID of popular posts one so so let's hide this let's go back.To our page this is the homepage and here let's go ahead and add a style tag now before doing this you need to make sure that you are in the.
HTML view so click on this button and click on HTML view so here in the style tag let's add some CSS so let's tap hash popular posts one and here let's go and type display.
Of none and uh let's click on update and let's see whether there is any change so let's go ahead and click on this refresh button and now we can see that the.
Popular post widget is gone in the same way let's go ahead and remove this footer so right click and go to inspect and for the footer we have this ID of footer so let's target.
That here I'll just add a comma and let's tap hash footer and update and now if you refresh this we can see that the fotter is gone now in this way let's go ahead and.
Remove everything else so let's right click over here and go to inspect and this has a class of post title so let's add the post title over here just type post title because it is a.
Class and let's go back and uh here we also have this post footer so here we can see we have the this post footer class let's hide that as well let's type post footer and now.
If you go ahead and zoom out we can see that we also have this sidebar so let's right click and go to inspect and for the sidebar we have this aside so let's hide that as well so here I'll just type.
Aside let's go back and uh let's see
What else we need to do I'll just uh update this and reload this page right now let's go ahead and uh right click over here and go to inspect now.Here we can see we have the post sidebar so let's hide this as well and uh the next thing is uh this header right here so let's inspect and here we can see we have this uh header.
With a class of Center top container so let's hide that as well let's update and reload this page now here we can see we have this underline so let's.
See what is that let's inspect and here for the post body container we have this before so that is the underline so let's hide the before as well here you can see we have the.
Selector so let's copy this and let's paste it over here and let's update let's go back and reload now we can see we have some margin so let's.
Right click and go to inspect and here if you go to the widget so here for the widget we can see that we have some margin of 50 pixels zero so let's remove the margin of this selector.
Main widget so here I just type main widget margin of zero let's see whether we have any other margins so right click and go to.
Inspect here we also have this post header so we need to hide that as well so let's select that and uh here we have the selector let's copy this and uh let's paste it over here for.
The display nonone property let's go back and uh let's go to inspect and for the Post outer we have some margin at the bottom so let's remove that as well so we have this post out.
And uh this is the selector of the post outer so let's copy this and let's paste it over here for margin zero and let's update this let's go back and.
Reload now we can see we don't have any margin or padding now the last thing we need to do is we need to set the max width for this uh content right now it has some max withd value set by the.
Theme now we need to remove that and we need to set the Max withd to 100% so let's right click and go to inspect now here if you go to this division with an ID of main we can see that it has a.
Width of 922 pixels so let's set the width of the main to 100% so let's go back and uh here let's type hash main width of 100% let's update.
This and let's go back and reload this page and now we can see that everything looks all right we don't have any padding or margin or any max WID set now we can simply go ahead and add our.
Design to this page so let's go back and uh let's remove this testing text from here and here I'll just add a comment I'll just type custom page CSS and let's go to our source code and let's copy all.
The CSS from here and let's paste it over here so we have copied and pasted all the CSS now let's go ahead and copy and paste the HTML so let's go back to our.
Homepage and uh let's go to the HTML file let's copy the HTML from this line of code till the end right here and let's paste it over here now we also need to copy the JavaScript so.
Let's create a script tag for that and uh let's go back and let's go to the main.js file let's copy this JavaScript and paste it inside the script tag now the next thing we need to.
Do is we need to update the links of the images so right now it is set to Images slash the image name but in our blogger website we don't have this images folder and we also don't have this image.
Uploaded so what we need to do is we need to upload these images somewhere and get the link and pasted over here so for that I'll will use a service called cloudinary so you can simply go over.
Here to cloud.com and create a free account and then log into the account and go to media library and go to the folders and here you can create new folders for your project so let's create.
A new folder over here I just click on this create a folder button and let's create a folder called musician website and uh let's click on save so here we can see that the folder.
Has been created so let's open the folder and here we need to upload the images here are all the images that I have for this project so I'll just select all of these and I'll just drag.
And drop them over here and now we can see that the images are being uploaded and here we can see all the images have been uploaded now we can.
Simply go ahead and update the image links so let's go back and uh here we have logo one so let's search for logo one and this is the logo one so let's click on this button called copy URL and.
Let's paste it over here so I'll just remove this and paste the new URL let's do the same for all these other images so this is logo 2 let's copy this and paste it over.
Here and then we have logo 3 which is right here copy it and paste it over here and then we have logo 4 let's copy it and paste it and lastly we have logo five for this.
Section then we have these two images thumbnail 1 and thumb two so let's go ahead and copy these so this is thumb two let's copy this and paste it for thumb.
Two and let's copy thumb one from here and let's paste it over here now the last thing is the hero image which is uh this image right here now it is basically added to the CSS so.
