started so here I'm in the dashboard of my blogger website and let's go over here to pages and let's go to the main.
Page so this is the custom homepage that we created now the first thing we will do is we will make this contact form work so for that you need to go over here back to the dashboard and you have.
To go over here to layout and uh you have to click on add a gadget and you have to select contact form so let's select this gadget right here and then let's click on Save and.
Here we can see that the contact form is added in the sidebar if you go back to our website and U if I just zoom out a little bit we can see that we have the sidebar displayed over here and we have.
With this blogger account so now what we need to do is we need to get the HTML code of this contact form so you have to right click over here and go to inspect and here we can see we have this form so.
In the form you have to right click and click on edit as HTML and here we can see we have the HTML of the contact form so let's go ahead and copy all of this so I'll just press command a and command.
C to copy it and let's go back and let's go to our page and let's scroll down and uh let's go to the contact Section so it is right here we have the contact Section so I'll just make some space.
Over here and I'll just add the contact from HTML that we just copied over here and I if we update this and now if you go back to our.
Website and if I reload this page here we can see after this contact form we have this contact form over here now what we need to do is we need to get these input fields and this button and.
- Social Media Banners Templates For Photoshop Sheri Sk Banner Templates
- Headphones Basic PowerPoint Icon making Tutorial PowerPoint Show
- Excel VBA Introduction Part 58.6 - SQL for Excel Files - Text Criteria and the Like Operator
Also this error message and we need to - ID Card Make
Add them over here so we will have this Ty in of this contact form but the functionality of this contact form so forther let's go back so let's go ahead.And copy this input field from here so this is for contact form name so I'll just copy this and I'll just replace this over here so let's cut this and paste the input field from the Blogger.
Contact form and let's go ahead and copy the input field for the email so this one is the email so let's copy this and uh let's go ahead and paste it over here and then we have the text area for the.
Message so let's scroll down and here we have this text area so let's copy this and let's paste it over here and then we have this button so let's scroll down and for the button we.
Have this input tag with the type of button so let's copy this and let's go ahead and paste it over here and now let's also paste the error.
Message so we have this division over here so let's copy this division from here and in that we have the error messages so let's paste it just inside the.
Form so I just paste it over here and we can just go ahead and delete this CSS from here now here we already have this text because we have directly copied this stml from the sidebar so let's go.
Back to the sidebar and now let's copy this when we don't have any errors so let's right click and go to inspect and in the form let's edit as HML and let's scroll down and now we can see that we.
Don't have the message over here so we just need to have the paragraph for error message and success message so let's go back and let's go ahead and delete this content inside the.
Paragraph right now let's go ahead and
Delete these classes from here we don't need them because these were the classes for the Blogger theme and now let's go ahead and click.On update and let's go back to our page and uh let's reload this page and let's scroll down and here we have the contact form and uh we have the correct design.
Over here and these input fields are basically the input fields from blogger widget right now let's go ahead ahead and add the placeholders over here so for the first one we need to have a.
Placeholder of let's add your name and for the second one let's add a placeholder of your email and for the third one which is a text area let's add a placeholder of your.
Message and let's save this and let's go back and let's reload this page and now we can see we have the placeholders now we need to style this button so if you go back to to our design and if you.
Scroll up and go to the CSS here for the contact form we can see that we are adding some styles to the BTN class so let's go ahead and add a class of BTN so here for the input of type button.
Let's type class BTN and let's click on update and let's go back and let's reload this page and now we can see that we have the correct styling for the.
Button so let's click on this button and we have this error message you can go ahe and style this as well if you want I'll just leave it as it is right now let's add some test data over.
Here and uh let's add some message and let's click on send and here we can see that the message has been sent but here we can see after the message was sent the.
Styling of the button has changed so let's right click and go to inspect and now we can see that we don't have the class BTN over here it has been replaced with these classes so what we need to do.
Is we need to Target this input field without the class so we need to Target it with this type of button so for that let's go back and uh we can just go ahead and delete this class and let's go.
To the CSS and here in the contact form I just type input of type button and even for the hover let's type input of type button and now let's go ahead and update.
This and let's go back back and uh now we have the style for the button but we don't have the exact style that we need so if you go to our original design here we can see that for this button we have.
Some more styling so that's because we have a class of BTN for this button now we cannot add the class BTN over here in this blogger website because it is being replaced so what we need to do is uh we.
Need to go to the B10 class and we need to copy the styles from here so let's copy all of this and let's scroll down and let's go to the contact form button and let's paste the Styles over here and.
I'll just remove the styles that we don't need so here I'll just remove the padding from the top because we have the padding over here and then we have the Border radius and we don't need this.
Background color of yellow and we can also remove this display of inline block and we can also remove this text decoration and let's remove this color because we already have this color over.
Here and uh I think that's basically it so let's click on update and let's go back to our website and let's reload this page and now we can see we have the correct style over.
Here so we can also add this send message text over here so let's go back and here in the value let's type send message and let's go back and let's reload this page and uh we have the send.
Message message text now let's go ahead and add some data so I just type some name and email and let's type some message over here and let's click on send message and now we can see that the.
Message has been sent and this message will be sent to the email ID linked with this blogger account now we can go ahead and delete this contact form so let's go ahead and delete this form from here and.
Now let's go ahead and click on update and and uh now we can see that everything is looking all right so the contact form is also working correctly right now let's also display the blog.
Post from this website over here so if you go to the list of blog post so for that you can go to index.html page I'll just go ahead and copy this link and let's add the link to.
This blog navigation menu so let's go back and let's go over here to the nav menu and here for the blog let's change this to the link and let's do the same for this link over here and let's click.
On update and let's go back to our homepage and uh let's reload this page and now if you click on this blog here we can see that the list of.
All the blog posts are displayed over here now we need to display these three latest posts over here in the homepage so let's go back to the homepage and here we will display the latest blog.
Posts so let's go back to our our homepage and this is the block section and uh we have this container division with the class of cards container and right now we are populating the block.
Post with the JavaScript so let's scroll down and uh here we can see we have this array with the name blog data and in that we have all the details of the block post so let's scroll down and uh.
Here we have this function where we are creating the stml of the blog content from this array so now let's go ahead and F the details of the Blogger website so for that let's go ahead and type.
