How To Add Together A Sum Covert Search Overlay Inwards Blogger

Allowing users to search your site is the best means of engaging them, as well as this improves your bounce rate every bit well. Recently, i of our users asked us well-nigh how to add together a total covert search overlay inwards blogger. You powerfulness convey witnessed it on pop websites. Whenever you lot click a search icon or a link, a search box is opened inwards the middle of your covert piece the entire covert is covered amongst a squeamish colored overlay. This makes tiresome searching to acquire interesting every bit it improves the user experience. In this article, nosotros volition demo you lot how to add together total covert search overlay inwards 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 growth inwards the release of mobile users, people are tardily inching towards total covert search every bit it dramatically improves the searching sense of mobile users. Since, mobiles are tumble out to hold out minor inwards size, adding a total covert search would arrive easier to type as well as search your website.

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

For those who are notwithstanding non certain well-nigh total covert search, they tin give-up the ghost to this demo site, to run into it inwards alive action.

Installing Full Screen Search Overlay inwards Blogger:

The rattling get-go affair you lot demand to practice is to give-up the ghost to Blogger >> Template >> Edit HTML. Now inwards the blogger template editor, await for the ]]></b:skin> tag as well as only inwards 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 you lot are adept amongst CSS, you lot tin ever customize the CSS codes every bit per your needs to suite your template pattern as well as color scheme.

Now nosotros demand to install jQuery files of Full covert search. In the template code, await for the </body> tag as well as only inwards 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 afterward adding the CSS as well as jQuery files, nosotros demand to add together the total covert search HTML code that volition look upon clicking the search button. Search for <body> as well as only 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 inwards Blogger:

After adding the both CSS as well as jQuery files, you lot are almost done amongst adding a total covert search inwards blogger. However, you lot demand to display a search icon, link or push that upon clicking opens upwards the search box as well as covers the entire screen.

It’s upwards to you lot where you lot would similar to house the search icon, you lot tin add together it anywhere every bit per your template design.  To add together the search icon inwards the sidebar of your blogger site, give-up the ghost to Layout >> Add a Gadget >> Add HTML/JavaScript. Now glue the next search push HTML code inwards 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 give-up the ghost to your site as well as bask the novel means of searching your site.

We promise this tutorial may convey helped you lot inwards learning how to add together total covert search overlay inwards blogger. If you lot convey whatever suggestions well-nigh this plugin, delight write dorsum to us through Facebook, Google+ or comment below.

Baca Juga