02 April 2012

Cara Membuat Search Box Unik

Kotak Pencarian atau Search Box sangatlah penting untuk dipasang karena berguna untuk memudahkan pengunjung melakukan pencarian pada sebuah web atau blog, dan pada blogger pun sebenarnya sudah ada gadget yang sudah siap pakai,

Namun jika ingin memperindah tampilan Search Box silahkan mencoba Search Box Unik yang akan saya share kali ini,

Search Box yang bergaya Apple ini menggunakan CSS3 dengan  border-radius, box-shadow, text-shadow untuk menampilkan Cool Effect, untuk contohnya dapat dilihat pada yang saya pasang, atau dapat dilihat demonya disini.

Jika ingin Search Box seperti itu juga, langsung aja ikuti Cara dibawah ini

Langkah Pertama :
  • Masuk ke Rancangan Tata Letak
  • Klik pada Add Gadget
  • Lalu Copy Paste kode dibawah ini


  • Simpan
  • Dapat juga ditempatkan sesuai dengan keinginan anda

Langkah Kedua :
  • Pilih salah satu kode Search Box dibawah ini
  • Masuk ke Rancangan Template EDIT HTML
  • Simpan kode yang akan anda pilih diatas ]]></b:skin>

1.  Tampilan Search Box on Dark Background


Gambar Search




#search {
}
#search input[type="text"] {
    background: url(search-dark.png) no-repeat 10px 6px #444;
    border: 0 none;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #777;
    width: 150px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
    }

#search input[type="text"]:focus {
    width: 200px;
    }



ATAU


2.  Tampilan Search Box on Light Background


search light



#search {
}
#search input[type="text"] {
    background: url(search-white.png) no-repeat 10px 6px #fcfcfc;
    border: 1px solid #d1d1d1;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #bebebe;
    width: 150px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
    }

#search input[type="text"]:focus {
    width: 200px;
    }



ATAU


3.  Tampilan Apple.com Inspired Search Box

searchbox apple



#search {

}

#search input[type="text"] {
    background: url(search-white.png) no-repeat 10px 6px #444;
    border: 0 none;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #d7d7d7;
    width:150px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
    }

#search input[type="text"]:focus {
    background: url(search-dark.png) no-repeat 10px 6px #fcfcfc;
    color: #6a6f75;
    width: 200px;
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    }



Source kode   :   bloggermint.com


8 komentar:

  1. Mmmm.....jadi pingin coba...zwiiing!

    BalasHapus
  2. Coba aja, unik dan elastis juga simple,,, ^_^

    BalasHapus
  3. Silahkan sobat,,, :)

    BalasHapus
  4. makasih kak ! Join my site ya ! http://radhityayoga.blogspot.com

    BalasHapus
  5. thanks dah berkunjung,,

    BalasHapus
  6. bagus banget sudah ane pake....hehehe
    http://gias-alauddin.blogspot.com

    BalasHapus

Follow by Email

Popular Posts

Copyright@2015 999 Blog || Designed ByBlogger Templates-Blogger