首页搜索框模块 – 教程

预览图

bcd2a6dc20145542

前言

看着一为导航的这个搜索挺不错的就给扒了过来,刚弄上就有很多人找我要那我就索性分享出来吧,支持很多的搜索也可以自定义,废话不多说直接开始教程。

教程

将下方链接放入后台 / 子比主题设置 / 全局&功能 / 自定义代码中

引入css

将下方代码放入   头部自定义html代码   中

<link rel="stylesheet" href="https://www.qingluntan.cn/cssku/sousuok.css">

引入js

将下方代码放到   自定义javascript代码   中

<script type='text/javascript' id='appjs-js-extra'>
        var theme = { "ajaxurl": "", "addico": "", "order": "asc", "formpostion": "top", "defaultclass": "io-grey-mode", "isCustomize": "1", "icourl": "", "icopng": ".png", "urlformat": "1", "customizemax": "10", "newWindow": "1", "lazyload": "1", "minNav": "1", "loading": "1", "hotWords": "baidu", "classColumns": " col-2a col-sm-2a col-md-2a col-lg-3a col-xl-5a col-xxl-6a ", "apikey": "TWpBeU1USTJNemd4TWpZM0d6RS9oVEROUVZXWnBRa3BITlcxdGNtWlFiV3d6T1V0a2NWVXlkMk5KYTJGSA==", "isHome": "1", "version": "3.1424" };
        var localize = { "liked": "\u60a8\u5df2\u7ecf\u8d5e\u8fc7\u4e86!", "like": "\u8c22\u8c22\u70b9\u8d5e!", "networkerror": "\u7f51\u7edc\u9519\u8bef --.", "selectCategory": "\u4e3a\u4ec0\u4e48\u4e0d\u9009\u5206\u7c7b\u3002", "addSuccess": "\u6dfb\u52a0\u6210\u529f\u3002", "timeout": "\u8bbf\u95ee\u8d85\u65f6\uff0c\u8bf7\u518d\u8bd5\u8bd5\uff0c\u6216\u8005\u624b\u52a8\u586b\u5199\u3002", "lightMode": "\u65e5\u95f4\u6a21\u5f0f", "nightMode": "\u591c\u95f4\u6a21\u5f0f", "editBtn": "\u7f16\u8f91", "okBtn": "\u786e\u5b9a", "urlExist": "\u8be5\u7f51\u5740\u5df2\u7ecf\u5b58\u5728\u4e86 --.", "cancelBtn": "\u53d6\u6d88", "successAlert": "\u6210\u529f", "infoAlert": "\u4fe1\u606f", "warningAlert": "\u8b66\u544a", "errorAlert": "\u9519\u8bef", "extractionCode": "\u7f51\u76d8\u63d0\u53d6\u7801\u5df2\u590d\u5236\uff0c\u70b9\u201c\u786e\u5b9a\u201d\u8fdb\u5165\u4e0b\u8f7d\u9875\u9762\u3002" };
</script>
<script type='text/javascript' src='https://www.qingluntan.cn/cssku/sousuokuang.min.js' id='appjs-js'></script>

将下方代码放入   头部自定义html代码   中

<script type='text/javascript' src='https://www.qingluntan.cn/cssku/sousuokuangjquery.min.js'id='jquery-js'></script>

添加代码

小工具中  找到  首页-顶部全部宽度  添加一个自定义html 将下方代码放到里面     修改替换代码中的 https://www.qingluntan.cn   替换为你自己站的链接    保存就好了

不会的可以看一下  主题布局-详解

