前言
逛子比论坛看到有看本站侧边栏百度一下小工具的，之前随便放了个样式，感觉有点简陋，新写了个样式(效果三)，本文放三个样式，喜欢哪个用哪个
效果一
![子比主题美化 – 侧边栏添加百度一下小工具[三款样式]](/wp-content/uploads/replace/067a0dee9497b15f406ca2fff62643af.png "子比主题美化 – 侧边栏添加百度一下小工具[三款样式]")
此效果为子比论坛网友写的一款样式，原文地址侧边栏加入一个帮助网站SEO的小工具-zibll美化交流分享社区-zibll子比主题-WordPress主题模板-zibll子比主题
复制下面代码 添加到wordpress后台-外观-小工具-自定义HTML中即可(信息自行修改)
本文隐藏内容 – 登录可见
<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>
效果二
![子比主题美化 – 侧边栏添加百度一下小工具[三款样式]](/wp-content/uploads/replace/5400dd8641f9faba688bf519b66621e4.png "子比主题美化 – 侧边栏添加百度一下小工具[三款样式]")
复制下面代码 添加到wordpress后台-外观-小工具-自定义HTML中即可(信息自行修改)
本文隐藏内容 – 登录可见
<style>/*百度一下*/.searchs {background-color:white;padding: 15px;overflow: hidden;transition: all 0.3s;border-radius: 4px;position: relative;margin: 0px 0px 15px 0px;}.mip-layout-container, .mip-layout-fixed-height {margin: 0px 0px 0px 0px;display: block;position: relative;}mip-form form {position: relative;}.searchs input[type=“text”] {border: #45B6F7 1px solid;border-radius: 4px;width: calc( 100% – 2px );}mip-form input[type=’text’], mip-form input[type=’input’], mip-form input[type=’datetime’], mip-form input[type=’email’], mip-form input[type=’number’], mip-form input[type=’tel’], mip-form input[type=’url’] {padding-right: 30px;}.searchs input {outline: none;}mip-form input, mip-form textarea, mip-form select {border: 1px solid #f1f1f1;padding: 6px;display: block;box-sizing: border-box;-webkit-box-sizing: border-box;resize: none;font-size: 16px;}mip-form div {display: none;color: #ec1f5c;font-size: 12px;text-align: left;padding: 0 10% 0 3%;}.searchs input[type=”submit”] {position: absolute;right: 2px;top: 2px;background-color: #45B6F7;color: #fff;font-size: 13px;margin: 1px;height: 31px;line-height: 31px;padding: 0 10px;font-family: “èé…é‘”;}mip-form input[type=’submit’] {border: 1px solid #f1f1f1;border-radius: 5px;color: #333;background-color: #d8d7d7;}.searchs input {outline: none;}.tit {background-color: #FF5E52;position: relative;top: -15px;display: inline-block;color: #fff;padding: 4px 15px;font-size: 14px;}.tit strong {font-weight: normal;}.tit {background-color: #FF5E52;position: relative;top: -15px;display: inline-block;color: #fff;padding: 4px 15px;font-size: 14px;}/*百度一下*/</style>
<div class=“searchs”><div class=“tit”><strong>百度一下</strong></div><mip-form method=“get” url=“https://www.baidu.com/s” class=“mip-element mip-layout-container”><form action=“https://www.baidu.com/s” method=“GET” target=“_blank”><input type=“text” name=“wd” validatetarget=“q” validatetype=“must” placeholder=“请输入搜索词” value=“墨星博客”><div target=“q”>关键词不能为空</div><input type=“submit” value=“搜索”></form></mip-form></div>
效果三
![子比主题美化 – 侧边栏添加百度一下小工具[三款样式]](/wp-content/uploads/replace/f0fc873463c26e5e4928fdeab2f860f0.png "子比主题美化 – 侧边栏添加百度一下小工具[三款样式]")
鼠标移入悬浮+扫光效果
复制下面代码 添加到wordpress后台-外观-小工具-自定义HTML中即可(信息自行修改)
本文付费阅读内容 – 大SVIP会员免费
<style>
.mx-search-widget {
width: 100%;
margin: 15px 0;
position: relative;
overflow: hidden;
border-radius: 10px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
background: linear-gradient(145deg, #f8f9fa, #e9ecef);
transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.mx-search-widget:hover {
transform: translateY(-2px);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}
.mx-banner {
background: linear-gradient(90deg, #74b9ff, #0984e3);
color: white;
padding: 12px;
text-align: center;
font-size: 15px;
font-weight: 600;
position: relative;
overflow: hidden;
}
.mx-banner::before {
content: ”;
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.4) 50%,
rgba(255, 255, 255, 0) 100%
);
animation: mx_sg 4s ease-in-out infinite;
}
@keyframes mx_sg {
0% { left: -100%; }
50% { left: 100%; }
100% { left: -100%; }
}
.mx-search-container {
display: flex;
gap: 10px;
padding: 15px;
position: relative;
}
#mx-searchInput {
flex: 0.7;
padding: 10px 16px;
height: 40px;
border: none;
border-radius: 8px;
font-size: 14px;
background: rgba(255, 255, 255, 0.9);
color: #333;
box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
}
#mx-searchInput:focus {
outline: none;
background: rgba(255, 255, 255, 1);
box-shadow: inset 0 1px 8px rgba(0, 0, 0, 0.1),
0 0 0 2px rgba(116, 185, 255, 0.3);
}
.mx-button {
flex: 0.3;
padding: 0 10px;
height: 40px;
background: linear-gradient(45deg, #74b9ff, #0984e3);
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
font-weight: 600;
font-size: 14px;
white-space: nowrap;
box-shadow: 0 4px 10px rgba(116, 185, 255, 0.3);
transition: all 0.3s ease;
}
.mx-button:hover {
transform: translateY(-1px);
box-shadow: 0 5px 14px rgba(116, 185, 255, 0.4);
}
body.dark-mode .mx-search-widget {
background: linear-gradient(145deg, #2d3436, #1e272e);
}
body.dark-mode #mx-searchInput {
background: rgba(0, 0, 0, 0.2);
color: #f5f6fa;
}
body.dark-mode .mx-button {
background: linear-gradient(45deg, #0984e3, #74b9ff);
box-shadow: 0 4px 10px rgba(9, 132, 227, 0.3);
}
body.dark-mode .mx-button:hover {
box-shadow: 0 5px 14px rgba(9, 132, 227, 0.4);
}
</style>
<div class=“mx-search-widget”>
<div class=“mx-banner”>百度一下-协助本站SEO</div>
<div class=“mx-search-container”>
<input type=“text” id=“mx-searchInput” placeholder=“墨星博客” value=“墨星博客”>
<button onclick=“mx_search()” class=“mx-button”>立即搜索</button>
</div>
</div>
<script>
function mx_search(){
const keyword = document.getElementById(‘mx-searchInput’).value;
if(keyword.trim() !== ”) {
window.open(`https://www.baidu.com/s?wd=${encodeURIComponent(keyword)}`, ‘_blank’);
}
}
document.getElementById(‘mx-searchInput’).addEventListener(‘keypress’, function(e) {
if (e.key === ‘Enter’) {
mx_search();
}
});
</script>
查看更多心仪的内容 按Ctrl+D收藏我
Ctrl+D收藏我们
部分内容来自于网络 如有不妥联系站长删除！
本站用户发帖仅代表本站用户个人观点，并不代表本站赞同其观点和对其真实性负责。
本站代码模板仅供学习交流使用请勿商业运营,严禁从事违法,侵权等任何非法活动,否则后果自负！
© 版权声明
本站收集的资源仅供内部学习研究软件设计思想和原理使用，学习研究后请自觉删除，请勿传播，因未及时删除所造成的任何后果责任自负。
如果用于其他用途，请购买正版支持作者，谢谢！若您认为「CHUANGFUYE.COM」发布的内容若侵犯到您的权益，请联系站长邮箱:554286@qq.com 进行删除处理。
本站资源大多存储在云盘，如发现链接失效，请联系我们，我们会第一时间更新。THE END
暂无评论内容