Membuat Floating Search Box Untuk Blog Amp Html

Sebelumnya aku sudah membagikan floating share box with jquery, nah rasanya tidak adil kalau blog dengan AMP HTML tidak dapat memakai floating search box menyerupai itu.

Untuk itu sekarang aku membagikan cara menciptakan floating search box untuk blog AMP HTML. Dengan begitu, blog AMP pun tidak kalah tampilan dengan blog biasa dengan jquery.

Untuk menciptakan floating search box pada blog AMP, kita memakai amp-lightbox dan amp-form. Untuk demonya silahkan coba pada Fiddle di bawah ini.

Jika Anda ingin mencobanya, silahkan ikuti langkahnya di bawah ini.

Simpan amp-lightbox.js dan amp-form.js berikut di atas arahan </head>, kalau 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>

Kemudian 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)
   }
 }

Kemudian silahkan simpan arahan berikut di atas arahan </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.kompiajaib.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 ganti arahan www.kompiajaib.com dengan domain blog Anda.

Lalu gunakan arahan 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>

Selamat mencoba.
Sumber https://www.kompiajaib.com/

Share this post