Ditulis oleh: Ditulis pada: 8/06/2017
Sebelumnya saya sudah membagikan floating share box with jquery, nah rasanya tidak adil jika blog dengan AMP HTML tidak bisa menggunakan floating search box seperti itu.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 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 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>
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 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'>&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 kode
www.kompiajaib.com dengan domain blog Anda.Lalu 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>
Selamat mencoba.