教程 | 美化搜索框 (BT/BS)

一月 14, 2022 | views
Comments 0
教程 | 美化搜索框 (BT/BS) 这篇教程从 PMR 前拖到 holiday 之后。真的是觉得内疚死了、最近被逼着要早睡早起。托它的福,早上 11 点半我睡醒了 (( 众:这样叫很早莫 ? 对我来说那真的是很

教程 | 美化搜索框 (BT/BS)

这篇教程从 PMR 前拖到 holiday 之后。真的是觉得内疚死了、最近被逼着要早睡早起。托它的福,早上 11 点半我睡醒了 (( 众:这样叫很早莫 ? 对我来说那真的是很早了莫,平时是睡到两三点的。oMo 每天早上 4 / 5 点才睡,你们讲啦,想不睡到两三点都不可以 ;(

Okay, 废话太多了。这篇教程不大常看见(当然,我没有说它没有被发布过,也是有教程部落格发布过了)应该有蛮多人都不知道这篇教程吧…… ? 好啦,或许很多人都知道,可是总有一小部分的不知道,这样行了莫 >P< 好滴,废话真的不要再讲了,看教程咩。

To Miharu -
I'm so sorry that promised you to post this tutorial as soon as possible but seem like I'm didn't keep my promise. Sorry. Please forgive me :)


- Tutorial requested by Miharu -

Blog Template 使用者
1. 布局 - 添加小工具 - HTML/JavaScript

2. 将以下代码添加进去:

<center>
<form action="/search" method="get"><input type="text" name="q" value="" style="width:160px; height:19px; background:url(背景 url); color: #000000; font-size: 12px; border: 1px solid #000000;" />
<img src="http://img.juhife542d.com图片 url" /><br /> <br />
<input type="button" value="Click to Search" style="font-size:12px; color:#000000; background: #cccccc; border:1px dashed #FFEBCD;" /></form></center>

3. 保存即可。

Blogskin 使用者
1. 模板

2. 将上面的代码添加进去你想要搜索框出现的地方

3. 预览看看你想要的效果有没有出现,即可保存。

小解释
# 我将代码分为两个部分来解释噢。的就是搜索框的美化代码的就是搜索键的美化代码

搜索框的美化代码
褐色代码:搜索框的高度、宽度(可以更改成你想要的高度、宽度)
橙色代码:搜索框的背景 url
红色代码:搜索框的字体颜色
蓝色代码:搜索框的字体大小
紫色代码:搜索框的边框粗度、种类、颜色
青色代码:小图标的图片 url(如果不要置放小图标,可将 <img src="http://img.juhife542d.com图片 url" /> 删除)

搜索键的美化代码
紫色高亮:搜索键里显示的字(可更改成你喜欢的)
蓝色高亮:搜索键里字体的颜色
红色高亮:搜索键的背景色(可改成背景图)
绿色高亮:搜索键的边框粗度、种类、颜色