好好工作,让用户满意

简单给zbp添加小功能:评论的时候输入完成邮箱移开光标时自动显示评论者头像

雨夜 2118次浏览 15个评论

今天看林三的博客里有这个功能,于是乎我就开始弄了,呵呵。简单给zbp添加小功能:评论的时候输入完成邮箱的时候自动显示评论者头像,如图:

toux.PNG

下面将如何操作喃?步骤:

(1)找到评论框模板:commentpost.php,在模板文件提交单form内的输入名字前面添加如下代码:

<div id="GravatarNow"> 
        <img src="http://cn.gravatar.com/avatar/?s=32&d={$host}zb_users/avatar/0.png" title="Gravatar头像" />  
        </div>

(2)添加功能触发条件:如代码意思,看懂了吧:在邮箱input里添加onblur="getGravatarNow();"

<p><label for="inpEmail">您的邮箱</label><input type="text" name="inpEmail" id="inpEmail" class="text" value="" size="28" tabindex="2" onblur="getGravatarNow();" /><small>选填</small></p>

(3)下载avatar.js文件,放在脚本文件夹里(也可以把该文件里面的代码放在其他的的js里面)下载地址:http://pan.baidu.com/s/1eQpb6Iu 

(4)添加css样式:(按照自己的要求去修改或者重做)

#GravatarNow {
float: left;
margin-left: 340px;
display: block;
position: absolute;
}
#GravatarNow img {
width: 34px;
height: 34px;
padding: 2px;
margin: 0px;
border: 1px solid #ccc;
}

PS:这个功能不能在如二级目录的地址的网站上很好使用,默认头像是无图状态,虽然输入完邮箱移开光标的时候显示评论者的头像。但是这样不美观,呵呵。如网址www.tusay.net/tutu 这样的形式。


涂涂研版版权所有,如未注明 , 均为原创,转载需注明出处。
喜欢 ( 0)
[使用支付宝或微信扫码]
分享 ( 0)
发表我的评论换个身份
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(15) 个小伙伴在吐槽
  1. 很实用的功能啊。
    李洋博客 2017-07-17 PM 01:50 回复
  2. 加进去如果没填写时默认图标看不到是XX
    业余爱好 2014-10-16 AM 08:47 回复
    • 第一步的代码,我加了在没填之前图片是X 不会显示默认的0.png
      业余爱好 2014-10-16 AM 08:48 回复
  3. 页面SEO做的不错嘛
    shilyblog 2014-09-28 AM 06:41 回复
  4. 不明觉厉,打个酱油
    网站建设 2014-09-24 PM 05:53 回复
    • 呵呵,欢迎常来。
      雨夜 2014-09-24 PM 08:19 回复
  5. 擦,发现主题楼层错误。。。
    访客xilouqingzhu 2014-09-24 AM 11:13 回复
    • 还望具体说下,指导下,呵呵。
      雨夜 2014-09-24 PM 06:18 回复
      • 下午评论的时候楼层都还是1111.现在看起来是正常的。一不小心名字前加了一个访客
        xilouqingzhu 2014-09-24 PM 10:36 回复
  6. 求帮改主题。。哈哈
    访客xilouqingzhu 2014-09-24 AM 11:13 回复
  7. 哇咔咔。。又穿新衣服了呀
    访客xilouqingzhu 2014-09-24 AM 11:12 回复
  8. 前來支持一下~我來試試~為什麼沒有效果呢?
    超級efly 2014-09-20 AM 11:09 回复
    • 呵呵,我这边可以有的,我还没在主站应用,呵呵,以后更新版本会弄的。
      雨夜 2014-09-20 PM 11:54 回复
  9. 呵呵,这就是无刷新的,呵呵
    雨夜 2014-09-19 PM 04:22 回复
  10. 有一种是无刷新就显示出头像了,另外就是提交后显示头像
    xilouqingzhu 2014-09-19 PM 03:59 回复

主题定制开发流程

ZBLOGPHP开发流程

联系我们