How To Add a Full Screen Search In Blogger

A full-screen search overlay might seem like a nice idea for your blogger blog. It's easy to setup and our friends over at My Blogger Lab have developed a script (with some issues) to add an overlay to your blog.

This script allows users to search your site easily without using a tiny little search box that is hidden in your header. This makes search easier for your users, it's easier to find, and users are not distracted with page noise when they are searching your website.

Should You Add A Full-Screen Overlay

There are certain scenarios where this is useful. For instance, on mobile search its easier for users to search your website when they are not worrying about clicking outside of the box. This improves the user experience on your mobile website and it looks very smooth. 

However, users dislike getting popups of any kind whether it's for email lists, advertisements, or anything that distracts from your content. This can be an issue for your users so you should test it among friends before adding it to your website. 

How To Install 

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: 9999;
    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: 99999;
}
.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: 99999;
}
.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;
}

Now there is a slight difference between this and the original code. The z-index was increased because some users in the comments on their post were mentioning an issue with it being hidden behind content such as the header. 

The z-index tells the content how far it should stick above other pieces of content you can think of this as an X,Y,Z plane. Z would be the depth and therefore the higher above the content it is there are less issues. 

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>

Wrapping It Up

Afer you have added the above code the last thing you need to do is create an HTML/JavaScript widget and paste the following code in there. 

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

If you have any questions please feel free to ask below and make sure to give our friends over at MyBloggerLab a like on their facebook page.