Search Engine with Style

Jadwal posting terbatas nih, padahal follower makin lama makin naik aja, waduh, terpaksa ngepostnya agak dikendorin dulu, jadi 3-4 hari sekali hehehe...

Pada beberapa bulan lalu saya sudah pernah menerangkan cara membuat search engine (silakan baca: Memasang Search Engine Pada Blog dan Cara Membuat Search Engine dengan Mudah dan Cepat). Tetapi apabila menurut anda tampilan search engine anda kurang menarik, anda bisa mempermaknya supaya menjadi lebih menarik. Contohnya seperti diatas (untuk contoh live bisa dilihat: http://tipntrikblogging.blogspot.com)

Oke, langsung saja, tanpa panjang x lebar lagi... Begini caranya.

1. Login ke Blogger, lalu klik Tata Letak > Elemen Halaman > Tambah Gadget > HTML/Javascript.

2. Ketikkan kode berikut pada bagian isi:

<style type="text/css">
#inputtext{
/* Properti CSS dari kolom teks */
}
#submitbox{
/* Properti CSS dari tombol submit */
}
</style>
<form action="http://tipntrikblogging.blogspot.com/search" method="get"> <input class="textinput" name="q" size="30" type="text" id="inputtext" /> <input value="cari" class="buttonsubmit" name="submit" type="image" src="URLGAMBARTOMBOLSUBMIT" id="submitbox" /></form>

Perhatikan, selector #inputtext adalah selector dari bagian input teks. Sedangkan #submitbox adalah selector dari bagian tombol submit. URLGAMBARTOMBOLSUBMIT adalah URL dari gambar yang dijadikan tombol submit. Nih, contoh untuk yang ada di http://tipntrikblogging.blogspot.com:

<style type="text/css">
#inputtext{
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-color:green;
float:left;
margin:5px 0px;
padding:4px 5px;
height:20px;
font-family:Arial, Tahoma, Verdana;
font-size:12px;
}
#submitbox{
display:inline;
margin:5px;
}
#submitbox:hover{
-moz-transform:scale(1.2);
-webkit-transform:scale(1.2);
}
</style>
<form action="http://tipntrikblogging.blogspot.com/search" method="get"> <input class="textinput" name="q" size="30" type="text" id="inputtext" /> <input value="cari" class="buttonsubmit" name="submit" type="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjah99kSYpM8PpJmsvASRcf3ZDX2MvP7DsrUwsoziOKDFR_b5_rKavLfVwxhStvywZuGRnfESZJBwVEKNDFI7Vc64n8Cm7TIkWXLZdUDrw-TjWjv03dL1kFo45jhYoxsAHFfXQlhWOPQ0/s320/1267576773_search_button_green.png" id="submitbox" /></form>

Apabila anda mahir CSS, anda bisa berkreasi lebih lanjut untuk menciptakan variasi lainnya.

3. Terakhir, klik tombol Simpan.

Sedikit info dari saya, semoga bermanfaat.

Apabila anda menyukai postingan ini, anda bisa men-sharenya ke yang lain. Semisal ke Facebook atau Twitter. Silakan klik salah satu pilihan dibawah.

Artikel Menarik Lainnya