Setelah sebelumnya telah dibahas tentang cara mengganti search box yang tidak valid AMP HTML, maka pada bagian ini saya coba kupas kembali tentang cara menambah search box melayang atau floating yang tidak merusak kwalitas AMP, sehingga dipastiakn lulus uji AMP HTML oleh pihak google.
Istilah floating atau melayang pada search box ini karena tampilan dengan memunculkan kotak dialog baru pada saat ikon search di tekan, hal inilah yang memunculkan istilah floating atau melayang.
Teman-teman blogging sudah banyak yang menerapkan pada template kesukaannya. Langkah-langkah penerapannya cukup simpel dan praktis dengan catatan harus teliti pada penempatan kotak search tersebut sehingga tidak menimpa pada widget yang lain.
Cara menempatkannya adalah letakkan script berikut ini diatas kode </head>.
<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 letakkan CSS/style dibawah ini 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)
}
}
Tahap berikutnya adalah letakkan kode berikut ini diatas 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.skindezign.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>
Pada teks box www.skindezign.com ganti dengan URL blog anda.
Kemudian letakkan kode dibawah ini tepat dimana ikon search box ingin ditampilkan.
<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>
Anda bisa melihat preview search box diatas dengan mengklik tombol result dibawah ini.
Saya ucapkan terima kasih karena telah berkunjung di blog sederhana ini, saya sebagai penulis siap untuk menerima saran, kritik dan comment dari taman semua karena dengan demikian akan menambah kepercayaan diri untuk tumbuh lebih maju.
Show Parser Hide Parser