教程介绍
偶然间看到朋友的博客有这个侧边栏,就自己写了一个；不知道对SEO有没有帮助~！
效果截图
添加代码
源码部分
<div class="seoHelp">
<div class="seoTitle">协助本站优化一下叭~</div>
<div class="search">
<input type="text" value="米耀华博客" class="search_content">
<button class="search_search">搜索</button>
</div>
</div>
JS部分
document.querySelector('.search_search').onclick = function () {
window.open('https://www.baidu.com/s?wd=' + document.querySelector('.search_content').value)
}
样式部分
.seoHelp {
height: 90px;
position: relative;
padding:0 5px;
}
.seoTitle {
color: #fff;
text-align: center;
background-color: #ff5e52;
}
.search {
margin-top: 10px;
height: 110px;
}
.search_content {
margin: 10px 0 0 20px;
border: 1px solid #45b6f7;
width: 145px;
height: 35px;
border-radius: 5px;
font-size: 20px;
}
.search_search {
position: absolute;
left:185px;
top:48px;
width: 50px;
height: 35px;
color: #fff;
background-color: #45b6f7;
border: 1px solid #45b6f7;
border-radius: 5px;
}本站所有软件均来源于网络，仅供学习使用，请支持正版，如有侵权，联系删除！
×
微信扫一扫分享