Search Box Simpel dan Keren Untuk Blogspot

Viyan Pradita Selasa, Agustus 16, 2011

Search Box Simpel dan Keren Untuk Blogspot, dari judulnya saja sobat pasti sudah tahu apa yang kiranya akan saya share kali ini. Setelah kemarin saya posting tentang Cara Membuat Link Nudging Dengan jQuery, saya melanjutkan untuk melengkapi koleksi tips dan trik di blog saya ini. Search Box (kotak pencarian di blogspot) pastinya sobat sudah tidak asing lagi mendengarnya, jadi saya rasa tidak perlu panjang lebar saya menjelasakan kembali tentang apa dan fungsi dari Search Box/kotak pencarian di blogspot ini. Oia, dibilang simpel karena kita hanya menggunakan kode CSS saja dalam membuatnya, pastinya gak ribet deh.
Dan agar lebih jelasnya saya sertakan juga contoh demo/screenshot dibawah ini:




Langsnung ke TKP, dan simak langkah-langkah cara membuat Search Box Simpel dan Keren Untuk Blogspot:


1. Login ke akun blogger sobat
2. Masuk ke rancangan/design
3. Pilih Page Element/Elemen Laman
4. Kemudian Add Gatget dan pilih HTML/Javascript, dan masukan kode search box dibawah ini:


Style 1

kode-blogger_searchbox1
><style type="text/css">
#w2b-searchbox{background:url(http://3.bp.blogspot.com/-6qJ3K_tmQ9k/TlcWJNAlejI/AAAAAAAAA-Y/QKGB-vIam_w/s320/kode-blogger_searchbox1.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}
form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>


Style 2

kode-blogger_searchbox2
<style type="text/css">
#w2b-searchbox{background:url(http://1.bp.blogspot.com/-0BBC_Sxrb6k/TlcWJRLmfJI/AAAAAAAAA-g/2E4u2Kbb1K0/s1600/kode-blogger_searchbox2.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}
form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>


Style 3

kode-blogger_searchbox3
<style type="text/css">
#w2b-searchbox{background:url(http://4.bp.blogspot.com/-Z73Tww42VDI/TlcWJ_LrMQI/AAAAAAAAA-o/Djih0jTihg4/s1600/kode-blogger_searchbox3.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}
form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>


Style 4

kode-blogger_searchbox4
<style type="text/css">
#w2b-searchbox{background:url(http://1.bp.blogspot.com/-f2D4_8HmVDw/TlcWKCfDQwI/AAAAAAAAA-w/V6RPSHyHROc/s1600/kode-blogger_searchbox4.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 12px;margin:0;}
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value=""/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>


Style 5

kode-blogger_searchbox5
<style type="text/css">
#w2b-searchbox{background:url(http://3.bp.blogspot.com/-dIFRxQlgo-U/TlcWKLZNrfI/AAAAAAAAA-4/lvSOBOBdzHw/s1600/kode-blogger_searchbox5.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 12px;margin:0;}
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value=""/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>


Style 6

kode-blogger_searchbox6
<style type="text/css">
#w2b-searchbox{background:url(http://1.bp.blogspot.com/-SLuIDQ0kDB8/TlcW1voR0jI/AAAAAAAAA_A/FNDCIKqyzmk/s1600/kode-blogger_searchbox6.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 12px;margin:0;}
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value=""/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>



Sip... Search Box Simpel dan Keren Untuk Blogspot diatas hanyalah beberapa saja yang bisa saya share, pastinya ada lebih banyak lagi diluar sana.
Semoga Bermanfaat.

Description: Search Box Simpel dan Keren Untuk Blogspot
Reviewer: Viyan Pradita - Itemreviewed: Search Box Simpel dan Keren Untuk Blogspot - Rating: 4.5

Ditulis Oleh :

Artikel Search Box Simpel dan Keren Untuk Blogspot ini dipublish pada hari: Selasa, Agustus 16, 2011. Semoga artikel ini bermanfaat untuk Anda. Copy paste wajib dengan ijin saya, serta menggunakan link sumber seperti di bawah. Gunakan etika. Saya akan berlakukan DMCA COMPLAINT secara langsung tanpa pemberitahuan atas copas tanpa mengikuti ketentuan yg berlaku.

