实现 Z-Blog 留言输入邮箱立即显示Gavatar头像
作者:xlnxin发布时间:2021-04-15分类:Zblog教程浏览:368
导读:跑了不少z-blog博客,其中一部分z-blog博客评论框有这么一个特效,当输入完邮箱地址后,在侧边立即会显示这个邮箱地址的Gavatar头像,很炫的功能,但一直没有研究...
跑了不少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="" />
在其后面添加以下代码
1 2 3
<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>之前添加以下代码
1 2
<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样式代码
1 2 3 4 5 6 7 8
#gravatarNow{ position:absolute; margin:0 0 0 480px } #gravatarNow img{ border:1px solid #ddd; padding:2px }
- 保存文件后,重建文件即可。
参考原文
相关推荐
- 微信小程序function函数arguments 是什么意思呢?
- 小程序和H5中canvas卡顿的性能优化方向和实践
- 微信小程序反编译报SyntaxError: Unexpected token ‘}‘ 不完美的解决方法
- 解决小程序反编译出现 app-service.js
- PHP把textarea中的回车换行替换为br
- zblogphp使用GetArticleList、GetList函数调用热门文章列表
- expose_php = On/Off,是干什么的?底层原理是什么?
- 国产安可立思辰打印机手动双面打印设置教程
- 淘宝给大家发6.5元新年购物红包啦,不要嫌少还有很多优惠,快来领取吧!
- 快手极速版给大家发56元新年红包啦,快来领取吧!
- Zblog教程排行
- 最近发表