×

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

Hộp tìm kiếm popup cho blogspot không phụ thuộc jquery-Search popup does not use 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:rgb(0,0,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'>
      <meta content='https://www.blogtdb.info/' itemprop='url'/>
     <form action='https://www.blogtdb.info/search' itemprop='potentialAction' itemscope='itemscope' itemtype='http://schema.org/SearchAction' method='get' target='_blank'>
      <meta content='https://www.blogtdb.info/search?q={q}' itemprop='target'/>
      <input class='search-form' id='feed-q-input' itemprop='query-input' 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 -->
Thay URL blog của bạn vào.
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>
Facebook Comments
Blogger Comments

Ads in post custom

Ads in post custom1

Ads in post custom2

Ads in post custom3