wordpress博客知更鸟begin主题分享按钮美化代码

云墨
云墨
云墨
647
文章
0
评论
更多
2018年1月13日 评论 1,914
广告也精彩点击注册网校，注册后直接登录使用，免费入驻，技术支持微信：https98

美化知更鸟begin主题分享按钮后的效果图如下：

wordpress博客知更鸟begin主题分享按钮美化代码

在主题css里面找到如下代码，需要将这段代码替换掉。

  1. /** 喜欢分享 **/
  2. #social {
  3.     position: relative;
  4.     margin: 50px auto;
  5. }
  6. .social-main {
  7.     position: relative;
  8.     margin: 0 auto;
  9.     width: 243px;
  10. }
  11. .social-main span {
  12.     float: left;
  13. }
  14. .social-main a {
  15.     color: #999;
  16.     line-height: 36px;
  17.     border-radius: 2px;
  18. }
  19. .share-s a, .shang-s a {
  20.     text-align: center;
  21. }
  22. .like a {
  23.     float: left;
  24.     padding-left: 15px;
  25. }
  26. .social-main a:hover {
  27.     background: #f1f1f1;
  28.     color: #444;
  29.     transition: all 0.2s ease-in 0s;
  30. }
  31. .like a {
  32.     background: #fff;
  33.     width: 120px;
  34.     display: block;
  35.     border: 1px solid #ddd;
  36. }
  37. .share-s a {
  38.     background: #fff;
  39.     width: 120px;
  40.     display: block;
  41.     padding-left: 15px;
  42.     border: 1px solid #ddd;
  43. }
  44. .social-main i {
  45.     color: #999;
  46.     margin: 0 5px 0 0;
  47. }
  48. /** 赏 **/
  49. .shang-empty {
  50.     position: absolute;
  51.     left: 90px;
  52.     top: 0px;
  53.     width: 62px;
  54.     height: 38px;
  55.     overflow: hidden;
  56. }
  57. .shang-empty span {
  58.     background: #fff;
  59.     width: 60px;
  60.     height: 60px;
  61.     display: block;
  62.     margin: -10px 0 0 0;
  63.     border-radius: 60px;
  64.     border: 1px solid #ddd;
  65. }
  66. .shang-p a {
  67.     position: absolute;
  68.     background: #fff;
  69.     left: 96px;
  70.     top: -5px;
  71.     width: 48px;
  72.     height: 48px;
  73.     font-size: 16px;
  74.     line-height: 45px;
  75.     display: block;
  76.     border: 1px solid #ddd;
  77.     border-radius: 40px;
  78.     left: 101px\9;
  79.     top: 0\9;
  80.     width: 38px\9;
  81.     height: 38px\9;
  82.     line-height: 35px\9;
  83. }
  84. .shang-s {
  85.     height: 37px;
  86. }
  87. #shang {
  88.     width: 280px;
  89.     display: block;
  90. }
  91. .shang-img {
  92.     float: left;
  93. }
  94. .shang-img img {
  95.     width: 140px;
  96.     height: auto;
  97. }
  98. .shang-main h4 {
  99.     font-size: 15px;
  100.     font-size: 1.5rem;
  101.     text-align: center;
  102.     margin-bottom: 10px;
  103. }
  104. .shang-main i {
  105.     color: #ff0000;
  106. }
  107. /** 分享 **/
  108. #share {
  109.     position: absolute;
  110.     top: -60px;
  111.     rightright: -29px;
  112.     width: 302px;
  113.     height: 68px;
  114.     display: none;
  115.     z-index: 999;
  116. }
  117. #share a {
  118.     float: left;
  119.     background: #999;
  120.     font-size: 20px !important;
  121.     color: #fff;
  122.     width: 40px;
  123.     height: 40px;
  124.     line-height: 40px;
  125.     margin-left: 4px;
  126.     padding-left: 0;
  127.     text-align: center;
  128.     border-radius: 3px;
  129.     background: rgba(128, 128, 128, 0.9);
  130. }
  131. #share .be-addbox:hover {
  132.     background: #7ab951 !important;
  133. }
  134. #share .be-qzone:hover {
  135.     background: #ff7400 !important;
  136. }
  137. #share .be-stsina:hover {
  138.     background: #ff0000 !important;
  139. }
  140. #share .be-tqq:hover {
  141.     background: #46c0e6 !important;
  142. }
  143. #share .be-renren:hover {
  144.     background: #3b68ac !important;
  145. }
  146. #share .be-weixin:hover {
  147.     background: #006f1d !important;
  148. }
  149. .bd_weixin_popup {
  150.     height: 250px !important;
  151. }
  152. .bd_weixin_popup_foot {
  153.     display: none;
  154. }

