子比主题美化 – 侧边栏添加百度一下小工具[三款样式]-zibll教程分享社区-zibll子比主题-WordPress主题模板-zibll子比主题

子比主题美化 – 侧边栏添加百度一下小工具[三款样式]

前言

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

效果一

20250626002110786-1000020157

 

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

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

效果二

20250626002215516-1000020158

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

效果三

20250626003004711-1000020161

鼠标移入悬浮+扫光效果

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

请登录后发表评论