不知道谁先发出来的侧边栏seo组件-zibll美化交流分享社区-zibll子比主题-zibll子比社区

不知道谁先发出来的侧边栏seo组件

代码

<div class="search-widget">
  <div class="banner">
    <span>搜索引擎</span>
    <select id="searchEngine" class="engine-selector">
      <option value="bing">必应</option>
      <option value="baidu">百度</option>
    </select>
    <span class="banner-text">协助本站SEO</span>
  </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;display:flex;align-items:center;gap:12px;}
.engine-selector{padding:4px 8px;border-radius:4px;border:none;background:white;color:#333;font-size:14px;cursor:pointer;}
.banner-text{margin-left:auto;}
.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;}
body.dark-mode .engine-selector{background:#303134;color:#e8eaed;border-color:#5f6368;}
</style>

<script>
// 初始化搜索引擎选择器,读取本地存储的用户偏好
document.addEventListener('DOMContentLoaded', function() {
  const savedEngine = localStorage.getItem('preferredSearchEngine');
  const engineSelector = document.getElementById('searchEngine');
  
  // 如果有保存的偏好,应用它
  if (savedEngine) {
    engineSelector.value = savedEngine;
  }
  
  // 监听搜索引擎选择变化,保存到本地存储
  engineSelector.addEventListener('change', function() {
    localStorage.setItem('preferredSearchEngine', this.value);
  });
});

function handleSearch(){
  const keyword = document.getElementById('searchInput').value;
  const selectedEngine = document.getElementById('searchEngine').value;
  let searchUrl = '';
  
  // 根据选择的搜索引擎构建相应的搜索URL
  switch(selectedEngine) {
    case 'baidu':
      searchUrl = `https://www.baidu.com/s?wd=${encodeURIComponent(keyword)}`;
      break;
    case 'bing':
    default:
      searchUrl = `https://www.bing.com/search?q=${encodeURIComponent(keyword)}`;
      break;
  }
  
  window.open(searchUrl, '_blank');
}
</script>

记得自行修改一下内容,这个就是加了一个必应和百度的选项

请登录后发表评论

    没有回复内容