IKLAN
Kontak Saya
300x250
Selamat Datang Di BiriBisi

Sabtu, 28 Januari 2017

Cara Membuat Kotak Pencarian Keren



Definisi kotak pencarian


Kotak pencarian adalah sebuah alat (gadget) yang di pergunakan untuk mencari atau mengakses konten-konten yang mungkin ada di sebuah blog, seperti kotak pencarian yang ada pada sebuah mesin pencarian (search engine) google.com dan lain-lainnya.


Kita tahu bahwa blogger.com yang merupakan sebuah situs pembuat blog gratisan secara default telah menyertakan kotak pencarian pada setiap blog yang di buat pada platformnya, walaupun pada akhirnya banyak diantara kita yang mengganti kotak pencarian default blogger tersebut dengan kotak pencarian dari pihak ketiga. Baca Cara Menghilangkan Tulisan Beranda.


Hal itu menunjukkan bahwa kotak pencarian (search box) itu benar-benar sangat penting keberadaannya di sebuah blog. Apa jadinya bila sebuah blog tidak memiliki kotak pencarian? Sebetulnya tidak apa-apa sih, selagi masih terdapat link-link yang bisa untuk mengakses konten-konten yang ada di dalamnya, seperti sudah terdapatnya daftar isi atau sudah terpasangnya widget label pada blog tersebut.


Kalau tidak, maka akan fatallah jadinya, sebab sudah pasti bahwa konten-kontennya tidak dapat di buka oleh pengunjung. Jika demikian, maka percuma saja kita membuat blog. Betul kan? He he he!


Saat pertama kali saya bisa membuat blog, saya merasa sangat senang, hampir semua gadget yang tersedia di blogger saya pasang semuanya dalam blog saya. Berhari-hari saya pandangi penampilan blog saya itu, keren banget, sudah hampir mirip dengan penamilan blog terkenal. Itu yang ada dalam pikiran saya, dengan tanpa melihat blog-blog lain alias tanpa adanya konfirmasi. 


Namun setelah saya mencoba melihat blog-blog lain ternyata keadaannya berbeda 180 derajat dalam segala hal. Itu sedikit cerita lucu seorang pemula seperti saya, yang belum apa-apa sudah mengklaim sedemikan rupa padahal belum mengkonfirmasinya. He he he!


Menjelajah untuk mencari kotak pencarian


Kemudian saya berkeinginan untuk mengganti kotak pencarian bawaan blogger dengan kotak pencarian lain, tapi kotak pencarian yang saya inginkan itu kotak pencarian yang mudah di ubah-ubah penampilannya oleh seorang penula seperti saya ini, baik ukuran panjang-lebarnya, ukuran tinggi-pendeknya, ataupun warnanya, sehingga kalau sewaktu-waktu saya bosan dengan penampilannya, maka bisa saya rubah dengan mudah.


Maka saya pun segera berselancar siang malam tanpa mengenal lelah untuk mencari kotak pencarian yang saya inginkan tersebut. Dan akhirnya saya menemukan kotak pencarian yang bisa di letakkan di mana saja, di header blog atau pun di sidebarnya, mudah di rubah-rubah warnanya, mudah di tinggikan, dan mudah di lebarkan.


Kotak pencarian inilah yang akan saya bagikan kepada anda. Siapa tahu selera anda sama atau hampir sama dengan selera saya. Jika demikian, maka anda tidak salah bila memilih kotak pencarian ini. Lihat Cara Memasang Tombol Share Melayang.


Memasang kotak pencarian


Untuk memasang kotak pencarian ini tidak sulit kok, anda hanya perlu beberapa langkah, sedikit ketelitian, dan mau berinovasi saja. Berikut ini langkah-langkah yang harus anda lakukan:


#Pertama. Masuk ke dashbord blog anda


#Kedua. Pilih menu "Tata Letak", lalu klik "Tambahkan gadget"


# Ketiga. Pilih gadget HTML /JavaScript




#Keempat. Pastekan script berikut ini ke dalamnya:


<style>

/*---BiriBisi Search Box---*/
.cf:before, .cf:after{    content:"";    display:table;}
.cf:after{    clear:both;}
.cf{    zoom:1;}  
 /* Form wrapper styling */.search-wrapper {width: 600px;margin:10px 0;box-shadow: 0 1px 1px rgba(0, 0, 0, .4) inset, 0 1px 0 rgba(255, 255, 255, .2);}
/* Form text input */
.search-wrapper input {width: 378px;height: 18px;padding: 10px;float: left;font: bold 18px 'lucida sans', 'trebuchet MS', 'Tahoma';border: 0;background: #660000;border-radius: 3px 0 0 3px;}
.search-wrapper input:focus {    outline: 0;    background: #ffffff;    box-shadow: 0 0 2px rgba(0,0,0,.8) inset;}
.search-wrapper input::-webkit-input-placeholder {   color: #ffffff;   font-weight: normal;   font-style: italic;}
.search-wrapper input:-moz-placeholder {    color: #999;    font-weight: normal;    font-style: italic;}
.search-wrapper input:-ms-input-placeholder {    color: #999;    font-weight: normal;    font-style: italic;}  
/* Form submit button */.search-wrapper button {overflow: visible;position: relative;float: right;border: 0;padding: 0;cursor: pointer;height: 38px;width: 200px;font: bold 18px/35px 'lucida sans', 'trebuchet MS', 'Tahoma';color: white;text-transform: uppercase;background: #0000ff;border-radius: 0 3px 3px 0;text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);}  .search-wrapper button:hover{       background: #e54040;}   .search-wrapper button:active,.search-wrapper button:focus{     background: #c42f2f;    outline: 0; }
.search-wrapper button:before { /* left arrow */    content: '';    position: absolute;    border-width: 8px 8px 8px 0;    border-style: solid solid solid none;    border-color: transparent #d83c3c transparent;    top: 12px;    left: -6px;}
.search-wrapper button:hover:before{    border-right-color: #e54040;}
.search-wrapper button:focus:before,.search-wrapper button:active:before{        border-right-color: #c42f2f;}    
.search-wrapper button::-moz-focus-inner { /* remove extra button spacing for Mozilla Firefox */    border: 0;    padding: 0;}   </style><form action="/search" class="search-wrapper cf">        <input type="text" method="get" name="q" placeholder="Ketik Disini..." required="" />        <button type="submit">Telusuri</button>    </form>

#Kelima. "Simpan". Lihat hasilnya di blog anda


Merubah lebar, tinggi, dan warna seach box

Sudah saya sebutkan di atas bahwa kotak pencarian ini sangat fleksibel dan bisa dirubah semau kita. Baca Cara Ngeblog Pakai Android Agar Irit Kuota Internet. Karenanya tidak ada kesulitan sama sekali bagi anda untuk merubahnya, anda hanya di tuntut untuk teliti dan mau mencobanya saja. Berikut ini caranya:


1. Merubah lebar dan tingginya


Untuk merubah lebar kotak pencarian ini, anda harus menggati angka pada script berikut ini:

/* Form wrapper styling */.search-wrapper {width: 600px;margin:10px 0;box-shadow: 0 1px 1px rgba(0, 0, 0, .4) inset, 0 1px 0 rgba(255, 255, 255, .2);}
/* Form text input */

Angka width:600px yang berwarna merah itu menunjukkan lebar wadah kotak secara keseluruhan. Dan apabila anda ingin ukuran kotak selebar halaman postingan, maka gantilah angka tersebut dengan yang lebih besar, misalnya 1400px. Kemudian anda rubah angka yang ada pada script beriku ini:


.search-wrapper input {width: 378px;height: 18px;padding: 10px;float: left;font: bold 18px 'lucida sans', 'trebuchet MS', 'Tahoma';border: 0;background: #660000;border-radius: 3px 0 0 3px;}


Angka 378px itu menunjukkan lebar tempat pengetikan saat mencari artikel. Untuk menyesuaikan lebar wadah kotak 1400px di atas, anda harus menambah angkanya menjadi, misalnya 1180px.


Untuk merubah tingginya, lihat angka height:18px pada script di atas. Jika mau menambah tingginya, anda tinggal menambah angkanya, tetapi harus di sesuaikan dengan tinggi kotak tombol "Telusuru" agar seimbang.


Disamping itu anda juga bisa merubah lebar kotak tombol "Telusuri"nya. Lihat script berikut ini:


/* Form submit button */.search-wrapper button {overflow: visible;position: relative;float: right;border: 0;padding: 0;cursor: pointer;height: 38px;width: 200px;font: bold 18px/35px 'lucida sans', 'trebuchet MS', 'Tahoma';color: white;text-transform: uppercase;background: #0000ff;border-radius: 0 3px 3px 0;text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);}


Angka width:200px  itu menunjukkan lebar kotak tombol "Telusuri"nya, dan angka height:38px itu menujukkan tingginya. Tetapi sebelum anda merubah-merubah kotak pencarian ini, sebaiknya coba pasang terlebih dahulu script yang sudah jadi di atas di blog anda, setelah itu, silahkan anda rubah-rubah.


2. Merubah warna kotak pencarian


Sedangkan untuk merubah-rubah warnanya, anda tinggal rubah saja kode warna pada script berikut ini:


/* Form text input */

.search-wrapper input {width: 378px;height: 18px;padding: 10px;float: left;font: bold 18px 'lucida sans', 'trebuchet MS', 'Tahoma';border: 0;background: #660000;border-radius: 3px 0 0 3px;}

Kode background: #660000; ini adalah kode warna coklat tua untuk kotak pengetikan . Kalau mau warna merah menyala ganti saja dengan kode warna #ff0000, dan lain-lain.


Untuk merubah warna kotak tombol search atau "Telusuri" perhatikan kode warna yang ada pada script berikut ini:


/* Form submit button */.search-wrapper button {overflow: visible;position: relative;float: right;border: 0;padding: 0;cursor: pointer;height: 38px;width: 200px;font: bold 18px/35px 'lucida sans', 'trebuchet MS', 'Tahoma';color: white;text-transform: uppercase;background: #0000ff;border-radius: 0 3px 3px 0;text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);}


Kode warna background: #0000ff ini adalah kode warna biru tua untuk kotak tombol Telusuri, anda bisa menggantinya dengan kode lain yang anda suka, misalnya #000000 untuk warna hitam pekat.


Untuk merubah warna tulisan "Ketik Disini, rubahlah kode warna yang ada di script berikut:


.search-wrapper input::-webkit-input-placeholder {   color: #ffffff;   font-weight: normal;   font-style: italic;}


Kode warna  {   color: #ffffff ini kode warna putih untuk tulisan "Ketik Disini". Kalau anda ingin warna lain, silahkan kode #ffffff diganti dengan kode warna yang anda inginkan, misalnya di ganti dengan kode #000000 untuk warna hitam.


Untuk mengganti warna tulisan "Telusuri", perhatikan script berikut ini:


/* Form submit button */.search-wrapper button {overflow: visible;position: relative;float: right;border: 0;padding: 0;cursor: pointer;height: 38px;width: 200px;font: bold 18px/35px 'lucida sans', 'trebuchet MS', 'Tahoma';color: white;text-transform: uppercase;background: #0000ff;border-radius: 0 3px 3px 0;text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);}


Tulisan  'trebuchet MS', 'Tahoma';color: white inilah yang menyebabkan tulisan "Telusuri" berwarna putih. Apabila anda ingin mengganti warnanya, maka gantilah dengan tulisan warna dalam bahasa Inggris, seperti red=merah atau blue=biru agar warna tulisan "Telusuri" menjadi berwarna merah atau biru. Baca juga Cara Merubah Warna Teks Judul dan Deskripsi Blog.


Demikianlah panduan dan tutorial cara membuat kotak pencarian keren yang bisa saya sajikan untuk anda. Semoga bermanfaat. Amin!

Comments
0 Comments

Tidak ada komentar: