Widget Search Apple.com dengan gaya Floating

Widget Search Apple.com

Beberapa bulan yang lalu blog Rohis Facebook sudah membahas tentang tutorial Widget Search Blogger Ala Apple, silahkan lihat tutorialnya dan demonya, dan kali ini kembali dibahas Widget Search Apple.com dengan gaya Floating/melayang.

1. Login akun blogger Sahabat. Pilih menu Rancangan - Edit HTML
2. Cari taq ]]></b:skin> dan simpan kode css dibawah ini diatasnya.

#search {<br />}<br />#search input[type="text"] {<br />background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJxp7ugxk58t4TIeQWltOEvMBEGP08XL-64p62GjNhpmxUMpPdZTXzRnc2mEbEHxykM8VP-TjL2H1Qo52NECtVfMfEkZpz1hXQgGfRUZ8U3fXZhQ8ZgAQ6HbwwKHX2byeLeGSYjLdqxQA/s200/search-c.png)<br />no-repeat 10px 6px #fcfcfc;<br />border: 1px solid #d1d1d1;<br />font: bold 12px Arial,Helvetica,Sans-serif;<br />color: #bebebe;<br />width: 150px;<br />padding: 6px 15px 6px 35px;<br />-webkit-border-radius: 20px;<br />-moz-border-radius: 20px;<br />border-radius: 20px;<br />text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);<br />-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;<br />-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;<br />box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;<br />-webkit-transition: all 0.7s ease 0s;<br />-moz-transition: all 0.7s ease 0s;<br />-o-transition: all 0.7s ease 0s;<br />transition: all 0.7s ease 0s;<br />}<br />#search input[type="text"]:focus {<br />width: 200px;<br />}<br /><br />#float {<br />opacity: 0.8;<br />position:fixed;_position:absolute;bottom:50px; right:300px;<br />clip:inherit;<br />_top:expression(document.documentElement.scrollTop+<br />document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }<br />#float:hover {<br />opacity: 1.0 }

3. Cari taq </body> dan simpan kode dibawah ini diatasnya.

<div id='float'><form action='/search' id='search' method='get'><input name='q' placeholder='Search...' size='40' type='text'/><br /></form></div>

Untuk pengaturan tata letak bisa disesuaikan pada kode bottom dengan right, sedangkan untuk tingkat keredupan bisa diatur pada kode opacity: 0.8

Lihat Demonya, maaf link demonya dalam perbaikan, yang pastinya tutorial diatas sudah pernah saya (admin) coba dan berhasil.

 

Yang jago kode-kode-an silahkan berkreasi..! *smile

Sumber: Widget Search Blogger Ala Apple dan Membuat Objek Melayang