当前位置：
  1. 首页
  2. 知更鸟begin美化
  3. 正文

知更鸟begin主题美化修改文章底部点赞分享按钮颜色

有的小伙伴，比较喜欢文章底部的点赞、分享按钮彩色式样的，马找钱博主也是如此。

在学习了多家知更鸟主题系列的网站后最终实现了，现将代码分享下。

修改后的小伙伴们，有没有效果，请在评论区留言下，也给我和大家个参考。我就不设置回复可见了，谢谢大家!

效果如下图。

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

替换完成，即可实现你想要的效果!颜色可以根据自己喜好自行调节。

上一篇 wordpress博客知更鸟begin主题美化部分合集
下一篇 知更鸟begin主题美化给评论头像添加旋转变圆特效

相关文章

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

插入图片
浏览器会保存昵称、邮箱和网站cookies信息，下次评论时使用。