×

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: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>

NHẬN XÉT BLOGGER

Không có nhận xét nào :

Ads in post custom

Ads in post custom1

Ads in post custom2

Ads in post custom3