Hp masa depan

Cara Membuat Floating Search Box Untuk Blog AMP HTML di Tutorial OnDuOn,

Search/pencarian yang sangat cepat dan elegant sayapun sangat menyukainya

Untuk itu kini saya membagikan cara membuat floating search box untuk blog AMP HTML. Dengan begitu, blog AMP pun tidak kalah tampilan dengan blog biasa dengan jquery.
Untuk membuat floating search box pada blog AMP, kita menggunakan amp-lightbox dan amp-form.

Untuk hasilnya Lihat di bawah ini:
Apa bila anda tertarik Floating Search Box-nya silahkan ikuti tutorialnya:

Langkah pertama save code amp-lightbox.js dan amp-form.js berikut di atas kode </head>, jika sudah ada maka tidak perlu menambahkannya lagi.

<script async='async' custom-element='amp-lightbox' src='https://cdn.ampproject.org/v0/amp-lightbox-0.1.js'></script>
<script async='async' custom-element='amp-form' src='https://cdn.ampproject.org/v0/amp-form-0.1.js'></script>

Kedua silahkan simpan CSS berikut pada style amp-custom.

 button.search_icon {
  background: 0 0;
  border: none;
  color: red;
  font-size: 30px;
  padding: 0;
  cursor: pointer;
}
button.search_icon svg {
  width: 32px;
  height: 32px;
  vertical-align: middle;
}
button.search_icon svg path {
  fill: #666;
}
.resetbutton {
  background: 0 0;
  border: none;
  position: absolute;
  top: 50%;
  margin-top: -17px;
  right: 10px;
  padding: 0;
  cursor: pointer;
  line-height: 1;
  transition: all .4s ease-in-out;
  z-index: 999
}
.resetbutton svg {
  width: 34px;
  height: 34px;
  vertical-align: middle
}
.resetbutton svg path {
  fill: #999
}
.resetbutton:focus {
  outline: 0
}
#search-box .search-form:not(:valid)~.resetbutton {
  display: none
}
#search-box {
  width: 70%;
  position: absolute;
  top: 20%;
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  left:50%;
  margin-left:-35%;
}
.sos-profil .search button {
  background: 0 0;
  border: none;
  color: red;
  font-size: 30px;
  padding: 0;
  cursor: pointer
}
#search-box form {
  position: relative;
}
#search-box form input[type=text] {
  width: 100%;
  top: 0;
  left: 0;
  z-index: 99;
  padding: 10px 50px 10px 10px;
  border: none;
  border-bottom: 2px dotted #999;
  outline: 0;
  font-size: 3em;
  color: #999;
  background: #000;
  background: rgba(0, 0, 0, .3);
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;
}
amp-lightbox {
  z-index: 10000
}
.lightbox {
  background: rgba(0, 0, 0, .6);
  width: 100%;
  height: 100%;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center
}
.lightbox .close_search {
  background: 0 0;
  border: none;
  color: red;
  font-size: 50px;
  position: absolute;
  top: 10px;
  right: 20px;
  cursor: pointer;
  line-height: 1
}
#search-box .note_search {
  color: #999;
  text-align: center;
  padding: 10px 50px 10px 10px;
}
@-webkit-keyframes slideInUp {
  0% {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
    visibility: visible
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0)
  }
}
@keyframes slideInUp {
  0% {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
    visibility: visible
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0)
  }
}

Ketiga Save silahkan simpan kode berikut di atas kode </body>

<amp-lightbox id='search_box' layout='nodisplay'>

<div class='lightbox'>

<button class='close_search' on='tap:search_box.close' role='button' 
tabindex='0' title='Close'>&amp;times;</button>

<div id='search-box'>

  <form action='https://www.google.com/search' method='get' target='_blank'>

<input autocomplete='off' autofocus="autofocus" class='search-form' 
name='q' placeholder='Search...' required='required' type='text'/>

<input name='as_sitesearch' type='hidden' value='www.onduon.blogspot.com'/>

<button class='resetbutton' type='reset'><svg viewBox='0 0 24 24'>

    <path 
d='M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z'
 fill='#000000'/>

</svg></button>

  </form>

  <div class='note_search'>Press Enter To Search</div>

  </div>

</div>

</amp-lightbox>

Silahkan anda ganti domain www.onduon.blogspot.com sama domain anda,

Ke-empat gunakan kode berikut (search icon) di mana pun Anda ingin menampikannya sebagai tombol untuk menampilkan search box.

 <button class='search_icon' on='tap:search_box'>
 <svg viewBox='0 0 24 24'>
  <path d='M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z' fill='#000000'/>
 </svg>
</button>

Apabila anda tidak mengerti silahkan comentar di bawah ini,
By:OnDuOn