知更鳥begin主題美化修改文章底部點贊分享按鈕顏色

  • A+
所屬分類：知更鳥begin美化

知更鳥begin主題美化修改文章底部點贊分享按鈕顏色

有的小伙伴，比較喜歡文章底部的點贊、分享按鈕彩色式樣的，馬找錢博主也是如此。

在學習了多家知更鳥主題系列的網站后最終實現了，現將代碼分享下。

修改后的小伙伴們，有沒有效果，請在評論區留言下，也給我和大家個參考。我就不設置回復可見了，謝謝大家!

效果如下圖。

知更鳥begin主題美化修改文章底部點贊分享按鈕顏色
知更鳥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. }

替換完成，即可實現你想要的效果!顏色可以根據自己喜好自行調節。

  • 我的微信
  • 技術支持添加二維碼
  • weinxin
  • 我的QQ二維碼
  • 教程下載請掃二維碼
  • weinxin
馬找錢

發表評論

:?::razz::sad::evil::!::smile::oops::grin::eek::shock::???::cool::lol::mad::twisted::roll::wink::idea::arrow::neutral::cry::mrgreen: