zblog侧栏添加小模块百度优化样式代码教程

教程介绍

偶然间看到朋友的博客有这个侧边栏,就自己写了一个；不知道对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;
        }