#Cara Mudah Membuat Tombol Search Responsif di blogger

Cara Mudah Membuat Tombol Search Responsif di blogger

Hai sob, selamat datang, pada kesempatan ini kita mau share mengenai cara membuat tombol search responsif dan keren serta yang pasti yaitu ringan dan memenuhi aspek seo friendly, cara membuat tombol search responsif itu sangat mudah sekali sob, silahkan simak tutorialnya berikut ini sob:

membuat Kotak Pencarian Responsive

Copy dan pastekan CSS dibawah ini tepat diatas ]]></b:skin>

#search-box{position:relative;margin:0 auto;border:1px solid #ccc;padding:5px;border-radius:4px}#search-form{height:40px;background-color:#fff;overflow:hidden}#search-text{font-size:14px;color:#ddd;border-width:0;background:transparent;line-height:15px}#search-box input[type="text"]{width:90%;padding:10px 0 5px 1em;color:#333;outline:none}#search-button{position:absolute;top:5px;right:5px;height:40px;width:80px;color:#fff;text-align:center;border-width:0;background-color:#ff5848;cursor:pointer;text-transform:uppercase;border-radius:3px;outline:0}#search-button:hover{background:#333}

Kl!k simpan

Kl!k tata letak.
tambahkan element/add gadget dan pilih HTML/Javascript.
Copy dan pastekan html di bawah ini.

.<div id='search-box'>
<form action='/search' id='search-form' method='get' target='_top'>
<input id='search-text' name='q' placeholder='Kotak Pencarian Responsive ...' type='text'/>
<button id='search-button' type='submit'><span>Search</span></button></form></div>

Kl!k simpan

silahkan diedit sesuka kamu sob, semoga bermanfaat dan bisa anda terapkan diblog anda, oh iyah kode html diatas tidak harus diletakkan diwidget tapi bisa dimana saja di html template sobat. semoga bermanfaat.