Hộp tìm kiếm popup cho blogspot không phụ thuộc jquery

Với những blogspot có header cố định cho phù hợp khi xem trên mobile nên sử dụng hộp tìm kiếm dạng popup cho thuận tiện.Có một số hộp tìm kiếm dạng popup nhưng cần có jquery hỗ trợ và rất bất tiện khi jquery lại không sử dụng được async(tải không đồng bộ).
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'>&#215;</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>
Publis: 

2 comments

  1. CSS để ở đâu vậy ADMin
    1. Để ở phần css của blog hoặc là trong
      <b:skin><![CDATA[
      -------------
      ]]></b:skin>
🙂😬😀😂🤣😍💖
Windows + . hoặc Windows + ; để chèn emoji