zibll子比主题美化-给网站右侧边栏添加百度一下协助SEO优化

前言
大家在做网站的时候，seo会是一个问题，我们可以让用户在浏览我们网站的时候协助我们seo

废话不多说，先看一下成品是什么样子的吧！

效果演示

作用
这个小工具可以协助网站优化百度 SEO，让用户在浏览我们网站的时候协助我们seo，最早是在 emlog 程序才有的，现在 WordPress 程序也是可以完美适配的

添加教程
首先把下面的代码复制然后在 wordpress 程序的主题小工具中添加自定义 HTML代码。

大家自行修改一下代码里面的网站内容即可，千万不要乱删除。
路径：WordPress 后台——外观——小工具——自定义 HTML——复制代码粘贴代码进去——首页-侧边栏

代码如下
第一步：添加小工具-自定义HTML代码：

 

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

第二步：在模板的自定义CSS样式中添加如下代码：

/*百度一下*/.searchs {background-color: #fff;border: 1px solid #eaeaea;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;}/*百度一下*/

更多子比美化教程：WordPress 子比主题美化模板操作教程(更新中)[已更新到:4-30]-织音博客