Membuat Search Engine Menarik dan Cantik

Selamat Bertemu Kembali. Mau dongeng dahulu tapi tak memiliki bahan. Langsung saja ke isi tulisannya supaya tak jenuh bacanya. Oke!!!

Sebenarnya inti dr goresan pena ini bukan sesuatu yg baru alasannya adalah fitur ini sudah disediakan oleh pihak BLOGGER. Tapi, bagi yg ingin mempunyai fitur tersebut dgn performa yg unik, bisa memakainya. Fitur yg saya maksudkan ialah kotak Search Engine.

Cara membuatnya mirip berikut. Untuk cara pertama ini, tinggal copy paste saja ke sidebar/widget blog Anda. Kode di bawah ini adalah kode tolok ukur. Artinya, tampilannya yakni penampilan lazim (penampilan biasa saja).

Perhatikan instruksi berikut:

nama-blog.wargamasyarakat.com/search”
method=”get”> Search” class=”buttonsubmit” name=”submit” type=”submit” />

Kode di atas akan menciptakan seperti ini.

Agar bervariasi, bisa menambahkannya dgn latar gambar. Lihat contohnya.

https://lh3.googleusercontent.com/_QeIxO28ukBc/TZLjW_tRnmI/AAAAAAAAALY/pA6d3PspvXo/385512.jpg); width: 350px; padding:15px 15px 0 15px;”>

method=”get”> Search” class=”buttonsubmit” name=”submit” type=”submit” />

Kode di atas akan menciptakan kotak Search seperti di bawah.

Untuk cara yg kedua, dgn memasukkan pribadi ke dlm arahan HTML blog Anda.

Caranya, yakni:

1. Login ke akun Anda.
2. Pada halaman DASBOR, klik PENGATURAN.
3. Klik EDIT HTML.
4. Silahkan copy aba-aba berikut ke daerah di mana Anda akan menyimpannya.

Langkah selanjutnya, Anda menciptakan kode CSS-nya agar tampilannya menarik. Letakkan isyarat berikut ini di atas isyarat ]]>.

/*- Pencarian -*/
.cariform
display: inline-block;
zoom: 1; /* ie7 hack for display:inline-block */
*display: inline;
border: solid 1px #5e6366;
padding: 3px 5px;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
-webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1);
-moz-box-shadow: 0 1px 0px rgba(0,0,0,.1);
box-shadow: 0 1px 0px rgba(0,0,0,.1);
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
background: -moz-linear-gradient(top, #fff, #ededed);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ffffff’, endColorstr=’#ededed’); /* ie7 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ffffff’, endColorstr=’#ededed’); /* ie8 */

.cariform input
font: normal 12px/100% Arial, Helvetica, sans-serif;

.cariform .carifield
background: #DBDBDB url(E:/Wallpaper/Desain Ian/bukutrans.png);
padding: 7px 6px 5px 8px;
width: 240px;
border: solid 1px #bcbbbb;
outline: none;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
box-shadow: inset 0 1px 2px rgba(0,0,0,.2);

.cariform .caributton
color: #000;
border: solid 1px #494949;
font-size: 14px;
font-weight: bold;
height: 28px;
width: 45px;
text-shadow: 0 1px 1px rgba(0,0,0,.6);
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
background: #ccc;
background: -webkit-gradient(linear, left top, left bottom, from(#9e9e9e), to(#454545));
background: -moz-linear-gradient(top, #9e9e9e, #454545);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#9e9e9e’, endColorstr=’#454545′); /* ie7 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#9e9e9e’, endColorstr=’#454545′); /* ie8 */

Setelah itu, simpan template Anda. Selesai & lihat akhirnya. Demikian cara menciptakan kotak Search Engine pada blog. Sampai berjumpa kembali pada postingan selanjutnya.