实现Z-Blog留言输入邮箱当即显示Gavatar头像

[摘要]本文先容下如何实现zblog留言输入邮箱地点当即显示您的gravatar头像，头像跟着你邮箱的改变而改变，EMAIL注册过gavatar头像的就会显示出相应的头像，没注册过的就会显示gavatar默认头像。

　　折腾博客是一种兴趣、让其到达心目中抱负的地步更是一种享受，为了使其雅观又富含超等烂漫的结果虽然是每小我私家最终的目标。

　　下面先容下如何实现zblog留言输入邮箱地点当即显示您的gravatar头像，头像跟着你邮箱的改变而改变，EMAIL注册过gavatar头像的就会显示出相应的头像，没注册过的就会显示gavatar默认头像。先看下结果吧：

1.对当前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://down.chinaz.com/"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="getGravatarNow();" 这句判定语句来执行读取头像。

3、下载Gravatar.rar压缩包，把压缩后的Gavatar.js文件和md5.js文件上传到当前主题SCRIPT目次下(没有就建设一个)

4、对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>

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

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

6、生存文件后，重建文件即可。

Z-Blog 下载：

Z-Blog v2.2 Prism Build140101下载

界面预览

本文转自：

分享到