新闻中心

实现Z-Blog输入邮箱显示Gavatar头像方法

作者 / 时间 2014-07-29 10:45:36

无忧小编今天逛了很多Z-Blog博客发现每个站长的博客都有一定的优势和吸引的地方,尤其无忧小编在一个Z-Blog中发现一个特效让小编过目不忘。就是在输入完邮箱地址之后在侧面会显示出邮箱的Gavatar头像,小编很喜欢。但是一直都没有去考虑怎么实现,之后小编有问了很多朋友,逛了很多的Z-Blog博客。最终一位站长给了小编相关教程,无忧小编就和大家分享下经验吧! 找到当前的模板文件:b_article_commentpost.html经行编辑,然后找到如下代码: <input type="hidden" name="inpLocation" id="inpLocation" value="" />找到了之后在代码下面添加如下代码: <div id="gravatarNow"> <img height="32" width="32" title="Gravatar头像" src="http://www.gravatar.com/avatar/"&t_mail_e&"?d=identicon&s=32&r=g"/> </div> 然后在找到:<input type="text" name="inpEmail" id="inpEmail" class="text" value="" size="28" tabindex="2"/>找到之后把<input type="text" name="inpEmail" id="inpEmail" class="text" value="" size="28" tabindex="2" onblur="getGravatarNow();"/>用这句替换掉上面的。 其中用onblur=”getGavatarNow();这句话是判断语句来执行读写gavatar头像的。然后下载http://image.boke8.net/img3/immediatelyshowgavatar.zip压缩包,下载压缩好了之后将Gavatar.js文件和md5.js文件上传到SCRIPT目录下面去,如果没有这个文件的话可以自己创建一个。然后把single.html下载到本地经行编辑,在</head>之前添加如下代码:好了之后覆盖文件! <script src="<#ZC_BLOG_HOST#>THEMES/<#ZC_BLOG_THEME#>/SCRIPT/gavatar.js" type="text/javascript"></script> <script src="<#ZC_BLOG_HOST#>THEMES/<#ZC_BLOG_THEME#>/SCRIPT/md5.js" type="text/javascript"></script> 添加好了之后要在主题css文件里面添加css样式代码:代码如下:#gravatarNow{ position:absolute; margin:0 0 0 480px } #gravatarNow img{ border:1px solid #ddd; padding:2px } 全部完成了之后。重新文件就好了。最好清理下浏览器的缓存然后在进入浏览器查看如下是小编截图   [caption id="attachment_15173" align="alignnone" width="553"]zblog zblog[/caption] 无忧主机相关文章推荐阅读: ZBLOG文章无图片时随机显示图片的方法 ZBLOG程序修改文章发布默认浏览数教程分享 ZBLOG PHP版本博客站点伪静态规则(URL重写)配置 Z-BLOG(PHP)后台管理员密码忘记了咋办,直接工具登陆

本文地址:https://www.51php.com/zblog/15172.html

1
1
1
1
1
1
1