当前位置:首页 > 教程 > 帝国cms > 内容模板

4.12 应用举例 百度分享

1、模板代码

<div class="diggit"><a href="JavaScript:makeRequest('[!--news.url--]e/public/digg/?classid=[!--classid--]&id=[!--id--]&dotop=1&doajax=1&ajaxarea=diggnum','EchoReturnedText','GET','');">很赞哦! (<b id="diggnum"><script type="text/javascript" src="[!--news.url--]e/public/ViewClick/?classid=[!--classid--]&id=[!--id--]&down=5"></script></b>)</a></div>
<div class="share">
<span>分享到:</span>
<div class="bdsharebuttonbox bdshare-button-style0-16" data-bd-bind="1620626498424">
<a title="分享到QQ好友" href="#" class="bds_sqq" data-cmd="sqq"></a>
<a title="分享到微信" href="#" class="bds_weixin" data-cmd="weixin"></a>
<a title="分享到QQ空间" href="#" class="bds_qzone" data-cmd="qzone"></a>
<a title="分享到新浪微博" href="#" class="bds_tsina" data-cmd="tsina"></a>
<a href="#" class="bds_more" data-cmd="more"></a>
</div>
<script>window._bd_share_config={"common":{"bdSnsKey":{"tsina":""},"bdText":"","bdMini":"2","bdMiniList":["qzone","tsina","weixin","tqq","tieba","douban"],"bdPic":"","bdStyle":"0","bdSize":"16"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='[!--news.url--]static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script> 

2、上传static文件夹到根目录 下载文件

3、css代码

/*share*/
.share { width: 331px; margin: 20px auto; text-align: center; }
.share span { float: left; line-height: 44px; font-size: 16px; color: #808595; }
.share b { margin-top: 20px; }
.bdshare-button-style0-16 a { width: 42px; height: 42px !important; padding-left: 0 !important; display: inline-block; margin: 0 2px !important; cursor: pointer !important; background-size: 42px !important; }
.share a.bds_sqq { background: url(../images/share.png) no-repeat; background-position: 0 -156px; }
.share a.bds_weixin { background: url(../images/share.png) no-repeat; background-position: 0 -52px; }
.share a.bds_qzone { background: url(../images/share.png) no-repeat; background-position: 0px -364px; }
.share a.bds_tsina { background: url(../images/share.png) no-repeat; background-position: 0 -260px; }
.share a.bds_sqq:hover { background: url(../images/share.png) no-repeat; background-position: 0 -104px; }
.share a.bds_weixin:hover { background: url(../images/share.png) no-repeat; background-position: 0 0px; }
.share a.bds_qzone:hover { background: url(../images/share.png) no-repeat; background-position: 0 -312px; }
.share a.bds_tsina:hover { background: url(../images/share.png) no-repeat; background-position: 0 -208px; }
.share a.bds_more { background: url(../images/share.png) no-repeat; background-position: 0 -570px; margin: 0; padding: 0; width: 44px; }

4、分享图标保存到images里面,并且命名为share.png 

 

你觉得文章内容怎么样

阿里云代金券 100 云产品通用

有效期30天 首购用户

立即领取
推荐宝塔面板 0 安全高效的

服务器运维面板

立即领取