EMLOG添加页面加载(加载中)特效的方法 emlog教程

相信大家都注意过不管是APP上还是大型网站上都有加载中的提示,这样可以有效提升访客体验,让访客不会觉得页面加载的过程是乏味的,那么现在就来为大家分享一些EMLOG添加页面加载(加载中)特效的方法。

一、EMLOG左下角添加加载中提示特效

1、打开模板文件footer.php,在</body>标签前添加如下代码

<div id="circle"></div>
<div id="circletext"></div>
<div id="circle1"></div>

2、在上面的这段代码下面继续添加如下代码

<script type="text/javascript">
$(function () {
$("#circletext").text("加载中");
    $(window).load(function() {
        $("#circle").fadeOut(400);
        $("#circle1").fadeOut(600);
        $("#circletext").text("完成鸟").fadeOut(800);
    });
});
//-->
</script>

3、打开模板样式文件style.css,在合适的位置添加如下代码

/* 圆圈加载特效*/
#circle{background-color:rgba(0,0,0,0);border:5px solid rgba(10,10,10,0.9);opacity:.9;border-right:5px solid rgba
(0,0,0,0);border-left:5px solid rgba(0,0,0,0);border-radius:50px;box-shadow:0 0 35px #808080;width:60px;height:60px;margin:0 auto;position:fixed;left:30px;bottom:30px;-moz-animation:spinPulse 1s infinite linear;-webkit-animation:spinPulse 1s infinite linear;-o-animation:spinPulse 1s infinite linear;-ms-animation:spinPulse 1s infinite linear;}
#circle1{background-color:rgba(0,0,0,0);border:6px solid rgba(20,20,20,0.9);opacity:.9;border-left:6px solid rgba(0,0,0,0);border-right:6px solid rgba(0,0,0,0);border-radius:50px;box-shadow:0 0 15px #202020;width:40px;height:40px;margin:0 auto;position:fixed;left:39px;bottom:39px;-moz-animation:spinoffPulse 1s infinite linear;-webkit-animation:spinoffPulse 1s infinite linear;-o-animation:spinoffPulse 1s infinite linear;-ms-animation:spinoffPulse 1s infinite linear;}
#circletext{width:46px;height:20px;margin:0 auto;position:fixed;left:46px;bottom:53px;}
@-moz-keyframes spinPulse{0%{-moz-transform:rotate(160deg);opacity:0;box-shadow:0 0 1px #505050;}50%{-moz-transform:rotate(145deg);opacity:1;}100%{-moz-transform:rotate(-320deg);opacity:0;}}
@-moz-keyframes spinoffPulse{0%{-moz-transform:rotate(0deg);}100%{-moz-transform:rotate(360deg);}}
@-webkit-keyframes spinPulse{0%{-webkit-transform:rotate(160deg);opacity:0;box-shadow:0 0 1px #505050;}50%{-webkit-transform:rotate(145deg);opacity:1;}100%{-webkit-transform:rotate(-320deg);opacity:0;}}
@-webkit-keyframes spinoffPulse{0%{-webkit-transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);}}
@-o-keyframes spinPulse{0%{-o-transform:rotate(160deg);opacity:0;box-shadow:0 0 1px #505050;}50%{-o-transform:rotate(145deg);opacity:1;}100%{-o-transform:rotate(-320deg);opacity:0;}}
@-o-keyframes spinoffPulse{0%{-o-transform:rotate(0deg);}100%{-o-transform:rotate(360deg);}}
@-ms-keyframes spinPulse{0%{-ms-transform:rotate(160deg);opacity:0;box-shadow:0 0 1px #505050;}50%{-ms-transform:rotate(145deg);opacity:1;}100%{-ms-transform:rotate(-320deg);opacity:0;}}
@-ms-keyframes spinoffPulse{0%{-ms-transform:rotate(0deg);}100%{-ms-transform:rotate(360deg);}}

4、打开网站首页,点击查看效果

二、在网站整体页面上添加加载遮挡层特效

1、打开模板文件header.php,在合适的位置添加如下加载jquery代码

<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.7.1/jquery.min.js"></script>

2、继续在模板文件header.php上的</head>前添加下面的这段JS代码

<script type="text/javascript">
jQuery(function(){
jQuery('#loading-one').empty().append('页面加载完毕.').parent().fadeOut('slow');
});</script>

3、继续在模板文件header.php上的<body>后添加如下效果样式

<div id="loading" style="position:fixed !important;position:absolute;top:0;left:0;height:100%; width:100%; z-index:999; background:#000; opacity:0.6; filter:alpha(opacity=60);font-size:14px;line-height:20px;" onclick="javascript:turnoff('loading')">
<p id="loading-one" style="color:#fff;position:absolute; top:50%; left:50%; margin:50px 0 0 -50px; padding:3px 10px;" onclick="javascript:turnoff('loading')">页面载入中,请稍后...</p>
</div>

4、打开网站首页,点击查看效果

三、注意事项

1、本教程中分享了两种EMLOG添加页面加载(加载中)特效的方法,第一种是在左下角添加加载特效,第二种则是全局添加,请自行选择


博客志 发布于  2019-9-20 10:10 

EMLOG添加顶部悬浮固定动态彩条的方法 emlog教程

相信站长朋友们都注意过一些博客网站顶部都有一个非常炫的悬浮固定的动态彩条,可以随着页面移动始终在最顶层,那么现在就来为大家分享一下EMLOG添加顶部悬浮固定动态彩条的方法。

一、操作步骤

1、打开模板文件header.php,在<body>标签前添加如下代码

<div id="top-img"></div>

2、打开模板样式文件style.css,在适当的位置添加如下代码

/*Emlog顶部动态彩条*/ #top-img { background: url(https://ws2.sinaimg.cn/large/ea39e041gy1fsel4ovafog20ag004dfs.gif); height:4px;
    top:0px;
    position: fixed;
    width:100%;
    Z-index:9999;
}

3、打开网站首页,点击查看效果

二、原理解析

在网站顶部加入一个DIV,并给该DIV设置相关的属性

三、注意事项

1、本教程中的动态图片的链接可能会被设置防盗链,建议将该图片下载到自己的服务器上,然后再引用

2、本教程第1步中的top-img DIV位置需要根据模板的位置进行微调

3、本教程第2步中样式里的height不建议改动;top为外围距离顶部高度,可以自行调整;Position定义固定;Width为宽度,可适当调整;Z-index为层数,数值层数越高,即位于其他DIV模块之上。


博客志 发布于  2019-9-19 09:15 

EMLOG无插件实现全站代码压缩的方法 emlog教程

相信很多站长都注意过博客插件自带的CSS和JS文件释放出来会让网站源代码变得十分凌乱,因此很多站长开始选择通过源代码压缩的方式整理源代码并提升加载速度,现在就来为大家分享一下EMLOG无插件实现全站代码压缩的方法。

一、操作步骤

1、打开模板文件module.php,在合适的位置添加如下代码

<?php
//全站代码压缩
function slys($sheli)
{
    $initial = strlen($sheli);
    $sheli = explode("<!--slys-->", $sheli);
    $count = count($sheli);
    for ($i = 0; $i <= $count; $i++) {
        if (stristr($sheli[$i], '<!--slys end-->')) {
            $sheli[$i] = str_replace("<!--slys end-->", " ", $sheli[$i]);
        } else {
            $sheli[$i] = str_replace("\t", " ", $sheli[$i]);
            $sheli[$i] = str_replace("\n\n", "\n", $sheli[$i]);
            $sheli[$i] = str_replace("\n", "", $sheli[$i]);
            $sheli[$i] = str_replace("\r", "", $sheli[$i]);
            while (stristr($sheli[$i], '  ')) {
                $sheli[$i] = str_replace("  ", " ", $sheli[$i]);
            }
        }
        $sheli_out .= $sheli[$i];
    }
    $final = strlen($sheli_out);
    $savings = ($initial - $final) / $initial * 100;
    $savings = round($savings, 2);
    $sheli_out .= "\n<!--压缩前的大小: {$initial} bytes; 压缩后的大小: {$final} bytes; 节约:{$savings}% -->";
    return $sheli_out;
}?>


2、打开模板文件footer.php,在末尾添加如下代码

<?php $html=ob_get_contents();ob_get_clean();echo slys($html);?>

3、打开网站首页,通过查看源代码的方式查看效果

二、原理解析

通过PHP代码判断源代码中的空格等,同时对其进行精简,只会影响到源代码而不会影响前台展示效果

三、注意事项

EMLOG无插件实现全站代码压缩教程同时也会直接影响到pre标签,因此如果网站中有添加该标签且想压缩pre中的代码,则需要执行下面的操作

1、打开模板文件module.php,在合适的位置继续添加如下代码

<?php
//不压缩pre
function slbys($content)
{
    if (preg_match_all('/(crayon-|<\\/pre>)/i', $content, $matches)) {
        $content = '<!--slys--><!--slys end-->' . $content;
        $content .= '<!--slys end--><!--slys-->';
    }
    return $content;
}
slbys($log_content);
?>

2、打开模板文件echo_log.php和page.php,将其中的$log_content替换为slbys($log_content)即可


博客志 发布于  2019-9-19 09:15 

EMLOG实现评论外链跳转内链的方法 emlog教程

现在很多的博客网站都在使用PHP跳转技术进行外链页面的跳转,通过外链转内链的方式减少网站权重的流失,那么现在就来为大家分享一个EMLOG实现评论外链跳转内链的方法。

一、操作步骤

1、打开模板文件module.php,找到如下代码

<a href="'.$comment['url'].'" target="_blank">

2、将上面的代码替换为如下代码,也就是给外链添加统一的跳转前缀

<a href="/go.php?url='.$comment['url'].'" target="_blank">

3、将附件上压缩包里的文件上传到根目录下

4、打开任意文章查看效果

二、原理解析

通过PHP代码进行简单判断,对于不属于本站的外链链接全部通过go.php进行跳转,从而防止权重流失

三、注意事项

1、附件压缩包里有两个go.php文件,是博客志整理的两款比较好看的跳转界面代码,请根据需要任选其一

2、本教程第1步,不同模板所使用的代码可能有所不同,请根据实际情况自行修正

四、附件下载

EMLOG点击网站空白随机显示两位数大小:2KB | 密码:无 | 来源:本站下载

博客志 发布于  2019-9-19 09:15 

EMLOG给评论框添加背景图片的方法 emlog教程

相信大家都注意过很多博客网站的的评论框上都带有背景图效果,一些是模板自带的,更多的还是大家折腾来的,那么现在就来为大家分享一个EMLOG给评论框添加背景图片的方法。

一、操作步骤

1、首先通过F12等方式找到文章页评论框的DIV属性名称

2、打开模板样式文件style.css,给对应的评论框DIV添加如下代码

background: #fff url(/images/comment.png) no-repeat center;

3、在网上找一个喜欢的图片,命名为comment.png,裁剪好尺寸后上传到模板文件夹下

4、打开随机页面,查看评论框效果

二、原理解析

给评论框的DIV指定一个背景图片属性即可

三、注意事项

1、本教程中的样式文件根据不同的模板,其名称并不相同

2、本教程同样适用于任何开源网站程序,


博客志 发布于  2019-9-19 09:15 

EMLOG优化百度自动推送JS和防止重复推送的方法 emlog教程

对于百度搜索资源平台提供的主动推送功能,相信很多站长朋友都了解过,现在就来为大家分享一个实现百度自动推送JS优化,从而规避错误、重复推送和判断文章是否被收录方法。

一、操作步骤

1、打开模板文件module.php,在合适的位置添加如下代码

<?php
/**
* WordPress 百度搜索自动推送、主动收录 JS 优化 By 张戈博客
* 文章地址:http://zhangge.net/5100.html
* 转载请保留出处,谢谢合作!
**/
function bdPushData($id){
 $url=Url::log($id);
 if(baidu($url)==1){
 echo '<!--本文已收录,不输出推送代码-->';
 }else{
        echo "<script>
(function(){
    var bp = document.createElement('script');
    var curProtocol = window.location.protocol.split(':')[0];
    if (curProtocol === 'https') {
        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';        
    } else {
        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
        }
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(bp, s);
})();
</script>";
    }
}
 >
< php
/*
 * 判断内容页是否百度收录,并且以博主和或者理员身份访问博客文章时自动向百度提交未收录的文章
 *
 */
function baidu($url){
 $url='http://www.baidu.com/s wd='.$url;
 $curl=curl_init();
 curl_setopt($curl,CURLOPT_URL,$url);
 curl_setopt($curl,CURLOPT_RETURNTRANSFER,1);
 $rs=curl_exec($curl);
 curl_close($curl);
 if(!strpos($rs,'没有找到')){
     return 1;
   }
 else{
     return 0;
  }
     }
  function checkbaidu($id){
  $url=Url::log($id);
  if(baidu($url)==1){
   echo "百度已收录";
  } else {
   if (ROLE == 'admin' || ROLE == 'writer') {
    $urls = array($url,);
 $api = 'http://data.zz.baidu.com/urls site=********&token=********';
 $ch = curl_init();
 $options =  array(
     CURLOPT_URL => $api,
     CURLOPT_POST => true,
     CURLOPT_RETURNTRANSFER => true,
     CURLOPT_POSTFIELDS => implode("\n", $urls),
     CURLOPT_HTTPHEADER => array('Content-Type: text/plain'),);
 curl_setopt_array($ch, $options);
 $result = curl_exec($ch);
 echo '已自动提交给度娘';
   }
     echo "<a style=\"color:red;\" rel=\"external nofollow\" title=\"点击提交收录\" target=\"_blank\" href=\"http://zhanzhang.baidu.com/sitesubmit/index sitename=$url\">坐等收录</a>";
  }
 }
?>

2、打开模板文件footer.php,在</html>前写入如下调用代码

<?php echo bdPushData($logid);?>

3、打开模板文件echo_log.php,在适当的位置写入如下调用代码

<?php echo checkbaidu($logid);?>

二、原理解析

通过PHP代码判断内容页是否百度收录,如果未收录则在博主和或者理员身份访问博客文章时自动向百度提交未收录的文章,已收录则忽略提交,从而避免重复推送,防止占用推送额度,防止因推送频繁造成的负面影响

三、注意事项

1、本教程同样适用于其他开源的PHP网站程序

2、请务必注意$api = 'http://data.zz.baidu.com/urls site=********&token=********';,必须将api后面的地址更换为自己网站的接口调用地址


博客志 发布于  2019-9-15 11:05 

EMLOG网站右上角祝贺新年swf撕角特效代码 emlog教程

每到春节、新年的时候,很多站长都会在自己的网站上部署一些喜庆的特效,不仅可以增加节日的气氛,也能让人有耳目一新的感觉,那么现在就来为大家分享一个EMLOG网站右上角祝贺新年swf撕角特效代码。

一、操作步骤

1、打开模板文件header.php,在<head> </head>标签之间写入如下调用代码

<script src="/xinnian/photo.js"></script>

2、下载附件上的压缩包解压上传到网站根目录

3、打开网站首页,点击查看效果

二、原理解析

给网站引入一段JS代码,通过新年SWF实现撕角特效

三、注意事项

1、本教程中的代码也可以放在footer.php文件上

四、附件下载

EMLOG点击网站空白随机显示两位数大小:63KB | 密码:无 | 来源:本站下载

博客志 发布于  2019-9-15 11:05 

EMLOG实现文章自动推送给百度的代码 emlog教程

百度搜索资源平台对于站长提交新资源的方法给出了很多,比如手动推送、主动推送(实时)、自动推送、sitemap,理论上来说都有利于实现百度快速收录,那么现在就来为大家分享一个EMLOG实现文章自动推送给百度的代码。

一、操作步骤

1、打开模板文件footer.php,在合适的位置添加如下代码

<script>
(function(){
    var bp = document.createElement('script');
    var curProtocol = window.location.protocol.split(':')[0];
    if (curProtocol === 'https') {
        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
    }
    else {
        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
    }
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(bp, s);
})();
</script>

2、发布新的文章,等待若干时间后去百度搜索资源平台查看效果

二、原理解析

引入百度提交JS代码,实现网站新资源实时推送给百度搜索引擎

三、注意事项

1、本教程中的代码也可以放在header.php文件,或者是放置在后台的统计代码的位置,只要你愿意

2、本教程中所使用的代码适用于任何一个EMLOG网站,当然也适用于任何一个开源程序

3、本教程可以实现百度搜索引擎实时推送,如果你觉得引入JS代码比较繁琐,也可以尝试通过EMLOG百度网站地图插件生成XML地图,再推送给百度


博客志 发布于  2019-9-15 11:05 

EMLOG评论框实现打字火光特效的JS代码 emlog教程

很多喜欢折腾的博客站长都会在自己的网站上设置各种各样的特效,不仅可以彰显自己的个性而且看起来也非常的炫酷,那么现在就来为大家分享一个EMLOG评论框实现打字火光特效的JS代码。

一、操作步骤

1、打开模板文件footer.php,添加如下代码

<script type="text/javascript" src="你的网站域名/write.js"></script> 
<script>POWERMODE.colorful = true;POWERMODE.shake = false;document.body.addEventListener('input', POWERMODE);</script> 

2、将附件上的js文件解压缩后上传到根目录文件夹下

3、打开日志页,打字评论试试看

二、原理解析

本教程的原理非常简单,就是给网站引入一个简单的JS特效,显示即可

三、注意事项

1、本教程中的代码放置位置不受限制,只要你愿意也可以放置在模板文件header.php上,当然甚至是网站后台 - 设置 - 首页底部信息里也是可以的

四、附件下载

EMLOG评论框实现打字火光特效的JS代码大小:2KB | 密码:无 | 来源:本站下载

博客志 发布于  2019-9-15 11:05 

EMLOG隐藏不显示某指定分类的方法 emlog教程

在一些特定情况下我们需要将网站的某个指定分类在前台进行隐藏,对于其他系统来说并不难,但对于EMLOG原生系统来说并不简单,现在就来为大家分享一些EMLOG隐藏不显示某指定分类的方法。

一、EMLOG首页隐藏指定分类下的文章

1、打开EMLOG内核文件include/controller/log_controller.php

2、大约在第19行,找到如下代码

$sqlSegment ='ORDER BY top DESC ,date DESC';

3、将上述代码修改为如下代码

$sqlSegment ='and sortid not in (9999,8888,7777) ORDER BY top DESC ,date DESC';

二、EMLOG侧边栏不显示某个分类

1、打开EMLOG内核文件include/lib/cache.php

2、 找到function mc_sort()下面第2行,找到如下代码

$query = $this->db->query("SELECT * FROM " . DB_PREFIX . "sort ORDER BY pid ASC,taxis ASC");

3、将上述代码修改为如下代码

$query = $this->db->query("SELECT * FROM " . DB_PREFIX . "sort where sid not in (9999,8888,7777) ORDER BY pid ASC,taxis ASC");

三、注意事项

1、本教程一种方法的第3步,第二种方法的第3步中的 in (9999,8888,7777)指的是隐藏ID为9999、8888和7777的分类,如需隐藏单独分类则直接写入ID即可

2、本教程需要修改内核,非专业人士慎用


博客志 发布于  2019-9-15 11:05