漂亮的自定义样式百度分享代码

html按钮标签代码部分

<p class="share bdsharebuttonbox">
	<span class="bds_shere"></span>
	<a class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a>
	<a class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
	<a class="bds_weixin" data-cmd="weixin" title="分享到微信"></a>
	<a class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a>
	<a class="bds_sqq" data-cmd="sqq" title="分享到QQ好友"></a>
	<a class="bds_bdhome" data-cmd="bdhome" title="分享到百度新首页"></a>
	<a class="bds_tqf" data-cmd="tqf" title="分享到腾讯朋友"></a>
	<a class="bds_youdao" data-cmd="youdao" title="分享到有道云笔记"></a>
	<a class="bds_more" data-cmd="more" title="更多"></a>
</p>

css样式文件内容部分

/* share */
.bdsharebuttonbox{line-height:30px;height:30px;overflow:hidden;vertical-align:top}
.bdsharebuttonbox a,.bdsharebuttonbox span{width:24px;height:24px;display:inline-block;margin-right:5px;background:url(../img/share.png) no-repeat;cursor:pointer;margin-bottom:0;opacity:.8}
.bdsharebuttonbox a:hover{opacity:1}
.bdsharebuttonbox a.bds_tsina{background-position:0 0}
.bdsharebuttonbox a.bds_weixin{background-position:0 -33px}
.bdsharebuttonbox a.bds_qzone{background-position:0 -65px}
.bdsharebuttonbox a.bds_sqq{background-position:0 -98px}
.bdsharebuttonbox a.bds_renren{background-position:0 -131px}
.bdsharebuttonbox a.bds_tqq{background-position:0 -163px}
.bdsharebuttonbox a.bds_diandian{background-position:0 -356px}
.bdsharebuttonbox a.bds_youdao{background-position:0 -388px}
.bdsharebuttonbox a.bds_ty{background-position:0 -420px}
.bdsharebuttonbox a.bds_fbook{background-position:0 -452px}
.bdsharebuttonbox a.bds_twi{background-position:0 -484px}
.bdsharebuttonbox a.bds_kaixin001{background-position:0 -228px}
.bdsharebuttonbox a.bds_taobao{background-position:0 -196px}
.bdsharebuttonbox a.bds_douban{background-position:0 -324px}
.bdsharebuttonbox a.bds_mail{background-position:0 -548px}
.bdsharebuttonbox a.bds_copy{background-position:0 -516px}
.bdsharebuttonbox a.bds_bdhome{background-position:0 -292px}
.bdsharebuttonbox a.bds_tqf{background-position:0 -260px}
.bdsharebuttonbox a.bds_more{background-position:0 -577px}
.bdsharebuttonbox span.bds_shere{background-position:0 -606px}
.bdsharebuttonbox a.bds_count{background:0 0;width:auto;height:auto;position:relative;top:-6px}
.bdsharebuttonbox a.bds_count{margin:0 2px}
.bdsharebuttonbox a.bds_btn{ line-height: initial; width: auto; height: auto; margin: 0; background: #f5f5f5; opacity: 1;}

JavaScript标签脚步部分

<script>
	window._bd_share_config={
		"common":{
			"bdSnsKey":{},
			"bdText":"",
			"bdMini":"2",
			"bdMiniList":false,
			"bdPic":"",
			"bdStyle":"0",
			"bdSize":"24"},
			"share":[{
				"bdCustomStyle":"/static/api/css/share.css"
			}]
		};
		with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=431235.js?cdnversion='+~(-new Date()/36e5)];
</script>


代码实例效果图

image.png

注意:此文章是站长从千万篇中精心挑选的,请认真对待文章内容。站长提供不易,请动动小手分享一下!如有问题请联系站长,QQ号:1787511717(同微信),邮箱号:1787511717@qq.com,以上内容由沙漏博客的作者颜浩发布到技术学习专栏!
本文章最后修改时间为:2019-03-13 19:19!

内容版权声明:文章由沙漏博客_分享提供!

转载注明出处:https://www.58yanhao.com/a/230.html

分享到:
打赏

觉得本站还不错就打赏一下吧!

支付宝扫一扫打赏

微信扫一扫打赏