美化搜索框

转载请贴上本博主的链接


是不是觉得这样的搜索框比较漂亮 (我知道我弄到不是很漂亮 =-=，可以看就好了)

先到小工具 --> 添加小工具 --> Html / Jave Script 把以下代码放上去
<center>
 <img src="图片网址" />
<form action="/search" method="get"> <img src="图片网址 2" /> <input type="text" name="q" value="" style="width:160px; height:19px; background-color:#ffffff; color: #ffaad5; font-size: 11px; border: 1px double #ffaad5;border-radius:5px;box-shadow: 0 0 0.4em  #ffaad5 , 0 0 0.4em #ffaad5;" /> <img src="图片网址 2" />
<br /> <br />
<input type="button" value="Press Enter To Search❤" style="font-size: 12px; background-color:#ffffff; color: #ffaad5; border: 1px dashed #ffaad5;border-radius:5px;" /></form></center>
注：这个我分为两个部分来说哦，<br/> 下面的为第二部分

温馨小提示❤
第一部分：
橙色的字 --> 图片网址 (那个 Enter To Searh❤ 的图片)
粉色的字 --> 这个是那个搜索框框旁边两个小图片 (那个翅膀的)
黄色的字 --> 搜索框框的背景颜色
青色的字 --> 搜索框框里面字体的颜色
灰色的字 --> 搜索框框的厚度
蓝色的字 --> 框框的种类
红色的字 --> 框框的颜色
浅紫的字 -->搜索框框发光的颜色

第二部分：
橙色的字 --> 要显示的字
黄色的字 --> 背景的颜色
青色的字 --> 字体的颜色
灰色的字 --> 框框的厚度
浅蓝的字 --> 框框的种类
浅紫的字 --> 框框的颜色

框框的种类：
好了就保存起来，去看看你的部落格有没有美丽的搜索框框呗

随便制作了几个 Search 的图片，如果要使用可以拿去哦

http://i1111.photobucket.com/albums/h468/Han_Er21/search-1.png
 http://i1111.photobucket.com/albums/h468/Han_Er21/2b81d05b.png
 http://i1111.photobucket.com/albums/h468/Han_Er21/enter.png
❤

6 条评论:

留言规则 请勿犯规 :)

--------------------------------------------------------------------------------

1、由于评论太哆，有些我不能一一评论

2、如有捣乱着，恕我删除留言

3、有些博友要的教程，请勿再三询问，请到教程列表里仔细寻找

谢谢 :)

*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*