社会化关注图标集合图切割引用CSS代码

 

对于wordpress博主来讲,提供社会化关注链接能够有效的及时的将内容更新通过多种形式传达给关注者,吸引分享,提高博客关注度。社会化关注图标包括国内的新浪微博、腾讯微博、QQ空间、人人社区、百度空间抑或直接QQ交谈等等,国外的twitter、facebook、google+等等,一般来讲,这些图标都是集合在一张图片素材上,然后通过css sprite切割引用,超链接可以设置为自己对应的社交网站个人主页链接,吸引读者关注自己。本文只提供了国内几个重要社会化关注图标的集合素材图,并讲述了代码原理,需要更多图标的读者可以自行搜索图标素材,然后修改代码引用。

社会化关注图标集合图素材

social_cn 直接右键另存为social_cn.png,放置到博客主题文件夹下images文件夹内,待引用。

CSS样式代码

请将以下代码添加到主题style.css文件内

[class^="sc-"], [class*=" sc-"] 
{
display: inline-block;
width: 30px;
height: 30px;
margin-top: 5px;
margin-right: 5px;
line-height: 30px;
vertical-align: text-top;
background-image: url(images/social_cn.png);
background-repeat: no-repeat;
filter:alpha(opacity=50); /*IE滤镜,透明度50%*/
-moz-opacity:0.5; /*Firefox私有,透明度50%*/
opacity:0.5;/*其他,透明度50%*/ 
transition: all .7s;
-moz-transition: all .7s;
-webkit-transition: all .7s;
-o-transition: all .7s;
}
[class^="sc-"]:hover, [class*=" sc-"]:hover 
{ 
filter:alpha(opacity=100); /*IE滤镜,透明度50%*/ 
-moz-opacity:1; /*Firefox私有,透明度50%*/ 
opacity:1;/*其他,透明度50%*/ }
.sc-xinlang { background-position: 0px 0px; }
.sc-kongjian { background-position: -30px 0px; }
.sc-tengxun { background-position: -60px 0px; }
.sc-qq { background-position: -90px 0px; }
.sc-renren { background-position: -120px 0px; }
.sc-baidu { background-position: -150px 0px; }

CSS引用代码

一般我一侧边栏小工具方式引用,直接放在最顶端显眼位置,小工具里拖一个文本小工具,添加如下代码:

其中,<a href="yoururl" title="yourtitle"></a>是设置图标的超链接的,一般yoururl为图标对应社交网的你的个人主页地址,请用该地址url替换yoururl,yourtitle为鼠标悬停显示注释名,请根据图标类型替换yourtitle。

效果图:

social-follow