Zblog炫酷小技巧之代码实现评论框填写邮箱后显示Gavatar头像

由 willer 发布

为了方便与我们的博客读者联系沟通,我们会希望读者能够把个人邮箱自愿留下来。那么如果在评论群如果留下完整邮箱能有一个与众不同的Gavatar头像显示,相信对于读者来说是个挺不错的体验,也能吸引一部分的读者留下自己的个人邮箱。那么今天,我们就来分享一下,如何实现在Zblog留下邮箱立即显示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头像


第三步:下载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>


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

#gravatarNow{

  position:absolute;

  margin:0 0 0 480px

}

#gravatarNow img{

  border:1px solid #ddd;

  padding:2px

}


最后保存文件后,重建文件并运行,即可实现Zblog留下邮箱立即显示Gavatar头像。