Can see that we have this search box over here and if i click on that we can see we have this full screen search box displayed over here and if i click on this close button.
It goes back to this initial search box so if you want to learn how to design this from scratch you can watch the previous video i will leave the link in the description of.
This video and i will also leave the link of the source code so you can just copy and paste the code now in this video i'll show you how to integrate this search box into your blogger.
Website so let's get started all right here's the blogger website where we're gonna add the search box and we can see we have this search box.
Over here now when we click on the search box we want to have the full screen search box displayed over here so let's go to the dashboard of our blogger website and first of all let me show you.
Here's the theme right now let's go ahead and click on this arrow and click on edit html now here we need to make some changes in our theme code so let's go to the source.
Code so this is the source code of our search box you can find the link of the source code in the description now we don't need to add this html to our blogger website because we already have.
The search box over here so here we can see we have the search box now we have to style this search box over here so let's right click over here and click on inspect now here we can see.
We have the html code of our search box now if we scroll up we can see that we have a division with the class of search and in that we have the search box so let's copy this class from here.
And let's go back to our template code and let's go to the css so here we can see all the css let's go to the end of the css this is where the css ends so i'll just.
Make some space over here Wesdigital
And i'll just create a comment i'll just have full screen search and i'll just paste the class over here so i'll just type dot search.And now you need to add the css that we added for this search container so let's go back to our source code and if you go to the style.css file and here we can see we have the search.
Container.active so we need to add the css to our search so let's copy this from here and here we also need to add a class of active so just type dot active over here.
Because we're going to add a class of active to the search using javascript so i'll just paste the css over here all right let's go back to our css and here we can see we also have a class.
Called search box and for that we have the styles so if you go back to the html here we can see we have the search container and in that we have the search box.
So we need to add the css of the search box to some element inside the search in our blogger website so let's go back to our blogger website.
And i'll just right click over here and click on inspect and here we can see in the search division we have all these elements over here and then we have this division with the class of section so we.
Need to target this and we need to bring it to the center of the screen and for the search we are adding the background color so here we can see we are adding a dark background color over here and we.
Are setting the width and the height to 100 percent all right so let's select the section from here so here i'll just type dot search dot active and here i'll just.
Type section
And let's go back to our css and let's copy all the css inside the search box this is the css to bring the element to.The center so i'll just copy this from here and let's paste it over here now let's go back to our blogger website and here we can see if we scroll down and if we scroll up we can see we have a.
Different header over here and we also have a different search box over here so this search box can be an issue for our design so let's right click over here and click on inspect.
And let's select this division with the class of search and now here we can see on the right we have the selector for this element so we have to set a display of none for this.
So if i just type display of none we can see that the search box is not being displayed over here so i'll just copy this selector from here and let's go back to our theme code.
And i'll just paste it over here and here i'll just type display of none now let's go back to our blogger website and we'll also bring this header to the center so let's right click over here.
And click on inspect and let's select this block name division from here and we will set a width of 100 percent for this so i'll just have width.
100 and now we can see it has a width of 100 percent and we'll also test align the heading to the center so i'll just select this and here we can just type.
Text align center so let's make these two changes so i'll just copy this block name from here.
And let's go back and here i'll just type dot blog name and i'll just set the width to 100 and let's go back to the inspector and let's select the h1.
And here we have the selector for h1 so i'll just copy this and i'll just paste it over here and let's set the text align to center right now let's add the close button and.
The javascript so let's scroll down and go to the end of the theme code so here before the body ends i'll just make some space over here and let's go to our source code and let's go to the.
Html and let's scroll down and i'll just copy this search close button from here and paste it over here and let's create a script tag for the.
Javascript now here in the script tag i will just copy all the javascript so let's go back and let's go to the main.js file and i'll just copy everything from here.
And let's go back and paste it over here now the next thing we need to do is we need to update this selector so we are selecting search container and in that we have the input now this is the class.
That we had given to our html over here so here we can see we have this search container division now you have to change this to the class of a blogger website so if you go back to a.
Blogger website and if i just right click over here and click on inspect here we can see we have this division of the class of search and in that we have.
This form and in that we have the input so let's go back to our theme code and i'll just delete this from here and here i'll just type search form.
Input now let's get the selector of the main container division so if we go back to our html here we can see we have this container division with the class of search container let's go back to our.
Blogger website and let's see what is the container so i'll just inspect and here we can see this is the main container division so if i select this we have this selector over here so i'll.
Just copy this and let's go back to our javascript and i'll just paste it over here and then lastly we have the search close button and we have the same class over.
Here as well now the next thing we will do is we will add the link of font awesome so here we can see we are using the font awesome icon over here.
So let's go back to our source code and if we go to the head section here we can see the link of font awesome so i'll just copy this and let's go back to our theme code and.
Let's go to the top and here in the head section i'll just paste the link right now let's click on save and let's go back to our website and let's refresh this page.
And now let's click on this search box and here we can see that the full screen search box is displayed over here but we have some problems in the styling first of all we have this margin over here so.
Let's right click over here and click on inspect and let's click on search and i'll just type margin 0 and that solves the problem of the margin now the next thing we need to do.
Is we need to set a background color for this search box so let's select this section and let's add a background color over here i'll just type ee.
And now we can see we have this background color so we need to make these two changes to our code so let's go back and let's go to the css.
And here for the search i'll just type margin 0 and here for the section i'll just type background and eee.