今天小君看到其他博客侧栏都有个协助本站seo优化功能,于是小君就拔了下来,下面请听我一一教程
首先我们登录后台左侧找到模块管理,新建一个如图:
设置名称(可自定义)文件名和ID“soyiso”不可更改,设置如图:
<div class="searchs"> <div class="tit"><strong>百度一下</strong></div> <script src="/so.js"></script> <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; }
最后一步,把你新建的模块拉到你主题相应的侧栏序号即可
效果请看本站