侧边栏添加百度一下小工具

效果图：

此效果为子比论坛网友写的一款样式，原文地址侧边栏加入一个帮助网站SEO的小工具

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

到此教程结束