Cara Membuat Widget Search Box Alexa di Blog

Cara Membuat Widget Search Box Alexa di Blog – mungkin sudah banyak blogger yang tahu akan hal ini. untuk membuat widget search box di blog untuk dipasang pada sidebar blog maupun bagian lainnya tidak terlalu sulit untuk dilakukan. Memang sepertinya jarang dari para blogger yang menggunakan widget search box alexa di blognya sebagai kotak pencarian utama pada blog tersebut, namun jika anda mungkin berminat untuk memasangnya kedalam blog tentu langkah ini sangat mudah. Tampilan dari widget search box alexa ini juga cukup menarik dan tentu tidak kalah dengan tampilan widget search box lainnya. Bentuk widget yang ramping dan minimalis tentu terkesan cantik untuk melengkapi desain blog menjadi lebih berwarna. Seperti apa tampilan dari widget search box alexa ini, bisa terlebih dahulu bisa dilihat seperti yang tertera pada demo. Selanjutnya untuk memasang widget search box ini ke blog, maka berikut adalah tutorial Cara Membuat Widget Search Box Alexa di Blog.

1. Login ke akun blogger.
2. Lalu copy kode dibawah ini.

<style>
.balexa {
font: bold 12px Tahoma, Geneva, sans-serif,"times new roman";
color: #fff;
background: #0361d2;
border-radius: 5px 5px 5px 5px;
padding: 7px 15px;
cursor:pointer;
margin: 5px 0 0 3px auto;
}
.balexa:active {
cursor:wait;
position: relative;
top: 2px;
}
.balexa::-moz-focus-inner {
border: none;
padding: 0;
margin: 0;
}
.blsbox {
border: 1px solid #D3D3D3;
border-radius: 4px;
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;
color: #666;
font: 14px "trebuchet ms", sans-serif;
padding: 7px 15px;
width: 160px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.blsbox:hover {
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
</style>
<form method="get" action="http://www.alexa.com/data/details/traffic_details" target="_blank">
<input class="blsbox" name="url" maxlength="255" size="40" type="text" onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter the Url...&quot;;}'
onfocus='if (this.value == &quot;Enter the Url...&quot;) {this.value = &quot;&quot;}'
type="text" value="Enter the Url..." />
<input value="Alexa" type="submit" class="balexa" /></form>

3. Selanjutnya klik Tata Letak >> Tambah Widget >> HTML/Javascript lalu paste kode disitu kemudian klik Simpan dan selesai. Cukup sudah sampai disini untuk Cara Membuat Widget Search Box Alexa di Blog.

DEMO: