前言

逛子比论坛看到有看墨星博客侧边栏百度一下小工具的，之前随便放了个样式，感觉有点简陋，新写了个样式(效果三)，本文放三个样式，喜欢哪个用哪个

效果一

此效果为子比论坛网友写的一款样式

复制下面代码 添加到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>

效果二

复制下面代码 添加到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>

效果三

鼠标移入悬浮+扫光效果

复制下面代码 添加到wordpress后台-外观-小工具-自定义HTML中即可(信息自行修改)

<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>

------本页内容已结束，喜欢请分享------

感谢您的来访，获取更多精彩文章请收藏本站。