How to Add a Full Screen Search Overlay in Blogger

Advertisements
Allowing users to search your site is the best way of engaging them, and this improves your bounce rate as well. Recently, one of our users asked us about how to add a full screen search overlay in blogger. You might have witnessed it on popular websites. Whenever you click a search icon or a link, a search box is opened in the middle of your screen while the entire screen is covered with a nice colored overlay. This makes boring searching to become interesting as it improves the user experience. In this article, we will show you how to add full screen search overlay in blogger.


Why to add Full Screen Search Overlay?

The full screens search is becoming one of the significant parts of a website. With an increase in the number of mobile users, people are slowly inching towards full screen search as it dramatically improves the searching experience of mobile users. Since, mobiles are happen to be small in size, adding a full screen search would make it easier to type and search your website.
Full Screen Search Overlay in Blogger
On the other hand, it makes searching simpler and interesting as it provides a pleasing interface to users.

For those who are still not sure about full screen search, they can go to this demo site, to see it in live action.

Installing Full Screen Search Overlay in Blogger:

The very first thing you need to do is to go to Blogger >> Template >> Edit HTML. Now in the blogger template editor, look for the ]]></b:skin> tag and just above it paste the following CSS Code.

/*=====================================
= MBL Full Screen Overlay Plugin
=====================================*/

.dialog-box button[type="submit"] {
    margin-top: 20px;
    padding: 0.8em 2em;
    background-color: #10b765;
    color: #fff;
    border: none;
    text-transform: uppercase;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.dialog-box input[type="text"] {
    padding: 0 20px;
    font-size: 13px;
    letter-spacing: 0.1em;
    color: #888;
    height: 50px;
    line-height: 1;
    background-color: #fff;
    border: 1px solid #ddd;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
    box-sizing: border-box;
    width: 100%;
}
.dialog-box h2 {
    margin: 0;
    font-weight: 400;
    font-size: 24px;
    padding: 32px 0 25px;
    text-transform: uppercase;
}
.dialog-box {
    max-width: 520px;
    min-width: 290px;
    background: #fff;
    padding: 20px;
    text-align: center;
    position: relative;
    z-index: 5;
    margin: auto;
}
.overlay {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(55, 58, 71, 0.9);
}
.overlay .overlay-close {
    width: 30px;
    height: 29px;
    position: absolute;
    right: 0px;
    top: 0px;
    border: none;
    background: #10B765;
    float: left;
    color: #fff;
    outline: none;
    z-index: 100;
}
.overlay .dialog-inner{
text-align: center;
position: relative;
top: 50%;
height: 60%;
-webkit-transform: translateY(-50%);
transform: translateY(-30%);
}

.overlay-mbl {
opacity: 0;
visibility: hidden;
-webkit-transition: opacity 0.5s, visibility 0s 0.5s;
transition: opacity 0.5s, visibility 0s 0.5s;
z-index:100;
}
.overlay-mbl.open {
opacity: 1;
visibility: visible;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
}
.dialog-box button[type="submit"]:hover,.overlay .overlay-close:hover {
    background: #212121;
}

#trigger-overlay {
    cursor: pointer;
    float: left;
}
#trigger-overlay {
    background: #10b765;
    color: #fff;
    padding: 10px;
}
#trigger-overlay a {
    color: #fff;
text-decoration:none;
}
#trigger-overlay:hover {
    background: #111;
}

If you are good with CSS, you can always customize the CSS codes as per your needs to suite your template design and color scheme.

Now we need to install jQuery files of Full screen search. In the template code, look for the </body> tag and just above it paste the following jQuery files.

<script src="http://mybloggerlab.com/Scripts/modernizr.custom.js"></script>                
<script src="http://mybloggerlab.com/Scripts/fullscreen_search.js"></script>

Now after adding the CSS and jQuery files, we need to add the full screen search HTML code that will appear upon clicking the search button. Search for <body> and just below it paste the following code.

<div class="overlay overlay-mbl">
<div class="dialog-inner">
<div class="dialog-box">
<h2>Enter your keyword</h2>
<form method="get" action='/search' class="search-popup-inner">
<input type="text" name="q" onblur='if (this.value == &#39;&#39;) {this.value = &#39;Search the site&#39;;}' onfocus='if (this.value == &#39;Search the site&#39;) {this.value = &#39;&#39;;}' value='Search the site' />
<button type="submit">Search</button>
</form>
<div><button type="button" class="overlay-close">X</button></div>
</div>
</div>
</div>

Adding Full Screen Search Overlay in Blogger:

After adding the both CSS and jQuery files, you are almost done with adding a full screen search in blogger. However, you need to display a search icon, link or button that upon clicking opens up the search box and covers the entire screen.

It’s up to you where you would like to place the search icon, you can add it anywhere as per your template design.  To add the search icon in the sidebar of your blogger site, go to Layout >> Add a Gadget >> Add HTML/JavaScript. Now paste the following search button HTML code in the HTML text area.

<div id="trigger-overlay" ><a><i class="fa fa-search"></i> SEARCH</div>

Once everything is done, save your widget. Now go to your site and enjoy the new way of searching your site.

We hope this tutorial may have helped you in learning how to add full screen search overlay in blogger. If you have any suggestions about this plugin, please write back to us through Facebook, Google+ or comment below.
Advertisements

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).

Comment With:
OR
Choose Wisely!

6 comments

March 31, 2016 at 12:59 PM

Thank you took it))

April 1, 2016 at 12:02 AM

Very nice widget brother. I am seeing a Blogger widget in your blog after a very long time. :)

Editorial Team MOD
April 1, 2016 at 6:57 AM

Hi,

The best thing is you, who commented after a long time.

Cheers mate.
Syed

April 5, 2016 at 7:44 AM

works but it is appearing on top of my menu bar :P

Editorial Team MOD
April 5, 2016 at 10:47 AM

A demo will help me to solve your problem.

April 11, 2016 at 12:16 AM

Leave it, no need for it now. :)
I want to do guest posting for your website. What is the concept?

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2018. MBL Networks, All Rights are Strictly Reserved.