How to Add Full Screen Search Box in Blogger | Full Screen Search Box

Hi to all, in this article I am going to tell you all bout how to add full screen search box in blogger website easily in just few minutes by using HTML and CSS.

The stylish fall screen search box on a popup with pure CSS method for the header, the search form will be displayed when we click on the search icon at the header.

By adding this search box, you can attract your visitor attention and also by using this you can show some popular posts or categories in the search box, so that your visitor can easily access those webpages easily.

These two codes will not effect your webpage speed, so you can use these codes in any blogger templates and this search box is fully responsive.

Read the below provided steps carefully and completely to get clear understanding about adding of full screen search box in blogger website without any error, if you miss any one step then you may get error while saving the code in theme editor.

Steps to Add Full Screen Search Box in Blogger

Step-1: First of all you all need to login top your blogger website dashboard by using your website login credentials.

Step-2: Go to blogger website dashboard -> Click on theme section -> Click on arrow icon -> Select backup -> Click on download theme.

Step-3: Again Go to blogger website dashboard -> Click on theme section -> Click on arrow icon -> Select Edit HTML -> Blogger theme editor.

Step-4: Copy below provided HTML code.

<!--[ Full Screen Search Box by Tial Wizards ]--> <div class='AT-Search'> <input id='AT-Search' name='search' tabindex='1' type='checkbox'/> <label class='AT-search-icon' for='AT-Search'><svg class='open' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><g transform='translate(2.000000, 2.000000)'><path d='M19.7555474,18.6065254 L16.3181544,15.2458256 L16.3181544,15.2458256 L16.2375905,15.1233001 C16.0877892,14.9741632 15.8829641,14.8901502 15.6691675,14.8901502 C15.4553709,14.8901502 15.2505458,14.9741632 15.1007444,15.1233001 L15.1007444,15.1233001 C12.1794834,17.8033337 7.6781476,17.94901 4.58200492,15.4637171 C1.48586224,12.9784243 0.75566836,8.63336673 2.87568494,5.31016931 C4.99570152,1.9869719 9.30807195,0.716847023 12.9528494,2.34213643 C16.5976268,3.96742583 18.4438102,7.98379036 17.2670181,11.7275931 C17.182269,11.9980548 17.25154,12.2921761 17.4487374,12.4991642 C17.6459348,12.7061524 17.9410995,12.794561 18.223046,12.7310875 C18.5049924,12.667614 18.7308862,12.4619014 18.8156353,12.1914397 L18.8156353,12.1914397 C20.2223941,7.74864367 18.0977423,2.96755391 13.8161172,0.941057725 C9.53449216,-1.08543846 4.38083811,0.250823958 1.68905427,4.08541671 C-1.00272957,7.92000947 -0.424820906,13.1021457 3.0489311,16.2795011 C6.5226831,19.4568565 11.8497823,19.6758854 15.5841278,16.7948982 L18.6276529,19.7705177 C18.9419864,20.0764941 19.4501654,20.0764941 19.764499,19.7705177 C20.0785003,19.4602048 20.0785003,18.9605974 19.764499,18.6502845 L19.764499,18.6502845 L19.7555474,18.6065254 Z' fill='#fff'/></g></svg></label> <div class='modal__overlay'><label class='search-close' for='AT-Search'>✖</label> <div class='modal__box'> <form action='/search' class='full-screen-search' method='get'> <input class='input' id='searchbox' name='q' placeholder='Search...' type='text'/> </form> <div class='Search-tags'> <span class='tags-label'><b>Popular:</b></span><a class='popular-tag' href='#'>blogger template</a>, <a class='popular-tag' href='#'>BGMI</a>, <a class='popular-tag' href='#'>Latest Released</a> </div> </div> </div> </div>
Copy

Step-5: Now paste the copied HTML code in the place of search icon in the header section, you can search for your previous search icon by using inspect element and then replace the HTML code in the place of old search bar HTML code.

Step-6: Now copy below provided CSS code and paste the copied code above closing head tag or </head> tag.

<style> /* Full Screen Search Box by Tial Wizards */ .AT-Search { display: block; padding: 0 1em; text-align: center; width: 100%; } .AT-Search > label.AT-search-icon { position: absolute; top: 14px; right: 0; color: #fff; cursor: pointer; display: block; font-weight: bold; -webkit-transition: all 0.55s; transition: all 0.55s; } .AT-Search > label.AT-search-icon:hover { -webkit-transform: scale(0.97); -ms-transform: scale(0.97); transform: scale(0.97); } .modal__box { margin: 0 auto; position: relative; left: 50%; padding: 20px; display: flex; flex-direction: column; max-width: 100%; line-height: 30px; border-radius: 5px; transform: translate(-50% , -50%) scale(0.97); overflow: hidden; box-sizing: border-box; top: 50%; } #searchbox { background: 0 0; border: solid #000; border-width: 0 0 1px 0; color: #000; width: 100%; max-width: 70%; font-size: 2rem; background-size: 0% 100%; background-repeat: no-repeat; outline: 0; padding: 2rem 1rem; } .modal__overlay { display: none; position: fixed; height: 100%; width: 100%; top: 0; left: 0; right: 0; bottom: 0; background: #fff; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); z-index: 9999999; transition: all .2s ease;} .modal__overlay:before{content:'';display:block;position:absolute;right:-5px;top:-80px;width:50%;height:1200px;border-top-left-radius:50%;border-bottom-left-radius:50%;background-color:#f1f1f0} input:checked ~ .modal__overlay { transition: all 0.75s cubic-bezier(0.19, 1, 0.22, 1); display: block; } input:focus + label { -webkit-transform: scale(0.97); -ms-transform: scale(0.97); transform: scale(0.97); }svg.open{width:20px; height:20px} .full-screen-search{position: relative; font-size: 20px;}#AT-Search{display:none}.modal__overlay .search-close{position: fixed; top: 1.125rem; right: 1.125rem; font-size: 20px; display: inline-block; background: #000; color: #fff; width: 40px; height: 40px; text-align: center; line-height: 2; vertical-align: middle; border-radius: 50%;} .Search-tags{width: 100%; font-size: 14px; color: #000; text-align: center; margin: 0;}.Search-tags span, .Search-tags a { display: inline-block; } .Search-tags a { color: #666; margin: 0 0 0 10px; } </style>
Copy

Step-7: After adding the two codes, click on save button.

Step-8: Now you have successfully added full screen search box in your blogger website easily in just few minutes.

Note

If you get any error while saying the theme code then you need to restore your backup code again and need to repeat the same process as mentioned in above steps carefully.

If you want to change the color or styles of the search box then you need to modify CSS code, and to change the colors you need to replace color codes and for color codes you can use google color picker

Conclusion

I hope that you have understood about how to add full screen search box in blogger website easily in just few minutes using HTML and CSS.