Unexpected Web

How to Add a Full Screen Popup Search box in Blogger

Read

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.

DEMO

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.

<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.

<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.

Option1: To add the search icon in the sidebar of your blogger site, go to Layout >> Add a Gadget >> Add HTML/JavaScript. Now paste the following search button HTML code in the HTML text area.

<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>

Copy to Clipboard Javascript Button to copy text

By ABONZERTV

Read

0 Comments

Use Facebook keyboard shortcuts for navigat Facebook

By ABONZERTV

Read

0 Comments

Create Best Hacking Matrix Effect in HTML

By ABONZERTV

Read

0 Comments

Great Ways To feal Like A Hacker using Create hackinh Matrix rain animation using HTML5 canvas and javascript. This tutorial is inspired by this cool demo and gschoppe. Gschoppe Matrix is a really interesting prank webPage/Tool that gives you the ability to be like a hacker. You can impress your friends, give your website a fresh new look with adding Matrix animation background or can use to making a short film on Hacking / Cyber Security.

HTML Code:

<html>
    <head>
        <meta charset="utf-8">
        <title>Matrix</title>
        <style>
            body, html, canvas {
                margin: 0;
                padding: 0;
                width: 100%;
                height: 100%;
            }
            
        </style>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
        <script>
            $(document).ready(function() {
                function resetSize() {
                    $('#q').each(function() {
                        $(this)[0].width = $(this).width();
                        $(this)[0].height = $(this).height();
                    });
                }
                resetSize();
                $(document).resize(function() {
                    resetSize();
                });
                var s=window.screen;
                var width = q.width=s.width;
                var height = q.height;
                var yPositions = Array(300).join(0).split('');
                var ctx=q.getContext('2d');
                function getNextChar() {
                    //
                    //return(""+Math.round(Math.random()));
                    if(Math.random()<.4) {
                        // numbers
                        return(getRandomChar(48, 57));
                    } else if(Math.random()<.8) {
                        // capital letters
                        return(getRandomChar(65, 90));
                    } else {
                        // katakana
                        return(getRandomChar(0x30A0, 0x30A0));
                    }
                }
                function getRandomChar(rangeStart, rangeEnd) {
                    return(String.fromCharCode(rangeStart + Math.random() * (rangeEnd-rangeStart+1)));
                }
                var draw = function () {
                    ctx.fillStyle='rgba(0,0,0,.05)';
                    ctx.fillRect(0,0,width,height);
                    ctx.fillStyle='#0F0';
                    ctx.font = '10pt Georgia';
                    yPositions.map(function(y, index){
                        text = getNextChar();
                        x = (index * 10)+10;
                        q.getContext('2d').fillText(text, x, y);
                        if(y > 100 + Math.random()*20000) {
                            yPositions[index]=0;
                        } else {
                            yPositions[index] = y + 10;
                        }
                    });
                };
                RunMatrix();
                function RunMatrix() {
                    if(typeof Game_Interval != "undefined") clearInterval(Game_Interval);
                        Game_Interval = setInterval(draw, 25);
                }
                function StopMatrix() {
                    clearInterval(Game_Interval);
                }
                //setInterval(draw, 33);
                $("button#pause").click(function() {
                    StopMatrix();
                });
                $("button#play").click(function(){
                    RunMatrix();
                });
                 
            })
        </script>
    </head>
    <body>
        <div align="center">
            <canvas id="q"></canvas>
        </div>
    </body>
</html>

Preview

Output:

Change or remove windows Password without Knowing Old Password

By ABONZERTV

Read

0 Comments

New Google Adsense Account Approval Process (2016)

By ABONZERTV

Read

0 Comments

How to use WhatsApp in your Web browser ( without Bluestack)

By ABONZERTV

Read

0 Comments

Subscribe to: Posts ( Atom )

1	Home (News Feed)
2	Your profile page
3	Friend requests
4	Messages
5	Notifications
6	Your Account Settings
7	Your Privacy Settings
8	Go to the Facebook page
9	View Facebook Statements and Rights agreement
0	Open Facebook help center

J	Move to next story in feed
K	Move to the previous story in feed
L	Like or unlike the selected story
C	Comment on selected story
S	Share selected story
O	Open image or link of the selected story
Esc	Close image and return to News Feed
P	Post a new status
/	Search
Q	Search chat contacts

Unexpected Web

About

How to Add a Full Screen Popup Search box in Blogger

Setps for Installing Full Screen Search popup box in Blogger:

Copy to Clipboard Javascript Button to copy text

Copy to clipboard – pure javascript solution Example

Use Facebook keyboard shortcuts for navigat Facebook

Keyboard shortcuts for Facebook

Windows :

Apple Mac:

Create Best Hacking Matrix Effect in HTML

Change or remove windows Password without Knowing Old Password

Steps to Change Administrator Password From Computer Management

Steps To Change Administrator Password From Command Prompt

New Google Adsense Account Approval Process (2016)

New AdSense application process

How to use WhatsApp in your Web browser ( without Bluestack)

How to use WhatsApp in your Computer/Laptop without Bluestack

Recent Posts

Facebook

Search This Blog

Blog Archive

Labels

Report Abuse

Pages

About Me

Edit This Menu

Looking for something? Search here!

Connect

About

Setps for Installing Full Screen Search popup box in Blogger:

Copy to clipboard – pure javascript solution Example

Keyboard shortcuts for Facebook

Windows :

Apple Mac:

Steps to Change Administrator Password From Computer Management

Steps To Change Administrator Password From Command Prompt

New AdSense application process

How to use WhatsApp in your Computer/Laptop without Bluestack

Recent Posts

Facebook

Search This Blog

Blog Archive

Labels

Pages

About Me

Edit This Menu

Looking for something? Search here!