Mengganti Search Box Tidak Valid AMP HTML Pada Blog

Search Box adalah sebuah kotak yang dapat di input teks yang bertujuan untuk menelusur keberadaan isi dari suatu blog berupa title, isi posting dan keseluruhan kata maupun suku kata yang dianggap cocok dengan pola teks yang yang di input pada search box tersebut. Keberadaan search box ini sangat diperlukan karena akan mempermudah para visitor untuk menelusur isi artikel dari situs web tertentu.

Beberapa contoh search box yang saya bagikan kali ini sudah valid AMP test karena sudah saya coba sendiri pada template produksi Kompi Ajaib yang saya pakai saat ini, tinggal penempatan dan tampilannya yang harus di modifikasi sendiri supaya sesuai dengan selera dan minat anda.

Apabila blog anda sudah valid AMP HTML dan ingin menambah search box google didalamnya, maka yang harus dilakukan pertama adalah menambahkan widget tersebut melalui halaman tata letak dan akan mendapatkan kode seperti dibawah.

<form class='gsc-search-box' expr:action='data:blog.searchUrl'>

<b:attr cond='not data:view.isPreview' name='target' value='_top'/>

<table cellpadding='0' cellspacing='0' class='gsc-search-box'>

<tbody>

<tr>

<td class='gsc-input'>

<input autocomplete='off' class='gsc-input' expr:value='data:view.isSearch ? data:view.search.query.escaped : &quot;&quot;' name='q' size='10' title='search' type='text'/>

</td>

<td class='gsc-search-button'>

<input class='gsc-search-button' expr:value='data:messages.search' title='search' type='submit'/>

</td>

</tr>

</tbody>

</table>

</form>

Kode diatas tentunya tidak valid AMP HTML, maka harus kita modifikasi sehingga kode tersebut valid AMP HTML. Disini saya coba bagikan search box yang sudah lulus test AMP, dengan tampilan seperti pada blog saya sendiri dengan nominan warna putih dan bordir violet saat di hover, kalau belum saya rubah lagi..... kodenya ada dibawah.

<div id='akua'>

<form action='/search' id='akua' method='get' target='_blank'>

<input id='kamua' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;' type='text' value='Search.....'/>

<button class='diaa' title='Search' type='submit'><amp-img alt='search button' height='21' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLcWBnOzVSKE6Vr3DDRkBUujB3_49pBSTpLHln504JJOKKYEOqA6ZLZ4MxKhDou4dE7TWiw3cec-pzrTmoqRog0k1FFtP1Lwe2pbgL5A7LPpaQRufo0OHsIsUmvdqmxTwqxYc65mSu3o0/s1600/search-1.png' title='Search' width='21'/>

</button>

</form>

</div>

Untuk mendapatkan tampilan seperti pada blog saya, maka harus diatur dengan style sederhana. Saya contohkan untuk yang saya pakai sendiri tentunya pada blog saya.

#akua { float:center; width: 100%}

#kamua {color:gray;width:90%;padding:6px 10px 6px 10px;font:14px Arial;transition: all 0.2s linear 0s;margin:-10px 0 10px;border:1px solid #91007b;border-radius:3px;}

.diaa {background-color:#fff;width:58px;padding:2px 5px;margin:5px 0 0 -63px;top:4px;border-radius:0 2px 2px 0;font-size:13px;cursor:pointer;border:none;position:relative;}

#search-form:focus{outline:none;background:#fff;color:#444;border-color:#66afe9;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(248, 248, 255,0.9)}

.diaa:hover{background-color:#00a8ec}

#kamua:hover{border:1px solid #00a8ec}

#kamua:focus{border:1px solid #00a8ec;outline:none;color:black;}

Maka akan mendapatkan hasil seperti ini.

Bisa juga di tambahkan sedikit modifikasi target search engine ke halaman www.google.com/search dan hasil penelusuran akan muncul pada halaman search google, contoh penulisannya sebagai berikut.

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

<meta content='https://www.google.com/search?q={q}' itemprop='target'/>

<input id='skamua' name='as_sitesearch' type='hidden' value='https://sk1ndesign.blogspot.com'/>

<input id='kamua' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;' type='text' value='Search.....'/>

<button class='diaa' title='Search' type='submit'><amp-img alt='search button' height='21' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLcWBnOzVSKE6Vr3DDRkBUujB3_49pBSTpLHln504JJOKKYEOqA6ZLZ4MxKhDou4dE7TWiw3cec-pzrTmoqRog0k1FFtP1Lwe2pbgL5A7LPpaQRufo0OHsIsUmvdqmxTwqxYc65mSu3o0/s1600/search-1.png' title='Search' width='21'/>
</button>

</form>

Jangan lupa ganti link https://sk1ndesign.blogspot.com dengan url anda, lihat tampilannya dibawah ini.

Perlu diingat bahwa style diatas harus disesuaikan lagi dengan kondisi template yang anda pakai, karena beda template maka akan beda juga posisi dari search box tersebut, jadi perlu sedikit kejelian untuk menempatkannya terutama bagi penulis sendiri yang baru dalam tahap belajar.

Contoh berikut ini juga sudah support AMP HTML dan sudah saya uji sendiri, karena kebisaan saya hanya menguji hasil karya teman blog yang lain.

<form id='akut' method='get' action='/search' target='_blank' novalidate=''>

<input id='kamut' name='q' type='text' size='15' placeholder='Search.....' />

<input id='diat' type='submit' value='Search' />

</form>

Dengan penambahan style sederhana seperti dibawah ini.

#akut { width: auto; }

input:focus::-webkit-input-placeholder { color: transparent; }

input:focus:-moz-placeholder { color: transparent; }

input:focus::-moz-placeholder { color: transparent; }

#kamut {color:gray;width:76%;padding:6px 10px 6px 10px;font:14px Arial;transition: all 0.2s linear 0s;margin:-10px 0 10px;border:1px solid #91007b;border-radius:3px;}

#searchbox input { outline: none; }

#diat { background: #91007b; border-width: 0px; padding: 9px 0px; width: 13%; cursor: pointer; font: bold 12px Arial, Helvetica; color: #fff; text-shadow: 0 1px 0 #555; border-radius:3px }

#kamut:hover { border:1px solid #00a8ec }

#diat:hover { background: #00a8ec; }

#diat:active { background: #5b5d60; outline: none; }

Dengan menggunakan style diatas maka akan mendapatkan tampilan yang kurang lebih seperti dibawah ini, perlu diperhatikan juga bahwa akan terpengaruh juga dengan kondisi template yang anda pakai, jadi harus di modifikasi lagi supaya sesuai dengan template anda.

Search box diatas bisa juga di modifikasi dan dialihkan seperti search box pertama, contoh penulisannya seperti ini.

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

<meta content='https://www.google.com/search?q={q}' itemprop='target'/>

<input id='kamut' name='as_sitesearch' type='hidden' value='https://sk1ndesign.blogspot.com'/>

<input id='kamut' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;' type='text' value='Search.....'/>

<input id='diat' type='submit' value='Search' />

</form>

Apabila search box diatas diterapkan, maka akan di dapatkan tampilan seperti di bawah ini.

Link https://sk1ndesign.blogspot.com juga harus diganti, karena kalau tidak di ganti maka akan mesin telusur akan menampilkan isi blog saya...
Bagitu gampang cara mengganti search box yang tidak valid AMP HTML, namun apabila ada yang mengalami kesulitan dalam penerapannya, silahkan tinggalkan pesan.