給blogger用的語音搜尋框

這個搜尋框在chrome可以用語音搜尋，

效果可參考綜合口味的搜尋區～開放給需要的人使用:)

以下直接複製並貼到html/javascript小工具即可，如果想放在除了側邊欄以外的地方就請自行去範本小工具內貼囉！

複製開始！

---

<!--madeBy-chodaict-->

<div id='searchBar'>
<style>
#search-box {
position: relative;
margin: 0;
padding: 0;
float:right;
}


#search-form{
width: 220px;
height: 30px;
border: 1px solid #ccc;
background-color: #fff;
overflow: hidden;
margin: 0 70px 0 0;

-webkit-border-radius: 30px 0 0 30px; //搜尋框的圓角，四個數字分別是左上、右上、右下、左下
-moz-border-radius: 30px 0 0 30px; //搜尋框的圓角，四個數字分別是左上、右上、右下、左下
border-radius: 30px 0 0 30px; //搜尋框的圓角，四個數字分別是左上、右上、右下、左下
}

#search-text{
font-size: 14px;
color: #ccc;
border-width: 0;
background: transparent;
}


#search-box input[type=&quot;text&quot;]{
width: 90%;
padding: 10px 0 10px 1.5em;
color: #333;
outline: none;
}


#search-button {
position: absolute;
top: 0;
right: 0;
height: 32px;
width: 70px;
font-size: 26px;
color: #fff; //搜尋符號的顏色
text-align: center;

-webkit-border-radius: 0 30px 30px 0; //搜尋按鈕的圓角，四個數字分別是左上、右上、右下、左下
-moz-border-radius: 0 30px 30px 0 ; //搜尋按鈕的圓角，四個數字分別是左上、右上、右下、左下
border-radius: 0 30px 30px 0 ; //搜尋按鈕的圓角，四個數字分別是左上、右上、右下、左下

border-width: 0;
background-color: #666;//搜尋按鈕的顏色
cursor: pointer;

-webkit-transform: scaley(-1);
-moz-transform: scaley(-1);
-o-transform: scaley(-1);
transform: scaley(-1);

line-height: 0px;
}

#search-button:hover{
background: #999; //滑鼠經過搜尋按鈕時的顏色
}

</style>

<div id='search-box'>
<form action='/search' id='search-form' method='get' target='_top'>
<input id='search-text' name='q' placeholder='想找點什麼嗎？'
size='30' type='text'
x-webkit-speech='true' //這個就是語音功能！
/>
<button id='search-button' type='submit' value='Google Search'><span>&#9740;</span></button>
</form>
</div></div>
<!--madeBy-chodaict-->

---

複製結束！

如果想調整的話請自便～XD