36 komentar
Terjun Ke Kolom Komentar

  1. Keren search boxnya. futuristik

    Salam ukhuwah

    BalasHapus
  2. Wah kerenn..
    Baru ini saya bisa Liat

    BalasHapus
  3. wah rajin ya bikin nya.. tp keren sob. mantap

    BalasHapus
  4. bagus sekali mas search engine nya :(

    saya sangat tertarik utak atik seperti ini.. tapi saya selalu terantuk kendala yg sangat basic.. saya pake wp self hosting.. tapi saya gak mengerti pengaturan ini semua karena harus lewat cpanel kan mas?!?! saya gak ngerti cpanel :(

    BalasHapus
  5. Keren sob, kalo mau bikin sendiri susah gak ya? B)

    BalasHapus
  6. keren sob, tp ane lebih suka pencarian kostum by gugel tp hasil lebih valid dan artikel2 yg masuk k keyword+index jd kalo pake yg ini gk optimal :D

    BalasHapus
  7. wih mantap juga nie gan.........

    BalasHapus
  8. @Nuzulul Quran: Terimakasih banyak masbro, sukses selalu :)

    @Majalah Masjid Kita: SearchBox bukan Search engin mas. hehe
    Gak lewat Cpanel jg bisa mas, dipengaturan WPnya, tepatnya di menu Editor, disitu pasti ada style CSS, atau gak, cari aja form untuk kode searchnya. Bisa koq mas.

    @SHUDAI AJLANI (dot) COM: sepertinya gak susah mas, tinggak kreasinya kita sendiri mau bagaimana.

    @Asmara Susanto: yah itu sih beda lagi gan, yg lagi saya share disini kan cara membuatnya (kreasi) tp BTW nice info gan.. :)

    BalasHapus
  9. keren sob,,, gw pinjam yg merah yahh,,heeeee,,,
    ,,dw mampir di blog gw jg yah

    BalasHapus
  10. @blogs online: Sip, maaf sob, untuk gambar search-nya masih salah itu, nanti saya perbaiki secepatnya. :)

    BalasHapus
  11. Sip, beres, silahkan dicoba :)

    BalasHapus
  12. wow keren banget ne search box nya,,,
    oiya saya mw tanya ne mas, kenapa blog saya tiba2 semua content yg ada di sidebar jadi berada di bawah postingan (semua widget jdi kayak gtu mas). saya sudah gonta ganti template tetap begitu semua. itu masalahnya ada dimana mas, sudah ampun ne ga bisa apa2. klo berkenan mas bza cek http://xfileguru.blogspot.com/
    semoga ada yg bza membantu..
    sudah stress ne mikir ne masalah..
    mohon bantuannya yah smua
    terima kasih salam sukses para blogger..

    BalasHapus
  13. @Thego: Kasus, biasanya karena Lebar dari Konten sama sidebar tidak sesuai dengan lebar "content-wrapper".

    Tapi, setelah melihat blog sobat, kayaknya bukan disitu masalahnya, kalau ada backup-n/template aslinya, bisa di cocokan di kodenya sob (biar lebih mudah tentunya)
    Klo boleh tw habis diedit apanya sob.

    BalasHapus
  14. Makasih mas udah liat, saya udah ga edit template sma skali mas. terakhir udah satu bulan lebih kira2 ngedit ne template. saya juga ga ngerti coding mas tu dulu jga cuma ganti warna doang. kmaren tu abis posting, malemnya saya liat loh ko berantakan gne blog ane.. trus langsung za saya gonta ganti template tpi tetep gtu, ampe template bawaan blogger jga tetep gtu kan aneh banget.. masak kena kutukan ne blog..hehehe pusing dah..
    utk saat ne sya biarkan dlu za mas spa tau dapet hidayah di akhir ramadhan ne..hahahah
    smoga da solusi ne, sayang klo berantakan gne..
    makasi mas udah mau cek blog ane...

    BalasHapus
  15. @Thego: wehh, aneh juga, Kalau sampe ganti template aja masih kek gitu ??, lebih gampangnya lagi kalo saya bisa praktek langsung sob :D

    BalasHapus
  16. Trus gmana ne mas enaknya..
    Dah bingung ne ngurusin, ane cek ternyata berantakan hanya pada homepage za. ane buka postingan tampilannya ga berantakan mas..

    BalasHapus
  17. ada yang search box nya model girlie or pake2 boneka gitu gak? *hehehe :)) maklum ce suka pilih :D

    BalasHapus
  18. Asslmkm teman....wah artikelnya keren nih....tpi maaf nih, ane langsung coba sblum berkomentar....thanks banget ya...oh iya, ane boleh minta izin posting jga search boxnya diblog ane....moHon krja samanya^_^

    BalasHapus
  19. wah akhirnya dapet juga yang keren disini, thanks sob:) saya pakai yang hitam putih yah..

    BalasHapus
  20. Saya naksir search box blog ini tanpa tombol pake tekan enter aja warnanya item lagi, tolong di posting bos

    BalasHapus
  21. bos, gimana sih caranya bikin tab menu kaya punya bos. keren.. :) mungkin bisa share caranya :) makasih..

    BalasHapus
  22. Ane suka yang versi google daripada versi kayak gini btw bagus juga dicoba dulu :D

    BalasHapus
  23. Keren ... ane pake gan di blog ane. Makin cihuy nih.

    BalasHapus
  24. bagus gan saya juga pake
    untuk blog free game itu sangat membantu
    http://www.freeconsol.blogspot.com

    BalasHapus
  25. Makasih Gan.. Mantap. Saya pake yang merah ya....

    BalasHapus
  26. nice info gan, mantap.. ane make yang style 5
    credit for you gan :D

    ini buat sendiri atau bgimana?? klo buat sendiri, skalian ajarin ane deh :D

    BalasHapus
  27. wah keren mas bro ..
    saya pertamax di blog mohon bantuannya ya kalo ada yang belum ngerti.
    nationaljourney.blogspot.com

    BalasHapus
  28. gak bisa copas ya gan, ribet geh harus manual ketik

    BalasHapus
  29. Thanks gan, sudah banyak blog saya yang terbantu dengan memakai kode ini...

    BalasHapus
  30. keren gan http://myadif.heck.in

    BalasHapus

Catatan:
Link hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS DI SINI...</i>


web design blogs Bloggers - Meet Millions of Bloggers