新闻中心

实现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[/caption] 无忧主机相关文章推荐阅读： ZBLOG文章无图片时随机显示图片的方法 ZBLOG程序修改文章发布默认浏览数教程分享 ZBLOG PHP版本博客站点伪静态规则（URL重写）配置 Z-BLOG(PHP)后台管理员密码忘记了咋办，直接工具登陆