invitation india
How to Add a Full Screen Popup Search box in Blogger
A search box is one of the prime components of website that define and enhance the User Interface of a website. let's know how to Add Stylish Custom popup Search Boxes To Blogger. 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.
Setps for Installing Full Screen Search popup box in Blogger:
Setp1:
Go to Blogger >> Template >> Edit HTML, Now in the blogger template editor, (Ctrl+F)find ]]></b:skin> tag and just above it paste the following CSS Code.
/*=====================================
= Popup Search Box
=====================================*/
.dialog-box button[type="submit"] {
margin-top: 20px;
padding: 0.8em 2em;
background-color: #377ef0;
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: #377ef0;
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: #377ef0;
color: #fff;
padding: 10px;
}
#trigger-overlay a {
color: #fff;
text-decoration:none;
}
#trigger-overlay:hover {
background: #111;
}
Setp2:
Now we add jQuery files in the template code for Full screen search. Find </body> tag in the code and just paste the following Code above it.
<!--Screen Search JS 2 file-->
<script src='https://sites.google.com/site/data342323/modernizr.custom.js'/>
<script src='https://sites.google.com/site/data342323/fullscreen_search.js'/>
<script src='https://sites.google.com/site/data342323/modernizr.custom.js'/>
<script src='https://sites.google.com/site/data342323/fullscreen_search.js'/>
Step 3:
Find <body> in code and just below it paste the following code. Following HTML code show the Search div container Style/layout that will appear upon clicking the search button, you can be edit this code according to your requirements.
<!--searchbox Div HTML code -->
<div class='overlay overlay-mbl'>
<div class='dialog-inner'>
<div class='dialog-box'>
<h2>Enter your keyword</h2>
<form action='/search' class='search-popup-inner' method='get'>
<input name='q' onblur='if (this.value == '') {this.value = 'Search the site';}' onfocus='if (this.value == 'Search the site') {this.value = '';}' type='text' value='Search the site'/>
<button type='submit'>Search</button>
</form>
<div><button class='overlay-close' type='button'>X</button></div>
</div>
</div>
</div>
Final Step:
You are almost done the process for install Full Screen Search popup box in Blogger. the last step to complete this you need to display/Add a search icon or button to open the search box Popup.
<div id="trigger-overlay" >
<a><i class="fa fa-search"></i> SEARCH</div>
Option2: to add fixed button to the bottom right of page (Demo)
1. Find </head> in code and just above it paste the following code.
<style>
#foo {
position: fixed;
bottom: 0;
left: 0;
}
</style>
2. Find the last </div> in your blogger template and just below it paste the following code. To find last div, first find </body> tag and then scroll mouse up and find </div>.
<div id='foo'>
<div id='trigger-overlay'><a><i class='fa fa-search'/> SEARCH</a></div>
</div>
Will it also be at the bottom of the webpage
ReplyDelete