子比主题 – 侧边栏帮助网站SEO的小工具

飞流 · 发表于 2025-10-10 16:15:00

资源无需等待，交易就趁现在，全面资源整合网络大咖云集，让你轻松玩转互联网！

您需要登录才可以下载或查看，没有账号？立即注册

×

这篇文章之前我也写过一款帮助SEO小工具，那个是比较有色彩的，不过这篇文章是非常简约的一款侧边栏seo搜索小工具，喜欢的自行部署吧！

tengfei_down - 2025-10-10T161353.231.webp

代码部署

将下面的代码放到：WP后台–>>外观–>>小工具

<div class="search-widget">
<div class="banner">百度一下-协助本站SEO</div>
<div class="search-container">
<input type="text" id="searchInput"
placeholder="腾飞博客"
value="腾飞博客">
<button onclick="handleSearch()">搜索</button>
</div>
</div>
<style>
/* 组件基础样式 */
.search-widget {
width: 100%;
margin: 10px 0;
transition: all 0.3s;
}
/* 顶部横幅样式 - 修改部分 */
.banner {
background: #FE3459; /* 改为指定的红色 */
color: white;
padding: 12px;
text-align: left; /* 文字左对齐 */
border-radius: 4px 4px 0 0;
font-size: 14px;
}
/* 搜索区域布局 */
.search-container {
display: flex;
gap: 8px;
padding: 12px;
background: inherit;
border-radius: 0 0 4px 4px;
border: 1px solid #dfe1e5;
}
/* 输入框样式 */
#searchInput {
flex: 1;
padding: 8px 12px;
border: 1px solid #dfe1e5;
border-radius: 4px;
font-size: 14px;
background: inherit;
color: inherit;
}
/* 按钮基础样式 - 修改部分 */
button {
padding: 8px 16px;
background: #0066FF; /* 改为指定的蓝色 */
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background 0.3s;
}
/* 按钮悬停效果 - 修改部分 */
button:hover {
background: #0047B3; /* 对应深蓝色 */
}
/* 暗黑模式适配 */
body.dark-mode .search-container {
border-color: #5f6368;
background: #202124;
}
body.dark-mode #searchInput {
background: #303134;
border-color: #5f6368;
color: #e8eaed;
}
/* 保持暗黑模式按钮原样式 */
body.dark-mode button {
background: #8ab4f8;
color: #202124;
}
body.dark-mode button:hover {
background: #aecbfa;
}
</style>
<script>
// 搜索功能保持不变
function handleSearch() {
const keyword = document.getElementById('searchInput').value;
window.open(
`https://www.baidu.com/s?wd=${encodeURIComponent(keyword)}`,
'_blank'
);
}
</script>

复制代码

	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	10-30 17:02
	系统消息：柒沐已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#	10-09 09:07
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	09-24 09:00
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	09-11 11:40
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	09-02 09:17
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	08-27 08:56
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	08-20 15:12
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	08-03 10:22
	系统消息：柒沐已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#	06-30 08:57
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	06-18 09:14
	系统消息：清风网络已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#	04-11 09:40
	系统消息：清风网络已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	04-10 09:31
	系统消息：IXM77777已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	04-09 13:44
	系统消息：清风网络已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	04-09 09:22
	系统消息：柒沐已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#	04-09 08:52
	系统消息：清风网络已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	04-08 09:24
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	04-07 09:02
	系统消息：柒沐已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#	02-27 09:35
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	02-26 09:06
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	02-25 08:49

[代码技巧] 子比主题 – 侧边栏帮助网站SEO的小工具

资源无需等待，交易就趁现在，全面资源整合网络大咖云集，让你轻松玩转互联网！

代码部署

本帖被以下淘专辑推荐:

相关帖子

飞流广播+ 发布

会员LV.1

会员LV.2

会员LV.3

会员LV.4

会员LV.5

会员LV.6

会员LV.7

会员LV.8

会员LV.9

会员LV.10

关于我们

常用功能

服务引导

fl@fllt.cn