CARA PASANG WIDGET FORM SEARCH VERSI MOBILE (RESPONSIVE)

CARA PASANG WIDGET FORM SEARCH VERSI MOBILE (RESPONSIVE)

pada tanggal September 05, 2018

Bagi yang sedang ngeblog dan ingin memasang form search/pencarian versi mobile, mari ikuti langkah - langkah di bawah ini.

Login ke Blogger.
Klik Tata Letak
Tambah Gadget
Pilih HTML/JavaScript

Copy Kode HTML dibawah ini kemudian pastekan kode tersebut ke dalam gadget HTML.

<style>
#nbc-searchgreen1
{
background: rgb(143,196,0); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(143,196,0,1) 0%, rgba(143,196,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(143,196,0,1)), color-stop(100%,rgba(143,196,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(143,196,0,1) 0%,rgba(143,196,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(143,196,0,1) 0%,rgba(143,196,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(143,196,0,1) 0%,rgba(143,196,0,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(143,196,0,1) 0%,rgba(143,196,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8fc400', endColorstr='#8fc400',GradientType=0 ); /* IE6-9 */
border-radius:10px;
width:100%;
}
#nbc-searchgreenbox1
{
padding:10px;
width:100%;
}
#nbc-searchgreensubmit1
{
border:1px solid green;
background: green;
padding:5px;
color:#ffffff;
font:14px verdana;
width:20%;
}
#nbc-searchgreeninput1
{
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border:1px solid #ffffff;
background:#ffffff;
padding:5px;
color:#888888;
font:14px verdana;
width:70%;
}
</style><br />
<div id='nbc-searchgreen1'>
         <form action='/search/max-results=8'  method='get' id="nbc-searchgreenbox1">
            <input name='q' id='nbc-searchgreeninput1' onblur='if (this.value == "") {this.value = "Search this site...";}' onfocus='if (this.value == "Search this site...") {this.value = ""}' type='text' value='Search this site...'/><br />
<input id='nbc-searchgreensubmit1' type='submit' value='Search'/><br />
</form>
</div>

Dibawah ini contoh hasil versi desktop

Selanjutnya untuk bisa tampil di Versi Mobile, masuk ke template klik edit HTML cari kode seperti yang diatas contohnya seperti gambar dibawah ini,
Sebelum Edit HTML agar di Backup terlebih dahulu.

Kemudian cari kode seperti di bawah ini.

Perhatikan kode mobile='yes' (artinya akan tampil pada Versi Mobile dan Desktop), mobile='no' (artinya akan tampil pada Versi Desktop saja), mobile=only (artinya hanya tampil di versi Mobile saja), jika kode tersebut tidak ada tambahkan saja setelah kode Locked.
Di bawah ini contoh tampilan Versi Mobile.

Selamat Mencoba.

See Also I Baca JUga

Komentar