Tạo hộp tìm kiếm full màn hình cho blogspot

<div class='overlay overlay-sora'>
        <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>

​x
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
​
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
​
<style>
.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 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:0;top:0;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-sora{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-sora.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}
</style>
​
<div class='overlay overlay-sora'>
        <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' />