kn007的个人博客
♥ You are here: Home > 软件与网络 > php > 小天的聊天(chat)短代码微改

小天的聊天(chat)短代码微改

by | 59 Comments

提醒:本文最后更新于 4727 天前,文中所描述的信息可能已发生改变,请仔细核实。

QQ截图20130201193419

最近小天那里发了《聊天(chat)短代码制作教程》,具体效果如下:

QQ截图20130203155551

因为默认是左边的,小天给的是左边的源码,所以帮她改成右边的,具体效果如下:

QQ截图20130203155551

貌似还可以,但是按照文章的短代码,也许你需要两个短代码来实现左边右边,所以我把它合并了。代码如下:

function chatCode( $atts, $content = null ) {
extract( shortcode_atts( array(
'chatter' => 'kn007',
'avatar' => 'kn007',
'position' => 'left',
), $atts ) );

if ($position =='right') {$cont_posit = "margin: -68px 80px 1px 10px;";$ave_posit ='margin-left: 425px;';}else{$cont_posit = "margin:-60px 0 0 85px;";$ave_posit ='';}

return '<div class="chatbox" style="margin:0 50px;padding:10px 10px 15px 1px;background:#f2f2f2;border:3px solid #DDD;border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px;"><div class="chat_avatar" style="background:url('.get_bloginfo("template_url").'/author/'.$avatar.'.jpg) center no-repeat;box-shadow:0px 1px 1px rgba(255, 255, 255, 0.75);position: relative;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius:3px;background-color:#fff;width: 64px;height: 64px;margin: 0 0 20px 10px;'.$ave_posit.'"></div><section class="chat_content" style="position:relative;color:#555;max-width:400px;padding:6px 10px;word-wrap:break-word;border:1px solid;border-color:#DDD #DDD #EEE #DDD;border-radius: 6px;-moz-box-shadow:0px 1px 1px #bbb;-webkit-box-shadow:0px 1px 1px #bbb;box-shadow:0px 1px 1px #bbb;background:#ffffff;'.$cont_posit.'"><span><strong>'.$chatter.': </strong>'.$content.'</span></section></div>';
}
add_shortcode( 'chat', 'chatCode' );

这个代码现在有个缺陷,因为大家的主题都不一样。也就是左边右边的margin大小会有区别,要拿去用还要微调一下。表示css的功力确实不好,只能写成这样水平了。作者图片 放在主题目录的/author/作者名.jpg。

因为没时间和精力去改,所以你们看着办,有兴趣就拿去改改吧。呵呵。

转载请注明转自: kn007的个人博客 的《小天的聊天(chat)短代码微改

donate
有所帮助?
Tags: , ,
Comments
59 Comments立即评论
  1. 迅速占领沙发。 :oops:

    1. MOD回复

      @老猫Music: :lol: 今天猫总神速!

  2. LV6回复

    椅子有木有? :mrgreen: :mrgreen:

    1. MOD回复

      @小T: 有了,不知地板会被谁坐了 :o

  3. :cool: 谢谢 不过我懒得改了=w=这个一会儿转走

    1. MOD回复

      @凤翼天堂: 随你 :grin:

  4. LV2回复

    看了部电影地板都没了... :x

    1. MOD回复

      @Xider: 不好意思,你来晚了,,, :evil:

    2. LV2回复

      @kn007: 话说邮件提醒最后面有个")""奇葩的符号

    3. MOD回复

      @Xider: 哪里!?

    4. LV6回复

      @kn007: 临时性抽风的会自己加上去...不是一次两次的事情了,反正我在WP的邮件回复里面都有见到

    5. MOD回复

      @Xider: 发来看看啊

    6. LV6回复

      @kn007:
      你需要的是邮件还是什么

    7. MOD回复

      @Xider: 邮件截图

    8. LV6回复
    9. LV6回复

      @kn007: OK..果然不能用img标签 http://t2.qpic.cn/mblogpic/10a12753d3e4050c17e0/2000

    10. MOD回复

      @Xider: 随记的吗?最后那里
      [http://t2.qpic.cn/mblogpic/10a12753d3e4050c17e0/2000]

    11. LV6回复

      @kn007: 对的.. :mrgreen: :mrgreen:

    12. MOD回复

      @Xider: 靠,把邮件转发给我,我看看

    13. MOD回复

      @Xider: 没允许img

  5. 果断拿走,七七宝贝多啊。我也琢磨着给博客增加一点短代码 :cool: :cool: :idea:

    1. MOD回复

      @天域剑客: :o 好吧。。

  6. 回复

    那我这里叫什么?

    1. MOD回复

      @小五: 这个,这个,我也不晓得。。。 :???:

  7. 那个七七,你说的那个小天,用的居然是Hostker的主机。嘿嘿,话说我以前用的也是Hostker,不过Hostker要进入收费阶段了,所以我就果断的撤了 :o

    1. MOD回复

      @天域剑客: 哦,人家小天有各路财神爷送钱,人家不愁这个

    2. @kn007: :o 谁说的我是穷屌丝 只是还没收费而已不急

    3. MOD回复

      @凤翼天堂: :???: 别,美女,我就问你一句,你QQ什么都是v7。。你还敢说你没钱

    4. @kn007: 我会说是腾讯保送么= =当年参加活动略多就蹭蹭的送了 不过那是独立以前的事情了没事还贴个图表示自己中了 几个月 啥啥 = =那时候都是喜欢装逼的年代

    5. MOD回复

      @凤翼天堂: ......................谁信你

    6. @kn007: - -要不然我翻出来给你看 虽然百度改版了有点难找吧还有若干天女散花的博客

    7. MOD回复

      @凤翼天堂: ...果然会算计

    8. @kn007: !!!那不叫算计叫实惠!!!关注情报好吗!!!

    9. MOD回复

      @凤翼天堂: :o 也不见你来通风报信,切

    10. @kn007: 嗯哼哼

    11. MOD回复

      @凤翼天堂: :grin: 抱抱
      下次要记得通知我哦 :roll:

    12. @kn007: 网址都给你了下次自己看啦 - -

    13. MOD回复

      @凤翼天堂: :sad: 我哪有那么得空嘛,还是要劳烦你老人家有空就通知我 :arrow:

    14. @天域剑客: 等收费了再撤也不迟说不定还可以多送点贝壳

    15. MOD回复

      @凤翼天堂: ...女人果然都会算计

    16. @kn007: 怒了!!请不要叫我女人!!!!!!!!!而且这叫实惠

    17. MOD回复

      @凤翼天堂: 好吧,人妖同志

    18. @kn007: 嘛请叫的年轻一点好吗!!!比如少年什么的!!!不要叫人妖!!!

    19. MOD回复

      @凤翼天堂: 少女,你好

  8. LV2回复

    强势飘过

    1. MOD回复

      @Musk: 欢迎来袭

  9. LV3回复

    留言板?

    1. MOD回复

      @L-JH: 聊天短代码

  10. LV5回复

    挺好看,不过我更喜欢配图

    1. MOD回复

      @Nemo: :oops: 霸气,傲娇 :roll:

;-):|:x:twisted::smile::shock::sad::roll::razz::oops::o:mrgreen::lol::idea::grin::evil::cry::cool::arrow::???::?::!: