Sau đây là hộp tìm kiếm dạng popup không cần jquery hỗ trợ.
DEMO
Bước 1
Blog cần có link font-awesome nếu có rồi thì bỏ qua.
Thêm vào trước thẻ </head>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>Bước 2
Thêm css
/* Search form */ *{box-sizing:border-box} .openBtn{position:fixed;top:3px;right:0;border:none;padding:10px 15px;font-size:20px;cursor:pointer;color:#000;background-color:transparent} .overlay{height:100%;width:100%;display:none;position:fixed;z-index:1;top:0;left:0;background-color:rgba(0,0,0,0.9)} .overlay-content{position:relative;top:46%;width:80%;text-align:center;margin-top:30px;margin:auto} .overlay .closebtn{position:absolute;top:20px;right:45px;font-size:40px;cursor:pointer;color:#fff} .overlay .closebtn:hover{color:#ccc} .overlay input[type=text]{padding:15px;font-size:20px;border-top:2px solid #ddd;border-bottom:2px solid #ddd;float:left;width:80%;background-color:transparent;border-left:none;border-right:none;color:#fff} .overlay button{float:left;width:20%;padding:15px;border-top:2px solid #ddd;border-bottom:2px solid #ddd;font-size:20px;cursor:pointer;background-color:transparent;color:#fff;border-right:none} .overlay button:hover{background:#f90}Bước 3
Thêm HTML,ta để trong cặp thẻ <header>---</header> thường là sau thẻ đóng của:
<b:section class='header' id='header' maxwidgets='1' showaddelement='yes'>Code:
<!-- Search Form --> <div class='overlay' id='myOverlay'> <span class='closebtn' onclick='closeSearch()' title='Close Overlay'>×</span> <div class='overlay-content'> <form action='/search' method='get' target='_blank'> <input class='search-form' name='q' placeholder='Search' required='required' type='text'/> <button type='submit'><i class='fa fa-search'/></button> </form> </div> </div> <button class='openBtn' onclick='openSearch()'><i class='fa fa-search'/></button> <!-- Search Form -->
Bước 3
Thêm javascript vào trước </body>
<script type='text/javascript'> //<![CDATA[ // Search function openSearch(){document.getElementById("myOverlay").style.display="block"}function closeSearch(){document.getElementById("myOverlay").style.display="none"} //]]> </script>