WordPress美化：知更鸟Begin主题打赏、分享、点赞按钮美化

2022年3月19日20:00:50 发表评论

有的掘友，比较喜欢文章底部的点赞、分享按钮彩色式样的，现将代码分享下。

修改后的小伙伴们，有没有效果，请在评论区留言下，也给我和大家个参考，谢谢大家！

效果图：

WordPress美化：知更鸟Begin主题打赏、分享、点赞按钮美化

代码部署：

用Notepad++打开知更鸟Begin主题（5.2版本）样式表 (style.css)，大概在6269行（不同版本的主题，也许行数不一样），找到下面的代码

 
  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. }
  155. /** 弹窗 **/
  156. .fancybox-wrap {
  157.    position: absolute;
  158.    top: 0;
  159.    left: 0;
  160.    z-index: 8020;
  161. }
  162. .fancybox-skin {
  163.    position: relative;
  164.    background: #fff;
  165.    color: #444;
  166.    text-shadow: none;
  167.    border-radius: 4px;
  168. }
  169. .fancybox-opened {
  170.    z-index: 8030;
  171. }
  172. .fancybox-opened .fancybox-skin {
  173.    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.5);
  174. }
  175. .fancybox-outer, .fancybox-inner {
  176.    position: relative;
  177. }
  178. .fancybox-inner {
  179.    overflow: hidden;
  180. }
  181. .fancybox-error {
  182.    padding: 30px;
  183.    whitewhite-space: nowrap;
  184. }
  185. .fancybox-image, .fancybox-iframe {
  186.    display: block;
  187.    width: 100%;
  188.    height: 100%;
  189. }
  190. .fancybox-image {
  191.    max-width: 100%;
  192.    max-height: 100%;
  193. }
  194. #fancybox-loading {
  195.    position: fixed;
  196.    top: 50%;
  197.    left: 50%;
  198.    margin: -22px 0 0 -22px;
  199.    z-index: 8060;
  200. }
  201. #fancybox-loading div {
  202.    width: 79px;
  203.    height: 10px;
  204.    background: url(img/infinite.gif) center center no-repeat;
  205. }
  206. .fancybox-nav {
  207.    position: absolute;
  208.    top: 0;
  209.    width: 45%;
  210.    height: 100%;
  211.    cursor: pointer;
  212.    background: transparent url(img/blank.gif);
  213. /* helps IE */
  214.    -webkit-tap-highlight-color: rgba(0,0,0,0);
  215.    z-index: 8040;
  216. }
  217. .fancybox-prev {
  218.    left: 0;
  219. }
  220. .fancybox-next {
  221.    rightright: 0;
  222. }
  223. .fancybox-nav span {
  224.    position: absolute;
  225.    top: 50%;
  226.    width: 30px;
  227.    height: 30px;
  228.    margin-top: -18px;
  229.    cursor: pointer;
  230.    z-index: 8040;
  231.    visibility: hidden;
  232. }
  233. .fancybox-nav .be {
  234.    font-size: 30px !important;
  235. }
  236. .fancybox-prev span {
  237.    left: 10px;
  238. }
  239. .fancybox-next span {
  240.    rightright: 10px;
  241. }
  242. .fancybox-nav:hover span {
  243.    visibility: visible;
  244. }
  245. .fancybox-tmp {
  246.    position: absolute;
  247.    top: -99999px;
  248.    left: -99999px;
  249.    visibility: hidden;
  250.    max-width: 99999px;
  251.    max-height: 99999px;
  252.    overflow: visible !important;
  253. }
  254. .fancybox-overlay {
  255.    position: absolute;
  256.    top: 0;
  257.    left: 0;
  258.    overflow: hidden;
  259.    display: none;
  260.    z-index: 8010;
  261.    background: url(img/fancy.png);
  262. }
  263. .fancybox-overlay-fixed {
  264.    position: fixed;
  265.    bottombottom: 0;
  266.    rightright: 0;
  267. }
  268. .fancybox-overlay {
  269.    overflow: auto;
  270.    overflow-y: scroll;
  271. }
  272. #fancybox-buttons {
  273.    position: fixed;
  274.    left: 0;
  275.    width: 100%;
  276.    z-index: 8050;
  277. }
  278. #fancybox-buttons.top {
  279.    top: 10px;
  280. }
  281. #fancybox-buttons.bottombottom {
  282.    bottombottom: 10px;
  283. }
  284. #fancybox-buttons ul {
  285.    background: #000;
  286.    background: rgba(0, 0, 0, 0.1);
  287.    display: block;
  288.    width: 177px;
  289.    height: 31px;
  290.    margin: 0 auto;
  291.    border: 1px solid #999;
  292.    border-radius: 2px;
  293. }
  294. #fancybox-buttons ul li {
  295.    float: left;
  296.    margin: 0;
  297.    padding: 0;
  298. }
  299. #fancybox-buttons a {
  300.    display: block;
  301.    color: #fff;
  302.    width: 35px;
  303.    height: 30px;
  304.    line-height: 30px;
  305.    text-align: center;
  306.    outline: none;
  307. }
  308. #fancybox-buttons a:hover {
  309.    color: #04a4cc;
  310. }
  311. #fancybox-buttons .be {
  312.    font-size: 15px !important;
  313. }
  314. #fancybox-buttons .be-arrowright {
  315.    border-right: 1px solid #999;
  316. }
  317. #fancybox-buttons .be-cross {
  318.    border-left: 1px solid #999;
  319. }
  320. .btnDisabled {
  321.    cursor: default;
  322.    opacity: 0.4;
  323.    filter: alpha(opacity=40);
  324. }
  325. .icon-fancy-close {
  326.    position: absolute;
  327.    top: -20px;
  328.    rightright: -20px;
  329.    width: 24px;
  330.    height: 24px;
  331.    color: #e50000;
  332.    font-size: 18px;
  333.    line-height: 24px;
  334.    cursor: pointer;
  335. }
  336. .fancybox-close {
  337.    position: absolute;
  338.    background: #cf0000;
  339.    top: -25px;
  340.    rightright: 0;
  341.    color: #fff;
  342.    padding: 0 8px;
  343.    border-radius: 5px 5px 0 0;
  344. }
  345. .fancybox-close:hover {
  346.    color: #ccc;
  347. }

修改成以下

此处为隐藏的内容！
登录后才能查看！
登录

修改完成，即可实现你想要的效果！

Tips:

做副业长期赚不到钱的话很容易放弃，特别是对于新手来说，新手刚入行的时候期望值都比较高，以为进来就马上能赚到钱，但是现实却很残酷，很多新手都没能坚持到赚钱的时候。因此，我在朋友圈《加微信》会给大家推荐一些破零项目，钱虽然不多，但是我觉得能让很多新手做副业的信心不那么容易被打垮。

掘金网
  • 版权声明：本站原创文章，转载请保留出处和链接！
  • 本文链接：http://jjsoho.com/fxlzay/ 网赚有风险，投资需谨慎！