Cara Membuat Gadget Search Windows 8 Metro Tile di Blog

Apa sih Metro Tile? Metro Tile itu adalah gaya yang sekarang sedang terkenal dan banyak dibicarakan oeh para penggemar Windows 8, heheh emang sih gayanya memikat banget, dan unik. Seperti Judulnya, kali ini JOS998 mau membagi-bagikan kalian Widget search box ala Metro Tile Windows 8 untuk kalian para blogger.


Caranya? Mudah banget, kalian tinggal copy kode, dan paste ke kotak Widget.
Baca Ini  ↓
BAGAIMANA CARA MEMASANG WIDGET DENGAN KODE HTML/JAVASCRIPT
Yang Klik Diatas, hanya untuk para blogger pemula

Copy Kode Berikut untuk Cara Membuat Kotak Search  di Blog Bergaya Metro Tile Windows 8

<style type="text/css">
#search-form-feed{float:left;position:relative;padding:15px 10px;width:300px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:#D8D8D8}
#feed-q-input{font:normal 110%px Tahoma,Arial,Sans-Serif}
.search-button{display:block;float:left;width:13px;height:13px;padding:5px 25px;margin:0 0 0 12px;font-size:1em;color:white;border:1px solid;border-color:#AAA #AAA #888 transparent;-webkit-border-radius:0 2px 2px 0;border-radius:0 2px 2px 0;cursor:pointer;top:-1px;left:-3px;position:relative;background:#CD3232;background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#CD3232),color-stop(100%,#AC2A2A));background:-moz-gradient(linear,left top,left bottom,color-stop(0%,#CD3232),color-stop(100%,#AC2A2A));background:-o-gradient(linear,left top,left bottom,color-stop(0%,#CD3232),color-stop(100%,#AC2A2A));background:gradient(linear,left top,left bottom,color-stop(0%,#CD3232),color-stop(100%,#AC2A2A))}
.search-button:hover{background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#5F5F5F),color-stop(100%,#383838));background:-moz-gradient(linear,left top,left bottom,color-stop(0%,#5F5F5F),color-stop(100%,#383838));background:-o-gradient(linear,left top,left bottom,color-stop(0%,#5F5F5F),color-stop(100%,#383838));background:gradient(linear,left top,left bottom,color-stop(0%,#5F5F5F),color-stop(100%,#383838))}
#feed-q-input{display:block;width:190px;height:20px;border:1px solid #CCC;background-color:white;font:normal 13px Tahoma,Arial,Sans-Serif;color:#CCC;margin:0;padding-left:10px;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;float:left}
#feed-q-input:focus{color:#333;outline:none}
#search-result-container{width:300px;height:450px;overflow:auto;position:absolute;z-index:999;padding:0;left:0;margin:20px 0 0;display:none;background-color:white;font-size:11px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#search-result-container a{text-decoration:none;color:black;font-weight:bold;font-size:12px;display:block;line-height:15px;height:auto;border:0;padding:0}
#search-result-container a:hover{color:#686868}
#search-result-container li{margin:0 0 5px;padding:7px 8px;list-style:none;background-color:white;overflow:hidden;word-wrap:break-word;border:1px solid #E2E2E2;color:#313131}
#search-result-container mark{background-color:yellow;color:black}
#search-result-container h4{margin:0 0 10px;font:normal bold 12px 'Trebuchet MS',Arial,Sans-Serif;color:black}
#search-result-container ol{background:transparent;border:none;margin:0 0 10px;padding:0 0}
#search-result-container li img{display:block;float:left;margin:0 5px 1px 0;background-color:whiteSmoke;padding:0}
#search-result-loader{top:85%;position:absolute;z-index:999;width:60px;background-color:#ACACAC;color:white;padding:3px 5px;margin:-2px 0 0;font:normal bold 10px Arial,Sans-Serif;display:none}
.post-body ul,.post-body ol{margin:10px 0 10px 25px;}
</style>

<div id="search-form-feed">
<form action="/search" onsubmit="return updateScript();">
<input id="feed-q-input" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Search&quot;;}" onfocus="if (this.value == &quot;Search&quot;) {this.value = &quot;&quot;;}" onkeyup="resetField();" value="Search" type="text"/>
<input class="search-button" type="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3AJR-pKqRd1jwEgfAdQBl7TQM6DCUVx1_J56wKohX3QyUGaY1r0OJhaTZkYPi12f0jg3EGHwgteLNMnPx6PR5q9geVohZR3S4So53ojiB3p_y2oqlzQ8XylB9Z_6k169pBQfWtzecKTY/s1600/search_box_icon.png"/>
</form>
<div id="search-result-container"></div>
<div id="search-result-loader">Searching...</div>
</div>

Nah, dengan demikian kamu sudah berhasil membuat Kotak Search Bergay Metro Tile Windows 8. Kalau mau bertanya, jangan malu-malu ya.. ketik aja di kotak komentar dibawah

Sumber : JOS998.blogspot.com