Why to add together Full Screen Search Overlay?
The total screens search is becoming i of the pregnant parts of a website. With an increase inwards the divulge of mobile users, people are slow inching towards total shroud search equally it dramatically improves the searching sense of mobile users. Since, mobiles are hap to endure minor inwards size, adding a total shroud search would cash inwards one's chips far easier to type together with search your website.
For those who are notwithstanding non certain most total shroud search, they tin cash inwards one's chips to this demo site, to encounter it inwards alive action.
Installing Full Screen Search Overlay inwards Blogger:
The real outset affair you lot demand to exercise is to cash inwards one's chips to Blogger >> Template >> Edit HTML. Now inwards the blogger template editor, hold off for the ]]></b:skin> tag together with 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 proficient amongst CSS, you lot tin e'er customize the CSS codes equally per your needs to suite your template pattern together with color scheme.
Now nosotros demand to install jQuery files of Full shroud search. In the template code, hold off for the </body> tag together with 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 later adding the CSS together with jQuery files, nosotros demand to add together the total shroud search HTML code that volition seem upon clicking the search button. Search for <body> together with 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 == '') {this.value = 'Search the site';}' onfocus='if (this.value == 'Search the site') {this.value = '';}' 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 together with jQuery files, you lot are almost done amongst adding a total shroud search inwards blogger. However, you lot demand to display a search icon, link or push clit that upon clicking opens upwardly the search box together with covers the entire screen.It’s upwardly to you lot where you lot would similar to house the search icon, you lot tin add together it anywhere equally per your template design. To add together the search icon inwards the sidebar of your blogger site, cash inwards one's chips to Layout >> Add a Gadget >> Add HTML/JavaScript. Now glue the next search push clit HTML code inwards the HTML text area.
<div id="trigger-overlay" ><a><i class="fa fa-search"></i> SEARCH</div>
Once everything is done, salve your widget. Now cash inwards one's chips to your site together with bask the novel means of searching your site.
We promise this tutorial may accept helped you lot inwards learning how to add together total shroud search overlay inwards blogger. If you lot accept whatever suggestions most this plugin, delight write dorsum to us through Facebook, Google+ or comment below.
Comments