《双陈记》情侣博客

位置:主页 > 折腾WP > 简单的SNS分享代码

简单的SNS分享代码

今天,情侣博客群里的小河童鞋装了一个sns分享的插件,但是在IE下去不能显示SNS的图标,也不知道是神马原因。《双陈记》在这分享一个自己的简单的SNS代码,CSS版的。简单,SNS的网站就用了几个自己常用的新浪微博,人人,开心网,QQ空间,疼逊微博,这几个,如有需要可以自行添加,不过CSS相应的代码就要做调整了。

折腾代码如下:

HTML代码:

<ul id=“share”><li>Share</li>

<li><a href=“http://v.t.sina.com.cn/share/share.php?url=<?php the_permalink()?>&amp;title=<?php the_title();?>” title=“分享到新浪微博” target=“_blank” rel=“nofollow” class=“sina”></a> </li>

<li><a href=“http://share.renren.com/share/buttonshare.do?link=<?php the_permalink()?>&amp;title=<?php the_title();?>” title=“分享到人人网” target=“_blank” rel=“nofollow” class=“renren”> </a> </li>

<li> <a href=“http://www.kaixin001.com/repaste/share.php?rtitle=<?php the_permalink();?>&amp;rurl=<?php the_title(”);?>” title=“分享到开心网” target=“_blank” rel=“nofollow” class=“kx”></a></li>

<li> <a href=“http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=<?php the_permalink()?>&amp;title=<?php the_title();?>” title=“分享到QQ空间” target=“_blank” rel=“nofollow” class=“qz”></a> </li>

<li> <a href=“http://v.t.qq.com/share/share.php?url=<?php the_permalink()?>&amp;title=<?php the_title();?>” title=“分享到腾讯微博” target=“_blank” rel=“nofollow” class=“qq”></a> </li>

</ul>

CSS代码

ul#share li { float:left;list-style:none;padding:0;margin:0 2px; }

ul#share li a{ display:block}

.sina,.renren,.qq,.qz,.kx { background:url(images/sns.gif) no-repeat;width:20px;height:18px;}

.sina { background-position:0 0;}

.renren { background-position:-20px 0;}

.qq { background-position:-90px 0;}

.qz { background-position:-67px 0;}

.kx {background-position:-44px 0;}

具体效果参照这里http://520.love730.com的文章页面,《双陈记》情侣博客的现在的主题的SNS分享效果没有用css sprites,等新主题再改。

赠送背景图片简单的SNS分享代码

 

PS:话说我还是第一次用代码发芽网,感觉好不错!

 



无觅相关文章插件

已经有6位童鞋留言了,还不来盖楼!

  1. 这么快,太给力了,呵呵,我试试 :grin:

  2. 贴过,之后又被我删了~~~

love730.com
To:双陈记

 疑问 冷笑 悲伤 坏蛋 感叹 微笑 脸红 大笑 吃惊 惊讶 困惑 酷 大声笑 恼火 古怪

您还可以输入300个字插入图片