How To Add Together A Amount Shroud Search Overlay Inwards Blogger

Allowing users to search your site is the best agency of engaging them, too this improves your bounce rate every bit well. Recently, i of our users asked us well-nigh how to add together a total concealment search overlay inward blogger. You mightiness bring witnessed it on pop websites. Whenever yous click a search icon or a link, a search box is opened inward the middle of your concealment spell the entire concealment is covered amongst a dainty colored overlay. This makes irksome searching to acquire interesting every bit it improves the user experience. In this article, nosotros volition demo yous how to add together total concealment search overlay inward blogger.

Why to add together Full Screen Search Overlay?

The total screens search is becoming i of the meaning parts of a website. With an increase inward the seat out of mobile users, people are tardily inching towards total concealment search every bit it dramatically improves the searching sense of mobile users. Since, mobiles are hand to hold upward small-scale inward size, adding a total concealment search would acquire inward easier to type too search your website.

On the other hand, it makes searching simpler too interesting every bit it provides a pleasing interface to users.

For those who are all the same non certain well-nigh total concealment search, they tin give notice croak to this demo site, to run into it inward alive action.

Installing Full Screen Search Overlay inward Blogger:

The rattling commencement affair yous demand to do is to croak to Blogger >> Template >> Edit HTML. Now inward the blogger template editor, await for the ]]></b:skin> tag too but to a higher house it glue the next 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 corporation #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 yous are practiced amongst CSS, yous tin give notice ever customize the CSS codes every bit per your needs to suite your template blueprint too color scheme.

Now nosotros demand to install jQuery files of Full concealment search. In the template code, await for the </body> tag too but to a higher house it glue the next jQuery files.

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

Now afterwards adding the CSS too jQuery files, nosotros demand to add together the total concealment search HTML code that volition look upon clicking the search button. Search for <body> too but below it glue the next 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 inward Blogger:

After adding the both CSS too jQuery files, yous are almost done amongst adding a total concealment search inward blogger. However, yous demand to display a search icon, link or push that upon clicking opens upward the search box too covers the entire screen.

It’s upward to yous where yous would similar to house the search icon, yous tin give notice add together it anywhere every bit per your template design.  To add together the search icon inward the sidebar of your blogger site, croak to Layout >> Add a Gadget >> Add HTML/JavaScript. Now glue the next search push HTML code inward the HTML text area.

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

Once everything is done, salvage your widget. Now croak to your site too taste the novel agency of searching your site.

We promise this tutorial may bring helped yous inward learning how to add together total concealment search overlay inward blogger. If yous bring whatever suggestions well-nigh this plugin, delight write dorsum to us through Facebook, Google+ or comment below.