<div class="header-big">
        <div id="search" class="s-search mx-auto">
                <div id="search-list-menu" class="">
                        <div class="s-type text-center">
                                <div class="s-type-list big">
                                        <div class="anchor" style="position: absolute; left: 50%; opacity: 0;"></div>
                                        <label for="type-big-zhannei" class="active"
                                                data-id="group-z"><span>站内</span></label><label for="type-baidu"
                                                data-id="group-a"><span>常用</span></label><label for="type-baidu1"
                                                data-id="group-b"><span>搜索</span></label><label for="type-br"
                                                data-id="group-c"><span>工具</span></label><label for="type-zhihu"
                                                data-id="group-d"><span>社区</span></label><label for="type-taobao1"
                                                data-id="group-e"><span>生活</span></label><label for="type-zhaopin"
                                                data-id="group-f"><span>求职</span></label>
                                </div>
                        </div>
                </div>
                <form action="https://www.qingluntan.cn?s=" method="get" target="_blank" class="super-search-fm">
                        <input type="text" id="search-text" class="form-control smart-tips search-key" zhannei=""
                                placeholder="输入关键字搜索" style="outline:0" autocomplete="off">
                        <button type="submit"><i><svg class="icon" aria-hidden="true"></svg></i></button>
                </form>
                <div id="search-list" class="hide-type-list">
                        <div class="search-group justify-content-center group-z s-current">
                                <ul class="search-type">
                                        <li><input checked="checked" hidden="" type="radio" name="type"
                                                        id="type-big-zhannei" value="https://www.qingluntan.cn?s="
                                                        data-placeholder="站内搜索"><label for="type-zhannei"><span
                                                                class="text-muted">站内</span></label></li>
                                </ul>
                        </div>
                        <div class="search-group justify-content-center group-a ">
                                <ul class="search-type">
                                        <li><input hidden type="radio" name="type" id="type-baidu"
                                                        value="https://www.baidu.com/s?wd=%s%"
                                                        data-placeholder="百度一下"><label for="type-baidu"><span
                                                                class="text-muted">百度</span></label></li>
                                        <li><input hidden type="radio" name="type" id="type-google"
                                                        value="https://www.google.com/search?q=%s%"
                                                        data-placeholder="谷歌两下"><label for="type-google"><span
                                                                class="text-muted">Google</span></label></li>
                                        <li><input hidden type="radio" name="type" id="type-zhannei"
                                                        value="https://www.qingluntan.cn?s="
                                                        data-placeholder="站内搜索"><label for="type-zhannei"><span
                                                                class="text-muted">站内</span></label></li>
                                        <li><input hidden type="radio" name="type" id="type-taobao"
                                                        value="https://s.taobao.com/search?q=%s%"
                                                        data-placeholder="淘宝"><label for="type-taobao"><span
                                                                class="text-muted">淘宝</span></label></li>
                                        <li><input hidden type="radio" name="type" id="type-bing"
                                                        value="https://cn.bing.com/search?q=%s%"
                                                        data-placeholder="微软Bing搜索"><label for="type-bing"><span
                                                                class="text-muted">Bing</span></label></li>
                                </ul>
                        </div>
                        <div class="search-group justify-content-center group-b ">
                                <ul class="search-type">
                                        <li><input hidden type="radio" name="type" id="type-baidu1"
                                                        value="https://www.baidu.com/s?wd=%s%"
                                                        data-placeholder="百度一下"><label for="type-baidu1"><span
                                                                class="text-muted">百度</span></label></li>
                                        <li><input hidden type="radio" name="type" id="type-google1"
                                                        value="https://www.google.com/search?q=%s%"
                                                        data-placeholder="谷歌两下"><label for="type-google1"><span
                                                                class="text-muted">Google</span></label></li>
                                        <li><input hidden type="radio" name="type" id="type-360"
                                                        value="https://www.so.com/s?q=%s%"
                                                        data-placeholder="360好搜"><label for="type-360"><span
                                                                class="text-muted">360</span></label></li>
                                        <li><input hidden type="radio" name="type" id="type-sogo"
                                                        value="https://www.sogou.com/web?query=%s%"
                                                        data-placeholder="搜狗搜索"><label for="type-sogo"><span
                                                                class="text-muted">搜狗</span></label></li>
                                        <li><input hidden type="radio" name="type" id="type-bing1"
                                                        value="https://cn.bing.com/search?q=%s%"
                                                        data-placeholder="微软Bing搜索"><label for="type-bing1"><span
                                                                class="text-muted">Bing</span></label></li>
                                        <li><input hidden type="radio" name="type" id="type-sm"
                                                        value="https://yz.m.sm.cn/s?q=%s%"
                                                        data-placeholder="UC移动端搜索"><label for="type-sm"><span
                                                                class="text-muted">神马</span></label></li>
                                </ul>
                        </div>
                        <div class="search-group justify-content-center group-c ">
                                <ul class="search-type">
                                        <li><input hidden type="radio" name="type" id="type-br"
                                                        value="https://rank.chinaz.com/all/%s%"
                                                        data-placeholder="请输入网址(不带https://)"><label for="type-br"><span
                                                                class="text-muted">权重查询</span></label></li>
                                        <li><input hidden type="radio" name="type" id="type-links"
                                                        value="https://link.chinaz.com/%s%"
                                                        data-placeholder="请输入网址(不带https://)"><label
                                                        for="type-links"><span class="text-muted">友链检测</span></label>
                                        </li>
                                        <li><input hidden type="radio" name="type" id="type-icp"
                                                        value="https://icp.aizhan.com/%s%"
                                                        data-placeholder="请输入网址(不带https://)"><label for="type-icp"><span
                                                                class="text-muted">备案查询</span></label></li>
                                        <li><input hidden type="radio" name="type" id="type-ping"
                                                        value="https://ping.chinaz.com/%s%"
                                                        data-placeholder="请输入网址(不带https://)"><label
                                                        for="type-ping"><span class="text-muted">PING检测</span></label>
                                        </li>
                                        <li><input hidden type="radio" name="type" id="type-404"
                                                        value="https://tool.chinaz.com/Links/?DAddress=%s%"
                                                        data-placeholder="请输入网址(不带https://)"><label for="type-404"><span
                                                                class="text-muted">死链检测</span></label></li>
                                        <li><input hidden type="radio" name="type" id="type-ciku"
                                                        value="https://www.ciku5.com/s?wd=%s%"
                                                        data-placeholder="请输入关键词"><label for="type-ciku"><span
                                                                class="text-muted">关键词挖掘</span></label></li>
                                </ul>
                        </div>
                        <div class="search-group justify-content-center group-d ">
                                <ul class="search-type">
                                        <li><input hidden type="radio" name="type" id="type-zhihu"
                                                        value="https://www.zhihu.com/search?type=content&q=%s%"
                                                        data-placeholder="知乎"><label for="type-zhihu"><span
                                                                class="text-muted">知乎</span></label></li>
                                        <li><input hidden type="radio" name="type" id="type-wechat"
                                                        value="https://weixin.sogou.com/weixin?type=2&query=%s%"
                                                        data-placeholder="微信"><label for="type-wechat"><span
                                                                class="text-muted">微信</span></label></li>
                                        <li><input hidden type="radio" name="type" id="type-weibo"
                                                        value="https://s.weibo.com/weibo/%s%"
                                                        data-placeholder="微博"><label for="type-weibo"><span
                                                                class="text-muted">微博</span></label></li>
                                        <li><input hidden type="radio" name="type" id="type-douban"
                                                        value="https://www.douban.com/search?q=%s%"
                                                        data-placeholder="豆瓣"><label for="type-douban"><span
                                                                class="text-muted">豆瓣</span></label></li>
                                        <li><input hidden type="radio" name="type" id="type-why"
                                                        value="https://ask.seowhy.com/search/?q=%s%"
                                                        data-placeholder="SEO问答社区"><label for="type-why"><span
                                                                class="text-muted">搜外问答</span></label></li>
                                </ul>
                        </div>
                        <div class="search-group justify-content-center group-e ">
                                <ul class="search-type">
                                        <li><input hidden type="radio" name="type" id="type-taobao1"
                                                        value="https://s.taobao.com/search?q=%s%"
                                                        data-placeholder="淘宝"><label for="type-taobao1"><span
                                                                class="text-muted">淘宝</span></label></li>
                                        <li><input hidden type="radio" name="type" id="type-jd"
                                                        value="https://search.jd.com/Search?keyword=%s%"
                                                        data-placeholder="京东"><label for="type-jd"><span
                                                                class="text-muted">京东</span></label></li>
                                        <li><input hidden type="radio" name="type" id="type-xiachufang"
                                                        value="https://www.xiachufang.com/search/?keyword=%s%"
                                                        data-placeholder="下厨房"><label for="type-xiachufang"><span
                                                                class="text-muted">下厨房</span></label></li>
                                        <li><input hidden type="radio" name="type" id="type-xiangha"
                                                        value="https://www.xiangha.com/so/?q=caipu&s=%s%"
                                                        data-placeholder="香哈菜谱"><label for="type-xiangha"><span
                                                                class="text-muted">香哈菜谱</span></label></li>
                                        <li><input hidden type="radio" name="type" id="type-12306"
                                                        value="https://www.12306.cn/?%s%"
                                                        data-placeholder="12306"><label for="type-12306"><span
                                                                class="text-muted">12306</span></label></li>
                                        <li><input hidden type="radio" name="type" id="type-kd100"
                                                        value="https://www.kuaidi100.com/?%s%"
                                                        data-placeholder="快递100"><label for="type-kd100"><span
                                                                class="text-muted">快递100</span></label></li>
                                        <li><input hidden type="radio" name="type" id="type-qunar"
                                                        value="https://www.qunar.com/?%s%" data-placeholder="去哪儿"><label
                                                        for="type-qunar"><span class="text-muted">去哪儿</span></label>
                                        </li>
                                </ul>
                        </div>
                        <div class="search-group justify-content-center group-f ">
                                <ul class="search-type">
                                        <li><input hidden type="radio" name="type" id="type-zhaopin"
                                                        value="https://sou.zhaopin.com/jobs/searchresult.ashx?kw=%s%"
                                                        data-placeholder="智联招聘"><label for="type-zhaopin"><span
                                                                class="text-muted">智联招聘</span></label></li>
                                        <li><input hidden type="radio" name="type" id="type-51job"
                                                        value="https://search.51job.com/?%s%"
                                                        data-placeholder="前程无忧"><label for="type-51job"><span
                                                                class="text-muted">前程无忧</span></label></li>
                                        <li><input hidden type="radio" name="type" id="type-lagou"
                                                        value="https://www.lagou.com/jobs/list_%s%"
                                                        data-placeholder="拉勾网"><label for="type-lagou"><span
                                                                class="text-muted">拉勾网</span></label></li>
                                        <li><input hidden type="radio" name="type" id="type-liepin"
                                                        value="https://www.liepin.com/zhaopin/?key=%s%"
                                                        data-placeholder="猎聘网"><label for="type-liepin"><span
                                                                class="text-muted">猎聘网</span></label></li>
                                </ul>
                        </div>
                </div>
        </div>
</div>

 

请登录后发表评论

    没有回复内容