跑了不少z-blog博客，其中一部分z-blog博客评论框有这么一个特效，当输入完邮箱地址后，在侧边立即会显示这个邮箱地址的Gavatar头像，很炫的功能，但一直没有研究。之后又在闲逛z-blog博客的时候，发现某z-blog博主编写了相关教程，趣主题就顺手转载过来给需要的博主吧。

实现z-blog留言输入邮箱立即显示gavatar的方法：

对当前z-blog主题模板文件b_article_commentpost.html进行编辑，在其中找到代码：

1 <input type="hidden" name="inpLocation" id="inpLocation" value="" />

在其后面添加以下代码

123 <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>

再找到以下代码

1 <input type="text" name="inpEmail" id="inpEmail" class="text" value="" size="28" tabindex="2"/>

将其替换为以下代码

1 <input type="text" name="inpEmail" id="inpEmail" class="text" value="" size="28" tabindex="2" onblur="getGravatarNow();"/>

其中的onblur=”getGavatarNow();”表示判断语句来执行读取gavatar头像下载immediatelyshowgavatar.zip压缩包，把压缩后的Gavatar.js文件和md5.js文件上传到当前主题SCRIPT目录下（没有就创建一个）对single.html文件进行编辑，在</head>之前添加以下代码

12 <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>

在当前z-blog主题的css文件中添加以下css样式代码

12345678 #gravatarNow{ position:absolute; margin:0 0 0 480px}#gravatarNow img{ border:1px solid #ddd; padding:2px}

保存文件后，重建文件即可。z-blog

参考原文

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。