It's about the homepage of http://www.chinasurfreport.com . When you hover over the image you will see social sharing links popping up. The main problem is that the default div is <div class="bshare-custom">
And because I want to use two different styles for that div (sidebar as well, which is working just fine as you can see) I either have to:
change the div to <div class="bshare-cn">
which I did on the website as you see. But doesn't seem to be able to use the JavaScript.
Use the <div class="bshare-custom">
and style it differently. But it seems you can't give 1 div multiple stylings?
I tried changing the JavaScript code changing all bshare-custom
to bshare-cn
, but it doesn't seem to be working.
<div class="bshare-cn">
<div class="bsPromo bsPromo2"></div>
<a title="分享到微信" class="bshare-weixin" href="javascript:void(0);"></a>
<a title="分享到新浪微博" class="bshare-sinaminiblog" href="javascript:void(0);"></a>
<a title="分享到QQ空间" class="bshare-qzone"></a>
<a title="更多平台" class="bshare-more bshare-more-icon more-style-addthis"></a>
<span class="BSHARE_COUNT bshare-share-count" style="float: none; left: 36px; color: rgb(255, 255, 255);">87</span>
</div>
<div class="bshare-custom">
<a title="Share on Facebook" class="bshare-facebook">Facebook</a>
<a title="Share on Twitter" class="bshare-twitter">Twitter</a>
<a title="Share on Weibo" class="bshare-sinaminiblog">Weibo</a>
<a title="Share on QQ" class="bshare-qzone">QQ</a>
<a title="Share on WeChat" class="bshare-weixin">WeiXin</a>
<a title="More Social Media Platforms" class="bshare-more bshare-more-icon more-style-addthis">+</a>
<span class="BSHARE_COUNT bshare-share-count" style="float: none; left: 36px; color: rgb(255, 255, 255);">87</span>
</div>
The javascripts: http://www.chinasurfreport.com/javascripts/buttonLite.js / bshareC0.js
Would it be possible to simply add in additional CSS classes to the elements? For example: <div class="bshare-custom bshare-cn">
or <div class="bshare-custom styleX">
.bshare-custom:nth-child(1) {
Solved it. This way you can set more styles to one div.
All you need to make a sharing link to social media is...
<a href="SHARELINK">Share On Service X</a>
Then just plugin the right values, in this case...
<a href="http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=http://example.com&title=My+Title!&summary=This+is+my+summary!">Share on QZONE</a>
Actually implementation for one of my sites...
<a href="https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=http%3A%2F%2Fwww.revoltlib.com%2F&title=RevoltLib+Anarchist+Library&summary=Learn+about+Anarchism!">Share on QZONE</a>
This gives me something like....
Want to always keep up to date on the newest social share URLs? Check out my GitHub project: GitHub: Social Share URLs
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.