Cara Membuat Tombol Search Dengan CSS

| | Print This! | 3 comments

Do you like this post?

Cara membuat tombol Search atau Kotak Pencarian menggunakan Css pada blog, disini kita akan melakukan sedikit metode dengan menggunakan CSS kode pada sebuah blog. Silahkan ikuti petunjuk berikut ini :

• Login ke dashboard blogger Anda --> layout --> Edit HTML  
• Scroll ke kebawah dan cari tag </head> untuk lebih mudah gunakanlah Ctrl+F.
• Copy kode di bawah ini dan paste tepat sebelum tag </head>

<style type='text/css'>

div#search { background: transparent url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiid47VuPuniKz0QnidVRdo1I61BqSpAseFJSBrYRH7cVXVIa0Tc7LuNBUHdz1_lre37xVHynty6n6sLhoHJTQDim2R0Xbim9sJtXmCNtLjy-H9Aui8Z1B837H3PehM9utBYtcsDIJycM0u/&#39;) no-repeat scroll left top;margin: 0; float: right; width: 320px; height: 44px; }

div#search form { height: 44px; }
div#search form p { display: block; margin: 0; padding: 14px 0 0 30px; }
div#search form p input { width: 285px; border: 0; background: transparent none; color: #ffffff; }

</style>

• Sekarang simpan template kamu
• Pergi ke Layout --> Rancangan Halaman dan klik "Tambah gadget"
• Pilih "html/java script" dan tambah kode yang diberikan dibawah ini dan simpan.

<div id='search'>

<form action="http://NAMABLOGMU.blogspot.com/search" id='search form' method='get'>

<p><input id='searchform' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Type your search here...&quot;;}' onfocus='if (this.value == &quot;Type your search here...&quot;) {this.value = &quot;&quot;}' type='text' value='Type your search here...'/></p>

</form>

</div>

Catatan : Ganti "NAMABLOGMU" dengan nama Blog kamu

• Simpan dan lihat hasilnya

SELAMAT MENCOBA!!

Artikel Terkait

Posted in: CSS,Kotak Pencarian