WordPress开发源码 国内社交关注按钮(ChinaSocialFollowUsButtons)

WordPress开发源码 国内社交关注按钮(ChinaSocialFollowUsButtons)下载

国内社交关注按钮(ChinaSocialFollowUsButtons)

如果你想要一款简单风格的关注我们按钮,那么你可以试一试我们原创的ChinaSocialFollowUsButtons。

在使用时,只需要填写 a 标签 href 参数,图标就会自动显示出来,你可以放置在你所需要的地方。

你可以看到下面的示例图标。展示出来的图标都是我们支持的社会化网站。

只复制你需要的li标签:


安装步骤

1) 在网页头部加载css样式和jquery.js。注意要加载font-awesome的CSS样式,在这之前要将FONT文件夹复制到静态文件夹中,与CSS文件夹同级:

  
  
  1. ```html
  2. <script src="js/jquery.js"></script>
  3. <link rel="stylesheet" href="css/csfub.css" />
  4. <link rel="stylesheet" href="css/font-awesome.min.css?ver=4.4.0'" />
  5. ``` 

 

2) 复制任意的 `.menu-social` 列表到所需的位置:

  
  
  1.  
  2. ```html
  3. <!-- 按钮从这里开始. 复制 div到你的文档. -->
  4. <div id="menu-social" class="menu">
  5. <ul id="menu-social-items" class="menu-items" style="-webkit-padding-start: 0px;">
  6. <li class="menu-item">
  7. <a title="关注我们的新浪微博" target="_blank" rel="nofollow" href="http://weibo.com"><span class="screen-reader-text">新浪微博</span></a>
  8. </li>
  9. <li class="menu-item">
  10. <a title="关注我们的腾讯微博" target="_blank" rel="nofollow" href="http://t.qq.com"><span class="screen-reader-text">腾讯微博</span></a>
  11. </li>
  12. <li class="menu-item">
  13. <a title="关注我们的QQ空间" target="_blank" rel="nofollow" href="http://qzone.qq.com"><span class="screen-reader-text">QQ空间</span></a>
  14. </li>
  15. <li class="menu-item">
  16. <a title="关注我们的github主页" target="_blank" rel="nofollow" href="https://github.com/yehaicao/"><span class="screen-reader-text">github</span></a>
  17. </li>
  18. <li class="menu-item">
  19. <a title="关注我们的人人主页" target="_blank" rel="nofollow" href="https://zhan.renren.com/"><span class="screen-reader-text">github</span></a>
  20. </li>
  21. <li class="menu-item">
  22. <a title="关注我们的微信公众号" target="_blank" rel="nofollow" href="http://wx.qq.com"><span class="screen-reader-text">微信公众号</span></a>
  23. </li>
  24. <li class="menu-item">
  25. <a title="关注我们的百度空间" target="_blank" rel="nofollow" href="http://www.baidu.com"><span class="screen-reader-text">百度</span></a>
  26. </li>
  27. <li class="menu-item">
  28. <a title="关注我们的twitter" target="_blank" rel="nofollow" href="http://twitter.com"><span class="screen-reader-text">twitter</span></a>
  29. </li>
  30. <li class="menu-item">
  31. <a title="facebook" target="_blank" rel="nofollow" href="http://facebook.com"><span class="screen-reader-text">facebook</span></a>
  32. </li>
  33. <li class="menu-item">
  34. <a title="plus.google" target="_blank" rel="nofollow" href="http://plus.google.com"><span class="screen-reader-text">plus.google</span></a>
  35. </li>
  36. <li class="menu-item">
  37. <a title="pinterest" target="_blank" rel="nofollow" href="http://pinterest.com"><span class="screen-reader-text">pinterest</span></a>
  38. </li>
  39. <li class="menu-item">
  40. <a title="flickr" target="_blank" rel="nofollow" href="http://flickr.com"><span class="screen-reader-text">flickr</span></a>
  41. </li>
  42. <li class="menu-item">
  43. <a title="vimeo" target="_blank" rel="nofollow" href="http://vimeo.com"><span class="screen-reader-text">vimeo</span></a>
  44. </li>
  45. <li class="menu-item">
  46. <a title="youtube" target="_blank" rel="nofollow" href="http://youtube.com"><span class="screen-reader-text">youtube</span></a>
  47. </li>
  48. <li class="menu-item">
  49. <a title="instagram" target="_blank" rel="nofollow" href="http://instagram.com"><span class="screen-reader-text">instagram</span></a>
  50. </li>
  51. <li class="menu-item">
  52. <a title="youtube" target="_blank" rel="nofollow" href="http://youtube.com"><span class="screen-reader-text">youtube</span></a>
  53. </li>
  54. <li class="menu-item">
  55. <a title="wordpress" target="_blank" rel="nofollow" href="http://wordpress.com"><span class="screen-reader-text">wordpress</span></a>
  56. </li>
  57. <li class="menu-item">
  58. <a title="vk" target="_blank" rel="nofollow" href="http://vk.com"><span class="screen-reader-text">vk</span></a>
  59. </li>
  60. <li class="menu-item">
  61. <a title="linkedin" target="_blank" rel="nofollow" href="http://linkedin.com"><span class="screen-reader-text">linkedin</span></a>
  62. </li>
  63. <li class="menu-item">
  64. <a title="soundcloud" target="_blank" rel="nofollow" href="http://soundcloud.com"><span class="screen-reader-text">soundcloud</span></a>
  65. </li>
  66. <li class="menu-item">
  67. <a title="tripadvisor" target="_blank" rel="nofollow" href="http://tripadvisor.com"><span class="screen-reader-text">tripadvisor</span></a>
  68. </li>
  69. <li class="menu-item">
  70. <a title="yelp" target="_blank" rel="nofollow" href="http://yelp.com"><span class="screen-reader-text">yelp</span></a>
  71. </li>
  72. <li class="menu-item">
  73. <a title="订阅我们" target="_blank" rel="nofollow" href="http://www.wordpressleaf.com/feed"><span class="screen-reader-text">订阅我们</span></a>
  74. </li>
  75. <li class="menu-item">
  76. <a title="给我们写信" target="_blank" rel="nofollow" href="mailto:admin@wordpressleaf.com"><span class="screen-reader-text">给我写信</span></a>
  77. </li>
  78. </ul>
  79. </div>
  80. <!-- 按钮代码结束 -->
  81. ```
WordPress开发源码 国内社交关注按钮(ChinaSocialFollowUsButtons)下载

WordPressLeaf.com

 
这些<li> 代码,你可以在 index.html 示例中找到。
 
3) 在你的网页上加上javascript文件,它们都在js的文件内。另外微信二维码使用了js来加载,所以你也需要加载csfub.js。

  
  
  1.  ```html
  2. <script src="js/csfub.js"></script>
  3. ```

 
4) 在csfub.js中将图片地址改自己的图片地址。

  
  
  1.  ```html
  2. var imgurl='img/weixin.png';
  3. ```

 

下载地址

你可以在github下载: github

结束

如果你有什么疑问,可以在本页留言,获得帮助。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值