Search Button Ala Evomagz

AA Sciences, Aldi Andreansyah - share button blog, Search Button Ala Evomagz, Search Button keren Ala Evomagz.

Sudah tak asing lagi di kalangan para website atau blogger dengan adanya search button dalam tampilan sebuah web tersebut di karena kan adanya tampilan search button ini salah satu fungsi nya yakni sebagai mempercantik tampilan dengan adanya fitur search button tersebut.

Fungsi adanya search button lainnya namun tidak hanya menjadi nya sebagai pencantik tampilan tetapi yang paling inti yakni dengan adanya search button yaitu sebagai alat mempermudah user paling terutama pengunjung untuk mengetahui jenis artikel maupun postingan yang di maksud nya tersebut, yang dimana pengunjung jika melihat terdapat nya search button dalam sebuah website/blog tersebut maka otomatis pengunjung tersebut akan sedikit lebih nyaman di karena kan adanya fitur search button tersebut.

Nah membahas mengenai search button jika kalian belum mengerti search button itu apa sih ???

Search button adalah alat untuk mempemudah kinerja pencarian atau pada intinya search button adalah tombol yang dimana terdapat fitur pencarian yang bertujuan untuk mencari teks tertentu yang kita inginkan tersebut yang di dalam nya terdapat kolom untuk menelusuri sebuah teks.

Bagaimana, kalian sudah mengerti bukan ?

Di kali ini pembahasan mengenai pembuatan search button ala evomagz, yaps evomagz siapa sih yang tidak kenal dengan salah satu evomagz ini, evomagz bukanlah berarti sosok seorang atau website sekalipun, tetapi evomagz adalah sebuah Template yang dimana evomagz ini sebuah Template yang dikhususkan untuk situs Blogger saja, di karena kan Template dari evomagz ini mengandung script² seperti HTML, CSS, Jquery dan Javascript script sekalipun jika biasa tidak bisa di gunakan terutama oleh wordpress.

Baca :

• Share Button Ala Evomagz Simple
• Share Button Ala Evomagz

Sebuah Template Evomagz pun di rangkai oleh seorang pemilik situs/blog sendiri siapa lagi jika bukan Mas Sugeng, ya Mas Sugeng siapa lagi yang tidak kenal dengan salah satu user tersebut ia pun termasuk salah satu rekan AA Sciences, sudah banyak nya ilmu² yang ia berikan khususnya panduan dalam blogger yang dapat di bilang hasilnya pun memuaskan di karenakan ia sudah sedikit mahir dalam sebuah pengeditan editan sebuah blog sehingga ia pun membagikan nya panduan blogger sudah tidak diragukan nya lagi.

Langsung saja jika kalian sudah penasaran mengenai Cara Membuat Search Button keren Ala Evomagz pada tutor kali ini, berikut tutor nya :

Cara Membuat Search Button Ala Evomagz

Pembuatan CSS nya terlebih dahulu :

• Pastikan kalian sudahlah Login terlebih dahulu pada akun Blogger kalian.
• Template - > Edit HTML - >CTRL+F (untuk memudahkan pencarian) lalu cari kode ]]></b:skin> atau dapat juga kode </style>.
• Jika sudah ditemukan kode ]]></b:skin> atau </style> nya tadi, langsung saja kalian Salin kan Script CSS/Search Button Ala Evomagz nya di bawah ini tepat sebelum ]]></b:skin> atau </style>, berikut CSS nya :

#search-form {

 background:#000;

 float:right;

 margin:0 0;

 height:48px;

 width:200px;

}

#search-form table {

 width:100%;

 margin:0 0 0 0;

}

#search-form td.search-box {

 padding-right:30px;

}

#search-form input#search-box[type="text"] {

 background:#fff;

 height:36px;

 line-height:36px;

 margin:5px 0 5px 10px;

 padding:0 10px;

 width:99%;

 color:#30cc91;

 border:none;

}

#search-form input#search-button[type="submit"] {

 font-family: FontAwesome;

 background:#016fba;

 color:#fff;

 height:36px;

 line-height:36px;

 margin:5px 10px 5px 0;

 padding:0 12px;

 border:none;

 outline:none;

 transition:all 0.25s;

 -moz-transition:all 0.25s;

 -webkit-transition:all 0.25s;

}

#search-form input#search-button[type="submit"]:hover{

 background:#ddd;

 cursor:pointer;

}

#search-form input#search-box[type="text"]:focus {

 background:#eee;

 outline:none;


}

Kalian dapat mengubah warna nya tersebut, dengan kode warna HTML dan dapat juga kalian atur antara jarak, batas dan lebar tinggi nya sesuai kemauan kalian.

Penerapan HTML nya :

• Masih dalam mode Template - > Langsung saja cari bagian navigasi kalian atau dapat juga bagian yang dimana kalian ingin meletakkan button search ini baik itu header, menu navigasi, sidebar,dll. berikut script HTML nya :

<form action='/search' id='search-form' method='get'><table><tbody><tr><td class='search-box'><input id='search-box' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' type='text' value='Search...' vinput=''/></td> <td class='search-button'><input id='search-button' type='submit' value='&#xf002;'/></td></tr></tbody></table></form>

Penting :

Pastikan kalian memasang / menyalin script di atas dengan benar agar tidak terjadi nya kerusakan dalam button search nya tersebut yakni awalan yang ber tag <form> dan akhiran nya </form>.

Sekiranya sampai cara diatas search button evomagz sepenuhnya nya sudah terbuat, tetapi jika kalian ingin menambahkan agar sebuah search button tampil responsive, maka kalian tambahkan script CSS nya dibawah ini tepat sebelum </head> atau ]]></b:skin> pun bisa, berikut CSS nya :

@media only screen and (max-width:768px){

#search-form {

  width:100%;

  margin:0 0 0 0 !important;

 }

#search-form {

  width:100%;

  background:#444;

 }

 #search-form td.search-box {

  padding:0 10px !important;

 }

 #search-form td.search-button {

  padding:0 10px;

  width:1%;

 }

 #search-form input#search-box[type="text"] {

  margin:0 0 0 0;

 }

 #search-form input#search-button[type="submit"] {

  margin:0 0 0 0;

 }


}

• Terakhir, langsung saja simpan Template dan lihat hasil nya.

Sekian sejenak mengenai pembahasan kali ini Cara Membuat Search Button Ala Evomagz yang dapat AA Sciences bagikan,semoga bermanfaat dan menambah wawasan kalian, Amin.

Share this post