Home » » Cara Membuat Kotak Search keren di blog

Cara Membuat Kotak Search keren di blog

Cara Membuat Kotak Search keren di blog - Search box (kotak pencarian) sangat penting untuk blog dimana kegunaanya untuk mencari keseluruhan artikel yang ada pada blog tersebut oleh kerena itu haris715 akan membahas mengenai Panduan mengenai pemasangan search box ini semoga dapat membantu Anda yang belum memiliki elemen kotak search di template blognya. Berikut ini adalah demo skin dengan CSS pembuatan kotak search keren  dan elegant ini.

membuat kotak search box beautifull skin css

Mengenai pembuatannya di blogger sangatlah mudah, hanya dengan memanfaatkan keragaman dan design CSS serta sedikit tambahan elemen HTML, Kotak Search Box ini dapat dipasang dengan mudah.

Langsung ke Tutorialnya :

Ikuti langkah di bawah ini satu persatu :
1. Sig in dulu ke blogger kalian
2. Pilih Tata letak kemudian Klik Tambah Widget / Add a Gadget.
3. Pilih HTML/Javascript.
4. Copy kode di bawah ini dan letakkan pada widget tadi

Contoh Search Box Style blue

<style type="text/css">#mediablogger-searchbox {    border-radius: 5px;    background: url(http://1.bp.blogspot.com/-yWZnkjCe4tY/UQr5OeN8MXI/AAAAAAAAAWE/-EFf5XtroXU/s1600/impoint.blogspot.com-blue.png) no-repeat scroll center center transparent;  width: 307px;  height: 50px; disaply: block;}  form#mediablogger-searchform {display: block;  padding: 9px 16px;  margin: 0;}  form#mediablogger-searchform #s {    padding-left: 24px !important;  padding: 7.5px;  margin: 0;  width: 198px;  font-size: 16px;    font-family: georgia;  font-style: italic; color: #666666; vertical-align: top;    border: none;    background: transparent;}  form#mediablogger-searchform#sbutton {  margin: 0;    padding: 0;    height: 40px;  width: 74px; vertical-align: top; border: none;  background: transparent;}</style><div id="mediablogger-searchbox"><form id="mediablogger-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>
Bagi teman - teman yang ingin pasang dengan warna lain cukup ganti kode warna biru di atas dengan kode URL gambar di bawah ini sesuai keinginan kalian

Style Red ( Merah )

http://2.bp.blogspot.com/-kyV43LzLedQ/UQr5gVVxaEI/AAAAAAAAAWc/Q-2_hR17RgU/s1600/impoint.blogspot.com-red.png

Style  ( Orange )

http://2.bp.blogspot.com/-qwEuTidco9E/UQr5bisH4yI/AAAAAAAAAWU/ZpAUuwXOvYE/s1600/impoint.blogspot.com-orange.png

Style Green ( Hijau )

http://1.bp.blogspot.com/-17dWPUuCMEE/UQr5WvW2inI/AAAAAAAAAWM/xWAzhlw4ez0/s1600/impoint.blogspot.com-green.png

Kemudian klik SAVE Dan lihat hasilnya jika ada yang kurang teman - teman bisa sampaikan lewata kolom komentar di bawah, Demikianlah tutorialnya semoga bermanfaat salam haris715

Description: Cara Membuat Kotak Search keren di blog
Rating: 4.5
Reviewer: riz liz
ItemReviewed: Cara Membuat Kotak Search keren di blog

1 komentar:

  1. oh gitu caranya buat search box, hmm nanti di coba deh buat di blog bikin search box custom gitu

    ReplyDelete
Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Mohon Berkomentarlan dengan baik sesuai dengan tema / isi posting di atas
Serta tidak mengandung PORNO,SARA,KATA2 KASAR DAN JOROK
Terima kasih atas perhatianya :)