建立Blogger内置搜索

Blogger内置搜索的建立，可以在小工具那里直接使用博客搜索，但是样式很不好看，所以我们自己建立博客内搜索，样式参照了Google Cloud官方Blogger的样式，最终效果见本Blogger右侧的搜索栏。因代码不是很熟悉，可能有多余的代码出现，如果大家看到，希望可以指正下，把代码精简下，好了开始吧：

1、建立自定义HTML的小工具，写入一下内容：

<div class='searchBox'><form action="http://www.mifia.com.cn/search" style="display:inline;" id="searchthis" method="get">
<input placeholder='Search blog ...' type="text" id="b-query" name="q" title='Search This Blog' type='text'/>
</form></div>

2、在Blogger的模板里对搜索小工具进行定义外观，加入以下内容：

.searchBox input {
border: 1px solid #eee;
color: #212121;
color: rgba(0,0,0,.87);
font-size: 14px;
padding: 8px 8px 8px 40px;
width: 180px;
font-family: Helvetica, sans-serif;
background: url("http://blog.mifia.com.cn/search.png") 8px center

no-repeat;
}
.searchBox ::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: rgba(0,0,0,.54);
}
.searchBox :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #000;
opacity: 0.54;
}
.searchBox ::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #000;
opacity: 0.54;
}
.searchBox :-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #757575;

}

3、保存，同时测试搜索，注意把代码里含有mifia的代码更换成你自己的内容就好，代码宽度可以在第2条里的width项里进行调整，我的换成180正好合适。