إنضم لنا

Cara membuat search box Expanding





Assalamualaiqum.wr.wb



Seperti yang telah saya jadwalkan hari ini saya akan membuat tutorial Cara membuat search box Expanding, Seperti apa? Untuk melihat demonya kalian bisa lihat bawah ini


Sangat simpel karna cukup menggunakan html dan css, dan juga ringan untuk di pasang di mana sajah, saya tidak mengarahkan untuk memasang di blogspot ataupun di wordpress Semua terserah kalian Karna setiap layanan blog entah itu wordpres atau blogspot punya Get action berdeda beda jadi kalian bisa menyesuaikan nya sendiri

Css*
.search-form {
 position: absolute;
 right: 20px;
 top: 1px;
  border-radius:15px 15px 15px 15px;
}

.search-field {
 background-color: transparent;
 background-image: url(http://hasselpalm.com/wp-content/themes/twentythirteen/images/search-icon.png);
 background-position: 5px center;
 background-repeat: no-repeat;
 background-size: 24px 24px;
 border: none;
 cursor: pointer;
height:37px;
margin: 5px 0;  
padding: 0 0 0 30px;   
border-radius:15px 15px 15px 15px;  
position: relative;  
-webkit-transition: width 700ms ease, background 400ms ease;  
transition:  width 700ms ease, background 400ms ease;  
width: 0; }  

.search-field:focus {  
background-color: #fff;  
border: 1px solid blue;   
border-radius:15px 15px 15px 15px;  
cursor: text;  outline: 0; width: 300px; }  
.search-submit {   
display: none; }  
input[type="search"] {   -webkit-appearance: textfield; }

Penting!
Kalian bisa sesuaikan lebar dan tinggi dengan kode yang saya tandai warna merah

HTML*
<form role="search" method="get" class="search-form" action="http://www.webcensar.com/search?">
    <label>
     <input type="search" 
                class="search-field" 
                placeholder="Cari, Tutorial dan app"  
                value="" name="s" 
                title="efter:">
    </label>
    <input type="submit" class="search-submit" value="Cari, Tutorial Dan Apps">
   </form>
Kalian bisa sesuaikan Get Action sendiri atau kalian ganti url http://www.webcensar.com dengan url kalian

Seperti biasa salam hangat dan terimakasih #heppy

Penulis:

Seorang Penulis Asal Tegal jawa tengah 


PENTING !!!
Untuk pertanyaan di luar topik silahkan Gunakan Komentar Facebook atau Google+ sengaja Kami sediakan Untuk komentar random Dan untuk pertanyaan seputar article gunakan komentar disqus Terimakasih...

Disqus

Disqus comments:


Google+

Google+ comments:

Facebook

Facebook comments:

This site uses cookies from Google to deliver its services, to personalise ads and to analyse traffic. Information about your use of this site is shared with Google. By using this site, you agree to its use of cookies. Detail