最新公告
  • 欢迎您光临影客学习网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入我们
  • Emlog增加弹出搜索功能教程

     

    Screenshot_2020-02-20-11-15-12-17.png

     

    教程简介

    今天回到家 没事整理下网站 发下了自己的博客搜索太丑了 所以二话不说借助了很多有名的博客 终于看上了一款弹出搜索样式不错的搜索 也就是饺子的模板EMlog Fly模板 这个模板 17年就开始在用了 今年才换了新的模板 所以二话不说 拔Fly的搜索拔了下来 适配了自己的博客了嘛 大家也都知道一个网站没有搜索是不行 不可缺少的 用户在找东西的时候 一键搜索方便 不废话了 开始教程吧

    第一步

    module.php模板文件增加如下代码

    <?php
    //search:手机搜索标签
    function search_tag($title){
        global $CACHE;
        $tag_cache = $CACHE->readCache('tags');?>
            <?php shuffle ($tag_cache);
    		$tag_cache = array_slice($tag_cache,0,15);foreach($tag_cache as $value): ?>
    			<li class="search-go"><a href="<?php echo BLOG_URL; ?>tag/<?php echo $value['tagname']; ?>"><?php echo $value['tagname']; ?></a></li>
            <?php endforeach; ?>
    <?php }?>

    第二步

    你的公用css文件增加如下css

    .search-forms.is-visible {display: block;}
    .search-forms.is-visible {animation: fade-in;animation-duration: .3s;-webkit-animation: fade-in .3s;}
    .search-forms {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: #fff;-webkit-animation: fade-zoom-in .3s forwards;-o-animation: fade-zoom-in .3s forwards;animation: fade-zoom-in .3s forwards;display: none;z-index: 9999;-webkit-backface-visibility: hidden;overflow: hidden;}
    .search-forms .search-form-inner {max-width: 640px;padding: 0 20px;margin: auto;position: absolute;width: 100%;left: 0;right: 0;height: 285px;top: -100px;bottom: 0;}
    .search-forms .search-form-box {position: relative;margin-bottom: 40px;}
    .search-forms input {background: #fff;display: inline-block;line-height: 58px;height: 58px;color: #949494;font-size: 15px;border-radius: 3px;padding: 0 20px;width: 100%;border: 1px solid #e2e2e2;text-align: left;-webkit-appearance: none;}
    .search-forms button {background: #000;display: inline-block;line-height: 58px;height: 58px;width: 100px;color: #fff;font-size: 15px;padding: 0 25px;margin: 0;border-radius: 0 3px 3px 0;position: absolute;right: 0;top: 0;border: 0;}
    .search-forms .search-form-box {position: relative;margin-bottom: 40px;}
    .search-forms .search-form-inner {max-width: 640px;padding: 0 20px;margin: auto;position: absolute;width: 100%;left: 0;right: 0;height: 285px;top: -100px;bottom: 0;}
    .search-forms .close-search {display: block;position: absolute;top: 3%;right: 1%;width: 50px;height: 50px;cursor: pointer;background: rgba(255,255,255,0);}
    .search-commend ul li a {display: inline-block;line-height: 1;padding: 5px 5px;border: 1px solid #e2e2e2;border-radius: 2px;color: #949494;}
    .search-commend ul li {display: inline-block;margin-bottom: 10px;margin-right: 10px;}
    .search-commend h4 {position: relative;font-size: 16px;margin: 0 0 20px;}
    .close-search {display: block;position: absolute;top: 10%;right: 10%;width: 80px;height: 80px;cursor: pointer;background: rgba(255,255,255,0);}
    .close-bottom, .close-top {position: absolute;left: 14px;background: #333;width: 22px;height: 2px;transition: .3s;}
    .close-search .close-bottom, .close-search .close-top {width: 30px!important;left: 5px!important;}
    .close-search .close-top {top: 15px!important;}
    .close-top {top: 19px;}
    .close-search .close-bottom, .close-search .close-top {width: 45px;left: 16px;}
    .close-top {-webkit-transform: translate(0,5px) rotate(225deg);transform: translate(0,5px) rotate(225deg);}
    .close-search .close-top {top: 34px;}
    .search-forms .close-search {display: block;position: absolute;top: 3%;right: 1%;width: 50px;height: 50px;cursor: pointer;background: rgba(255,255,255,0);}
    .close-bottom {-webkit-transform: translate(0,-5px) rotate(135deg);transform: translate(0,-5px) rotate(135deg);}
    .close-search .close-bottom {bottom: 24px!important;}

    第三步

    你的公用js增加如下js

    $('.fly-search-s').click(function () {$('.search-forms').addClass('is-visible')});
    $('.search-go,.close-search').click(function(){$(".search-forms").removeClass("is-visible")});

    第四步

    footer.php文件增加如下代码

    <div class="search-forms">
    	<form method="get" action="<?php echo BLOG_URL;?>">
    		<div class="search-form-inner">
    			<div class="search-form-box">
    				 <input class="form-search" type="text" name="keyword" placeholder="输入搜索关键词">
    				 <button type="submit" id="btn-search" class="search-go"><i class="fa fa-search"></i> </button>				 
    			</div>
    			<div class="search-commend">
    				<h4>大家都在搜</h4>
    				<ul>
    					<?php search_tag($title); ?>
    				</ul>
    			</div>
    		</div>                
    	</form> 
    	<div class="close-search">
    		<span class="close-top"></span>
    		<span class="close-bottom"></span>
        </div>
    </div>

    第五步

    <li> <a href="javascript:;" class="fly-search-s"> <span class="fa fa-search"></span> 搜索 </a></li>

     


    关注微信公众号『影客学习网』

    第一时间了解最新网络动态关注博主不迷路~

    1. 本站所有资源来源于用户上传和互联网,如有侵权请邮件联系站长!
    2. 分享目的仅供大家学习和交流!
    3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
    4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务,除了本站原创售价资源都有技术服务,请大家谅解!
    5. 如有链接无法下载、失效或广告,请联系管理员处理!
    6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
    7. 如遇到加密压缩包,请使用WINRAR解压,如遇到无法解压的请联系管理员!
    影客学习网 » Emlog增加弹出搜索功能教程

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    为什么评论刷新后不显示?
    评论文章的时候,每次评论都要填网站下面一定要勾选,否则可能下载链接显示不出来!一定要记住!

    1 评论

    发表评论

    • 49会员总数(位)
    • 846资源总数(个)
    • 3本周发布(个)
    • 0 今日发布(个)
    • 533稳定运行(天)

    提供最优质的资源集合

    立即查看 了解详情
    升级SVIP尊享更多特权立即升级