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 */Bước 3
*{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}
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>
Tags:
Thu-thuat-blogspot