字号: - o +

文章页左边固定分享效果

2012-10-27 杂七杂八 2人评论 23,666次浏览   

子曰:天生我才必有用,千金散尽还复来 o(∩_∩)o
WopusIDC优惠码:W3Cshare, 点击获取, 或者提交订单时手动输入

首先找到文章页面模版single.php

在你需要添加的地方(其实这里随便了,因为是固定在左侧的)添加

 <?php dtheme_share_bar(); ?>

这个函数,当然了,这个函数调用肯定是要在function.php模版函数里面添加的,

$dHasShare = false;
function dtheme_share_bar(){
echo '<div class="fixed-share-bar"><div class="share-bar-top"><a class="comment-total"></a></div><div id="bdshare" class="bdshare_t bds_tools_32 get-codes-bdshare share-bar-btn"><a class="bds_qzone"></a><a class="bds_tqq"></a><a class="bds_tsina"></a><a class="bds_renren"></a><a class="bds_kaixin001"></a></div><div class="share-bar-bottom"></div></div>';
global $dHasShare;
$dHasShare = true;
}

最后,也是最重要的一步就是添加样式了,

/* share_bar */
.fixed-share-bar{position:fixed;left:50%;top:230px;width:62px;margin-left:-702px;border-right:1px solid #cad5ed;_position:absolute;_top:expression(eval(document.documentElement.scrollTop+218));}
.share-bar-top{border-top:1px solid #cad5ed;height:0px;background:url(img/score.png) no-repeat 0 0;}
.fixed-share-bar .comment-total{width:50px;padding:9px 0 0 7px;line-height:16px;color:#fff;text-align:center;font-family:arial;display:block;}
.fixed-share-bar .comment-total:hover,.fixed-share-bar .comment-total:visited{text-decoration:none;color:#fff;}
.share-bar-btn{padding:6px 0 4px;background:#f5f8fd;border-left:1px solid #cad5ed;float:none!important;}
.share-bar-bottom{border-bottom:1px solid #cad5ed;height:0px;background:url(img/score.png) no-repeat 0 -89px;font:0/0 arial;}
.share-bar-btn a{background:url(img/score.png) no-repeat!important;display:block;width:32px!important;height:32px!important;margin:0 auto 10px!important;padding:0!important;float:none!important;}
.share-bar-btn .bds_qzone{background-position:-75px 0!important;}
.share-bar-btn .bds_tsina{background-position:-116px 0!important;}
.share-bar-btn .bds_tqq{background-position:-157px 0!important;}
.share-bar-btn .bds_kaixin001{background-position:-199px 0!important;}
.share-bar-btn .bds_renren{background-position:-282px 0!important;}

我是添加在全局样式style.css里面,至于你们,自己看了。

注意:以上样式的效果就是在本站看到的效果,如果你想变成其他效果,只是稍作修改,自己去领悟吧!

本文作者:两千年的孤寂

2014年的目标:1、入手kp2,多看几本书。2、至少旅游一次。3、带公司走上正轨。少说话,多做事!我不是最好的,但我要做最努力的...... 本站主题交流群:465295619,不闲聊!以后你会知道它的重要性!你懂的~

继续查看有关 的文章

本文密切相关的文章

网友评论1条 ,博主回复1

  1. 我原来也搞了这个,但是想变小点,像素位置调整不好,就取消了

    IT自习室10-26 03:00 回复
    • 样式我已经重新编辑过了。。。上面发布的代码不是这个样式

发表我的评论

*

*

取消