WordPress开发源码 国内社交关注按钮(ChinaSocialFollowUsButtons)
来源:互联网 发布:连接酒店网络无法跳出 编辑:程序博客网 时间:2024/05/16 09:20
国内社交关注按钮(ChinaSocialFollowUsButtons)
如果你想要一款简单风格的关注我们按钮,那么你可以试一试我们原创的ChinaSocialFollowUsButtons。
在使用时,只需要填写 a 标签 href 参数,图标就会自动显示出来,你可以放置在你所需要的地方。
你可以看到下面的示例图标。展示出来的图标都是我们支持的社会化网站。
只复制你需要的li标签:
安装步骤
1) 在网页头部加载css样式和jquery.js。注意要加载font-awesome的CSS样式,在这之前要将FONT文件夹复制到静态文件夹中,与CSS文件夹同级:
- ```html
- <script src="js/jquery.js"></script>
- <link rel="stylesheet" href="css/csfub.css" />
- <link rel="stylesheet" href="css/font-awesome.min.css?ver=4.4.0'" />
- ```
2) 复制任意的 `.menu-social` 列表到所需的位置:
WordPressLeaf.com
- ```html
- <!-- 按钮从这里开始. 复制 div到你的文档. -->
- <div id="menu-social" class="menu">
- <ul id="menu-social-items" class="menu-items" style="-webkit-padding-start: 0px;">
- <li class="menu-item">
- <a title="关注我们的新浪微博" target="_blank" rel="nofollow" href="http://weibo.com"><span class="screen-reader-text">新浪微博</span></a>
- </li>
- <li class="menu-item">
- <a title="关注我们的腾讯微博" target="_blank" rel="nofollow" href="http://t.qq.com"><span class="screen-reader-text">腾讯微博</span></a>
- </li>
- <li class="menu-item">
- <a title="关注我们的QQ空间" target="_blank" rel="nofollow" href="http://qzone.qq.com"><span class="screen-reader-text">QQ空间</span></a>
- </li>
- <li class="menu-item">
- <a title="关注我们的github主页" target="_blank" rel="nofollow" href="https://github.com/yehaicao/"><span class="screen-reader-text">github</span></a>
- </li>
- <li class="menu-item">
- <a title="关注我们的人人主页" target="_blank" rel="nofollow" href="https://zhan.renren.com/"><span class="screen-reader-text">github</span></a>
- </li>
- <li class="menu-item">
- <a title="关注我们的微信公众号" target="_blank" rel="nofollow" href="http://wx.qq.com"><span class="screen-reader-text">微信公众号</span></a>
- </li>
- <li class="menu-item">
- <a title="关注我们的百度空间" target="_blank" rel="nofollow" href="http://www.baidu.com"><span class="screen-reader-text">百度</span></a>
- </li>
- <li class="menu-item">
- <a title="关注我们的twitter" target="_blank" rel="nofollow" href="http://twitter.com"><span class="screen-reader-text">twitter</span></a>
- </li>
- <li class="menu-item">
- <a title="facebook" target="_blank" rel="nofollow" href="http://facebook.com"><span class="screen-reader-text">facebook</span></a>
- </li>
- <li class="menu-item">
- <a title="plus.google" target="_blank" rel="nofollow" href="http://plus.google.com"><span class="screen-reader-text">plus.google</span></a>
- </li>
- <li class="menu-item">
- <a title="pinterest" target="_blank" rel="nofollow" href="http://pinterest.com"><span class="screen-reader-text">pinterest</span></a>
- </li>
- <li class="menu-item">
- <a title="flickr" target="_blank" rel="nofollow" href="http://flickr.com"><span class="screen-reader-text">flickr</span></a>
- </li>
- <li class="menu-item">
- <a title="vimeo" target="_blank" rel="nofollow" href="http://vimeo.com"><span class="screen-reader-text">vimeo</span></a>
- </li>
- <li class="menu-item">
- <a title="youtube" target="_blank" rel="nofollow" href="http://youtube.com"><span class="screen-reader-text">youtube</span></a>
- </li>
- <li class="menu-item">
- <a title="instagram" target="_blank" rel="nofollow" href="http://instagram.com"><span class="screen-reader-text">instagram</span></a>
- </li>
- <li class="menu-item">
- <a title="youtube" target="_blank" rel="nofollow" href="http://youtube.com"><span class="screen-reader-text">youtube</span></a>
- </li>
- <li class="menu-item">
- <a title="wordpress" target="_blank" rel="nofollow" href="http://wordpress.com"><span class="screen-reader-text">wordpress</span></a>
- </li>
- <li class="menu-item">
- <a title="vk" target="_blank" rel="nofollow" href="http://vk.com"><span class="screen-reader-text">vk</span></a>
- </li>
- <li class="menu-item">
- <a title="linkedin" target="_blank" rel="nofollow" href="http://linkedin.com"><span class="screen-reader-text">linkedin</span></a>
- </li>
- <li class="menu-item">
- <a title="soundcloud" target="_blank" rel="nofollow" href="http://soundcloud.com"><span class="screen-reader-text">soundcloud</span></a>
- </li>
- <li class="menu-item">
- <a title="tripadvisor" target="_blank" rel="nofollow" href="http://tripadvisor.com"><span class="screen-reader-text">tripadvisor</span></a>
- </li>
- <li class="menu-item">
- <a title="yelp" target="_blank" rel="nofollow" href="http://yelp.com"><span class="screen-reader-text">yelp</span></a>
- </li>
- <li class="menu-item">
- <a title="订阅我们" target="_blank" rel="nofollow" href="http://www.wordpressleaf.com/feed"><span class="screen-reader-text">订阅我们</span></a>
- </li>
- <li class="menu-item">
- <a title="给我们写信" target="_blank" rel="nofollow" href="mailto:admin@wordpressleaf.com"><span class="screen-reader-text">给我写信</span></a>
- </li>
- </ul>
- </div>
- <!-- 按钮代码结束 -->
- ```
这些<li>
代码,你可以在 index.html 示例中找到。
3) 在你的网页上加上javascript文件,它们都在js的文件内。另外微信二维码使用了js来加载,所以你也需要加载csfub.js。
- ```html
- <script src="js/csfub.js"></script>
- ```
4) 在csfub.js中将图片地址改自己的图片地址。
- ```html
- var imgurl='img/weixin.png';
- ```
下载地址
你可以在github下载: github
结束
如果你有什么疑问,可以在本页留言,获得帮助。
0 0
- WordPress开发源码 国内社交关注按钮(ChinaSocialFollowUsButtons)
- WordPress 实战:在wordpress文章中加入分享到微博及社交网站的按钮(代码实现,非插件)
- 为 WordPress 添加分享到社交网站按钮(非插件)
- 社交app应用开发 客户端+服务器源码
- WordPress主题 /交友/社交/婚恋/约会 在线约会 婚恋交友主题面世 会员机制整合国内支付平台
- 国内社交游戏现状分析
- 传谷歌自主开发社交网络平台对抗Facebook,国内的校内网也是不错的
- ios开发学习--按钮(Button)效果源码分享
- 【2013Esri中国用户大会】引人关注的Web开发(部分提供源码下载)
- BEA 将高度关注印度开发源码开发
- 国内值得关注的新网盘
- WORDPRESS第十三课WORDPRESS源码解读(1)
- (最新整理)国内网页设计、程序开发、源码等网址大全
- 社交媒体(朋友圈、微博、QQ空间)开发一网打尽,PC端移动端都有!——源码来袭!
- 社交媒体(朋友圈、微博、QQ空间)开发一网打尽,PC端移动端都有!——源码来袭!
- 社交媒体(朋友圈、微博、QQ空间)开发一网打尽,PC端移动端都有!——源码来袭!
- 社交媒体(朋友圈、微博、QQ空间)开发一网打尽,PC端移动端都有!——源码来袭!
- 社交媒体(朋友圈、微博、QQ空间)开发一网打尽,PC端移动端都有!——源码来袭!
- 只用一个USB接口为树莓派zero连接WIFI
- 控件基本操作与基本事件响应
- [leetcode] 328. Odd Even Linked List
- Android自定义View实战(SlideTab-可滑动的选择器)
- [leetcode] 230. Kth Smallest Element in a BST
- WordPress开发源码 国内社交关注按钮(ChinaSocialFollowUsButtons)
- Structs2
- ibus设置拼音输入法
- 学习现代软件工程
- [leetcode] 377. Combination Sum IV
- [leetcode] 337. House Robber III
- MySQL事务隔离级别详解
- 软件开发之人员分类
- 基于NX的研发产品设计管理平台实现(六)--BOM的设计与管理1