Forum, Blogger, diskusi, ilmu, berbagi, blogging, sharing, ide, inspirasi Kamu Forum

Senin, 07 Juni 2010

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="http://4.bp.blogspot.com/_uhg4L8e7Ry8/S42wNRFPPoI/AAAAAAAAAEc/XM4YQmFAbEw/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.

Buzz It

Artikel Menarik Lainnya



5 komentar:

Manchester United Tech mengatakan...

wah bagus banget nih, bt saya sudah follow, follow balik yah...

BloOnd Blog mengatakan...

keren sob search enginenya..dicoba dulu..

Koje mengatakan...

wah mantap bro..
thanks ya buat infonya :)
http://ekos06.student.ipb.ac.id

investasi online terbaru dan tercepat mengatakan...

ane pake dr default template aja deh biar gak ribet... takut nanti jadi salah

poker mengatakan...

poker online | Agen Domino | Agen Poker|Kumpulan Poker | bandar poker | Judi Poker | bandar qiu | Judi online terpercaya

Posting Komentar

Apa pandapat anda terhadap artikel ini? Berkomentarlah tanpa rasa malu, ragu dan takut.

Komentar diluar tanggung jawab pemilik blog. Jika anda berkomentar yang berbau pornografi atau sara, maka itu risiko anda sendiri.

Jika anda mengirimkan komentar spam, maka akan saya hapus.

Jika anda tidak ingin komentar anda ditampilkan, silakan kirimkan e-mail di halaman email me.

Jika anda ingin berceloteh bebas, silakan tuju halaman ini.

Anda dapat menggunakan beberapa tag HTML seperti <b>, <i>, <u>, <a>, <strike>, <sub>, <sup>, dan lain-lain. Anda juga dapat menggunakan emoticon Plurk seperti (lmao) (taser) (haha).

Untuk link exchange bisa dilakukan dihalaman ini, sedangkan banner exchange dihalaman ini. Permintaan link exchange dan banner exchange selain dihalaman tersebut tidak akan dilayani.



Emoticon yang dapat digunakan [Tampilkan] [Sembunyikan]



:-))
:-)
:-D
(lol)
:-p
(woot)
;-)
:-o
X-(
:-(
:'-(
:-&
(K)
(angry)
(annoyed)
(wave) | (bye)
B-)
(cozy)
(sick)
(:
(goodluck)
(griltongue)
(mmm)
(hungry)
(music)
(tears)
(tongue)
(unsure)
(highfive)
(dance)
(blush)
(bigeyes)
(funkydance)
(idiot)
(lonely)
(scenic)
(hassle)
(panic)
(okok)
(yahoo)
(cry)
(doh)
(brokenheart)
(drinking)
(girlkiss)
(rofl)
(money)
(rock)
(nottalking)
(party)
(sleeping)
(thinking)
(bringit)
(worship)
(applause)
8-)
(gym)
(heart)
(devil)
(lmao)
(banana_cool)
(banana_rock)
(evilgrin)
(headspin)
(heart_beat)
(ninja)
(haha)
(evilsmirk)
(eyeroll)
(muhaha)
(taser) | (rammi)
(banana_ninja)
(beer)
(coffee)
(fish_hit)
(muscle)
(smileydance)
(fireworks)
(goal)
(bzzz)
(dance_bzz)
(Русский)
(code)
(morning)

Cara menggunakan: ketikkan emoticon yang diinginkan. Untuk yang ada pemisah berupa "|" maka itu adalah alternatif. Seperti (wave) | (bye) maka bisa (wave) bisa (bye)


Pengikut

Follow via NetworkedBlogs



Jangan lupa jadi fans Muhammad Rizki Fadillah's Blog di Facebook. Klik link di bawah ini.

http://www.facebook.com/pages/Tips-Trik-Matematika-Tutorial-Blogging-Muhammad-Rizki-Fadillahs-Blog/277782561876

Setelah mengklik link diatas, klik tombol Become A Fan untuk menjadi fans Muhammad Rizki Fadillah's Blog.