Kotak Pencarian Google Mengambang Gratis CSS3 Untuk Blogger

On: 11:02 AM By: Dunia Kucing 1 comments

Kalian pasti tahu tentang Google Search bar. Anda bisa memasang style google search bar/kotak pencari mirip kotak pencarian google. silakan lihat bagian kanan atas blog saya, Berikut ini adalah trik untuk memasang kotak pencarian Google ke blog Anda. ingat ini bukan asli bar pencarian Google, Ini hanya CSS3 style mirip dengan pencarian google. Jika anda penasaran, kok gak mirip, silahkan lihat disini http://www.google.co.in/cse .

oke langsung saja saya akan share Cara memasang Kotak Pencarian Google Mengambang Gratis CSS3 Untuk Blogger.

Untuk DEMO silahkan lihat di sudut kanan atas →
Fitur

Mengambang statis (tetap) Search bar
CSS3 styled search bar
CSS3 animasi

Pergi ke Layout -> klik Add a Gadget
kemudian pilih HTML/JavaScript dari list widget
Biarkan Judul Kosong dan copy paste kode berikutke dalam bagian Konten

OR
Masuk ke akun Blogger -> Dashboard dan klik Template/Layout -> Edit HTML
Cari (Ctrl+F) <body
copy dan pastekan sesudah kode <body

<div class='noop-searchbox' id='noop-searchbox'>
      <form action='/search' id='noop-searchform' method='get'>
        <input id='s' name='q' onblur='if (this.value == "") {this.value = "Search...";}' onfocus='if (this.value == "Search...") {this.value = ""}' type='text' value='Search...'/>
        <button id='sbutton' type='submit'>
          <span id='simg'/>
        </button>
      </form>
    </div>
<style type="text/css">
#sbutton {
background: -moz-linear-gradient(center top , #4D90FE 0%, #4787ED 100%) repeat scroll 0pt 0pt transparent;background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d90fe), color-stop(100%,#4787ed));
background: -webkit-linear-gradient(top, #4d90fe 0%,#4787ed 100%);
background: -o-linear-gradient(top, #4d90fe 0%,#4787ed 100%);
background: -ms-linear-gradient(top, #4d90fe 0%,#4787ed 100%);
background: linear-gradient(top, #4d90fe 0%,#4787ed 100%);background-color: #4d90fe;
border: 1px solid #3079ED;
border-radius: 2px 2px 2px 2px;
color: #FFFFFF;
height: 27px;
min-width: 76px;
padding: 0 21px;padding-bottom: 2px;
}
#sbutton:hover{ background-color: #357AE8;
background-image: -moz-linear-gradient(center top , #4D90FE, #357AE8);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d90fe), color-stop(100%,#357ae8));
background: -webkit-linear-gradient(top, #4d90fe 0%,#357ae8 100%);
background: -o-linear-gradient(top, #4d90fe 0%,#357ae8 100%);
background: -ms-linear-gradient(top, #4d90fe 0%,#357ae8 100%);
background: linear-gradient(top, #4d90fe 0%,#357ae8 100%);
border: 1px solid #2F5BB7;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);}
#simg {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipYf4Cbp_yLWwTnIt5FbK0g3P6dZQLkIokogU1B9OTOEbeuP38LD9JroMBaTDMCJDywgmpnf7rAFdWRO8FdFwshbLOUHmRHUa7klpj_pN0Y5ST3XXned7bFXWRIHj6HL0nJYl0Em6b0ro/s1600/searchicon.png") no-repeat scroll 0 0 transparent;
display: inline-block;
height: 14px;
margin: 0;
width: 17px;z-index:101;
}#s:hover {box-shadow: 0 1px 2px #C1C1C1 inset;}
#s {border: 1px solid #BCBCBC;border-radius: 4px 4px 4px 4px;font: italic 14px times New Roman;padding: 4px 2px;width: 146px; -moz-transition: width 0.2s ease-in 0s; -webkit-transition: width 0.2s ease-in; -o-transition: width 0.2s ease-in;}
#s:focus {width: 200px;}
.noop-searchbox {
display: block;
position: fixed;
right: 0;
top: 1%;
max-width: 300px;min-width: 238px;
z-index: 100;
}
</style>

Cukup sekian. Terimakasih telah membaca artikel Cara membuat Kotak Pencarian Google Mengambang Gratis CSS3 Untuk Blogger.

Semoga bermanfaat.