将其替换成以下代码即可。

  1. /** 喜欢分享 **/
  2. #social {
  3.     position: relative;
  4.     margin: 50px auto;
  5. }
  6. .social-main {
  7.     position: relative;
  8.     margin: 0 auto;
  9.     width: 243px;
  10. }
  11. .social-main span {
  12.     float: left;
  13. }
  14. .social-main a {
  15.     color: #fff;
  16.     line-height: 36px;
  17.     border-radius: 40px;
  18. }
  19. .share-s a, .shang-s a {
  20.     text-align: center;
  21. }
  22. .like a {
  23.     float: left;
  24.     padding-left: 15px;
  25. }
  26. .social-main a:hover {
  27.     background: #696969;
  28.     color: #fff;
  29.     transition: all 0.2s ease-in 0s;
  30. }
  31. .like a {
  32.     background: #FF0000;
  33.     width: 120px;
  34.     display: block;
  35.     border: 1px solid #ddd;
  36. }
  37. .share-s a {
  38.     background: #0000FF;
  39.     width: 120px;
  40.     display: block;
  41.     padding-left: 15px;
  42.     border: 1px solid #ddd;
  43. }
  44. .social-main i {
  45.     color: #fff;
  46.     margin: 0 5px 0 0;
  47. }
  48. /** 赏 **/
  49. .shang-empty {
  50.     position: absolute;
  51.     left: 90px;
  52.     top: 0px;
  53.     width: 62px;
  54.     height: 38px;
  55.     overflow: hidden;
  56. }
  57. .shang-empty span {
  58.     background: #fff;
  59.     width: 60px;
  60.     height: 60px;
  61.     display: block;
  62.     margin: -10px 0 0 0;
  63.     border-radius: 60px;
  64.     border: 1px solid #ddd;
  65. }
  66. .shang-p a {
  67.     position: absolute;
  68.     background: #ffab2e;
  69.     left: 96px;
  70.     top: -5px;
  71.     width: 48px;
  72.     height: 48px;
  73.     font-size: 16px;
  74.     line-height: 45px;
  75.     display: block;
  76.     border: 1px solid #ddd;
  77.     border-radius: 40px;
  78.     left: 101px\9;
  79.     top: 0\9;
  80.     width: 38px\9;
  81.     height: 38px\9;
  82.     line-height: 35px\9;
  83. }
  84. .shang-s {
  85.     height: 37px;
  86. }
  87. #shang {
  88.     width: 280px;
  89.     display: block;
  90. }
  91. .shang-img {
  92.     float: left;
  93. }
  94. .shang-img img {
  95.     width: 140px;
  96.     height: auto;
  97. }
  98. .shang-main h4 {
  99.     font-size: 15px;
  100.     font-size: 1.5rem;
  101.     text-align: center;
  102.     margin-bottom: 10px;
  103. }
  104. .shang-main i {
  105.     color: #ff0000;
  106. }
  107. /** 分享 **/
  108. #share {
  109.     position: absolute;
  110.     top: -60px;
  111.     rightright: -29px;
  112.     width: 302px;
  113.     height: 68px;
  114.     display: none;
  115.     z-index: 999;
  116. }
  117. #share a {
  118.     float: left;
  119.     background: #999;
  120.     font-size: 20px
  121.     color: #fff;
  122.     width: 40px;
  123.     height: 40px;
  124.     line-height: 40px;
  125.     margin-left: 4px;
  126.     padding-left: 0;
  127.     text-align: center;
  128.     border-radius: 20px;
  129.     background: rgba(128, 128, 128, 0.9);
  130. }
  131. #share .be-addbox {
  132.     color: #7ab951;
  133.     border: 1px solid #7ab951;
  134.     background: #fff;
  135. }
  136. #share .be-addbox:hover {
  137.     background: #7ab951 !important;
  138.     color: #fff !important;
  139. }
  140. #share .be-qzone {
  141.     color: #ff7400;
  142.     border: 1px solid #ff7400;
  143.     background: #fff;
  144. }
  145. #share .be-qzone:hover {
  146.     background: #ff7400 !important;
  147.     color: #fff !important;
  148. }
  149. #share .be-stsina {
  150.     color: red;
  151.     border: 1px solid red;
  152.     background: #fff;
  153. }
  154. #share .be-stsina:hover {
  155.     background: #ff0000 !important;
  156.     color: #fff !important;
  157. }
  158. #share .be-tqq {
  159.     color: #46c0e6;
  160.     border: 1px solid #46c0e6;
  161.     background: #fff;
  162. }
  163. #share .be-tqq:hover {
  164.     background: #46c0e6 !important;
  165.     color: #fff !important;
  166. }
  167. #share .be-renren {
  168.     color: #3b68ac;
  169.     border: 1px solid #3b68ac;
  170.     background: #fff;
  171. }
  172. #share .be-renren:hover {
  173.     background: #3b68ac !important;
  174.     color: #fff !important;
  175. }
  176. #share .be-weixin {
  177.     color: #006f1d;
  178.     border: 1px solid #006f1d;
  179.     background: #fff;
  180. }
  181. #share .be-weixin:hover {
  182.     background: #00ff43 !important;
  183.     color: #fff !important;
  184. }
  185. .bd_weixin_popup {
  186.     height: 250px !important;
  187. }
  188. .bd_weixin_popup_foot {
  189.     display: none;
  190. }

 

历史上的今天
1 月
13
1. 如有链接无法下载、失效或广告，请联系QQ：181289218 处理！
2. 本站的所有资源为购买、网络收集，或者用户投稿的资源，版权归原作者及网站所有!
3. 如若侵犯了您的权利，请及时联系站长删除!
4. 本站提供的资源，都不包含技术服务请大家谅解！
5. 此软件“仅限学习交流，不能用于商业用途”！
6. 如用于商业用途，请到官方购买正版软件，追究法律责任与“云墨SEO”站点无关！
  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 站长技术资源群
  • QQ群：431710796
  • weinxin
云墨
  • 本文由 发表于 2018年1月13日
  • 转载请务必保留本文链接：https://www.yunmoseo.com/1011.html
WordPress回复评论自动添加@评论者的修改方法 网站建设

WordPress回复评论自动添加@评论者的修改方法

有网友留言，问我这个@昵称回复如何实现的？如下图： 其实之前我也看到很多博客有这样的功能，但是我是在后台审核并回复评论的，之前有好几次因为没注意评论信息栏的：回复给***，还以为是给我的留言，所以给人...
05月08日 2,117 评论
匿名

发表评论

匿名网友