Search Button Ala Simplify

AA Sciences, Aldi Andreansyah - Search Button,  Search Button Ala Simplify, Search Button keren Ala Simplify2, Cara Membuat Search Button Ala Simplify2 Blog.

Dengan adanya tampilan search button pada sebuah web merupakan salah satu cara mempercantik sebuah web terutama pada blogger di kali ini yang akan AA Sciences sampaikan tentunya.

Namun terpenting bukan hanya itu hal yang inti dalam adanya search button pada tampilan sebuah website ataupun blog sekalipun tetapi fungsi yang paling banyak digunakan yakni untuk memproses yang dimana memudahkan para user terutama para pengunjung untuk mencari sesuatu agar yang kita tuju tersebut mudahnya di carikan dengan adanya fitur search button yang sudah terpampang pada website maupun blog kalian tersebut.

Membahas mengenai search button, barangkali para blogger khususnya nya user web / blog yang masih awam dengan bahasa indonesia, Search button yakni adalah sebuah tools/alat yang dimana memudahkan kita baik user tetapi yang utama search button di berikan untuk para pengunjung agar mendapatkan kenyamanan yang tepat dengan adanya search button pada website atau blog kalian tersebut, search button pun merupakan alat mempermudah untuk proses pencarian, sesuai namanya yakni search button yang berarti tombol pencarian yang berarti search button pada umumnya yakni tombol pencarian layaknya seperti Google yang dimana kita ingin mencari sesuatu pasti terutama melalui search button tersebut bukan, dan pula kita disajikan dengan kolom tertentu yang dimana memudahkan para pengunjung untuk menulis apa saja dalam search button tersebut.

Membahas mengenai Simplify sebagian besar terdapat para blogger awam yang belum tahu apa itu Simplify, yaps Simplify. Simplify bukan lah berarti aktor dalam sebuah website bahkan website nya sendiri pun tetapi Simplify ini adalah sebuah Template yang dimana Template simplify ini sudah banyak kita temui pada website tertentu terutama website yang menssupport sebuah script berbasis HTML, CSS, Jquery, Javascript script² tersebut biasanya sudah support dalam via Blogger.

Simplify terdapat beberapa versi yakni untuk yang versi free (gratis) dan yang berbayar nya (premium), tetapi untuk versi yang gratis tidak kalah berbeda dengan tampilan sebuah premium nya masalah Tata Letak dan Template pada simplify rasa free pun sama persis nya, tetapi yang berbeda yakni masalah Fitur, Seo, Fast Loading nya. Pada Template rasa Premium yakni terdapat fitur kepentingan yakni masalah fitur, fitur dalam simplify ini sudah tidak diragukan lagi mestinya sudah memilki fitur beragam yakin header, sidebar, footer dan bagian lainnya. kedua, masalah SEO nya, yang berarti mudahnya dipandang dalam tampilan mata Search Engine sehingga Dianggap situs profesional, ketiga yang paling inti yakni Fast Loading yang berarti cepat nya loading dalam sebuah blog merupakan dambaan para kaum user dan menjadikan kenyamanan untuk para pengunjung, sehingga tidak hanya itu Pihak Google pun menyarankan kita memilki sebuah blog yang fast loading agar tampil terkemuka pada Search Engine Google tersebut.

Note :

Jika kalian menginginkan Template Simplify Premium, Contact Us saja Situs AA Sciences

Membahas mengenai search button ala Simplify, Simplify merupakan sebuah Template yang dirangkai oleh user sekaligus web designer ya siapa lagi jika bukan Mbak Arlina, sudah banyak sekali tutor khususnya Template blogger yang ia berikan kepada pengunjung setia situs nya tersebut agar para pemakai merasakan kesenangan dengan adanya Template bagus yang ia buat tersebut, bukan hanya itu Template yang ia berikan pun terdapat versi free dan premium nya tersebut sehingga jika ada yang mengiinkan yang gratis bisa diunduh secara cuma² dan yang Premium kalian dapat oreder nya dengan mbak arlina sendiri sudah pastinya jika yang berbayar itu memuaskan bukan (hihi).

Nah mungkin hanya cukup sekian mengenai pembahasan sedikit mengenai search button ala simplify, jika penasaran maka langsung saja simak bagaimana cara pembuatan search button ala arlina nya di bawah ini, berikut tutornya :

Cara Membuat Search Button Ala Simplify2 di Blog

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 Simplify2 nya di bawah ini tepat sebelum ]]></b:skin> atau </style>, berikut CSS nya :

.search-boxy{display:none;width:230px;height:27px;float:right;padding:0;position:relative;transition:all .1s}

#search-formy,#searchform,.search-button{border:0;line-height:27px}

#searchform{position:relative;border:0;margin:9px 0 0 0}

#search-formy{background:rgba(0,0,0,.01);border-radius:3px;color:rgba(0,0,0,.5);width:100%;padding:0 30px 0 10px;height:27px;line-height:27px;font-size:13px;margin:0;border:1px solid rgba(0,0,0,0.05);transition:all .3s}

.search-button{background:none;width:30px;padding:0;text-align:center;margin:0;top:0;right:0;font-size:13px;color:#666;position:absolute;border-radius:0;text-shadow:none;box-shadow:none}

#search-formy:focus,#search-formy:hover,.search-button:focus,.search-button:hover{background:rgba(0,0,0,0);border-color:rgba(0,0,0,0.14);outline:0;color:rgba(0,0,0,.5)}

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

Penerapan HTML nya :

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

<div class='search-boxy'>

<form action='/search' id='searchform' method='get'>

<input id='search-formy' name='q' placeholder='Cari artikel lainnya...' type='text'/>

<span class='search-button'><i class='fa fa-search'/></span>

</form>

</div>

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 <div> dan akhiran nya </div>.

Sekiranya sampai disini search button ala Simplify sepenuhnya nya sudah terbuat, tetapi jika kalian ingin menambahkan agar sebuah search button simplify ini nya agar tampil sebagai seperti mengikuti ukuran layar pada desktop dan seluler ( 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-boxy{width:100%;margin:0 auto;padding:10px;}

.search-boxy:hover,.search-boxy:active,.search-boxy:focus{width:100%;}

#search-boxy{padding:0 0 10px 0}

#search-boxy{width:96%;float:left;padding-right:0;margin:0 2%}

.search-boxy{height:auto;}

#searchform{margin:0 10px}

}




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

.search-boxy{background:#fff;display:block;border-bottom:1px solid rgba(0,0,0,0.05);}

#search-formy,#searchform,.search-button{line-height:38px}

#search-formy{height:38px;line-height:38px}

}

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

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

Share this post