美化Begin主题喜欢和分享按钮

2017年10月24日09:30:00 2 57 views

逛网站的时候,发现有些伙伴美化了知更鸟begin主题的这个喜欢分享按钮,个人感觉还不错,于是便收集来了。效果图如下。

在主题css里面找到以下代码,我们需要把这段代码替换掉。

  1. /** 喜欢分享 **/
  2. #social {
  3.     positionrelative;
  4.     margin50px auto;
  5. }
  6. .social-main {
  7.     positionrelative;
  8.     margin: 0 auto;
  9.     width243px;
  10. }
  11. .social-main span {
  12.     floatleft;
  13. }
  14. .social-main a {
  15.     color#999;
  16.     line-height36px;
  17.     border-radius: 2px;
  18. }
  19. .share-s a, .shang-s a {
  20.     text-aligncenter;
  21. }
  22. .like a {
  23.     floatleft;
  24.     padding-left15px;
  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.     width120px;
  34.     displayblock;
  35.     border1px solid #ddd;
  36. }
  37. .share-s a {
  38.     background#fff;
  39.     width120px;
  40.     displayblock;
  41.     padding-left15px;
  42.     border1px solid #ddd;
  43. }
  44. .social-main i {
  45.     color#999;
  46.     margin: 0 5px 0 0;
  47. }
  48. /** 赏 **/
  49. .shang-empty {
  50.     positionabsolute;
  51.     left90px;
  52.     top0px;
  53.     width62px;
  54.     height38px;
  55.     overflowhidden;
  56. }
  57. .shang-empty span {
  58.     background#fff;
  59.     width60px;
  60.     height60px;
  61.     displayblock;
  62.     margin: -10px 0 0 0;
  63.     border-radius: 60px;
  64.     border1px solid #ddd;
  65. }
  66. .shang-p a {
  67.     positionabsolute;
  68.     background#fff;
  69.     left96px;
  70.     top: -5px;
  71.     width48px;
  72.     height48px;
  73.     font-size16px;
  74.     line-height45px;
  75.     displayblock;
  76.     border1px solid #ddd;
  77.     border-radius: 40px;
  78.     left101px\9;
  79.     top: 0\9;
  80.     width38px\9;
  81.     height38px\9;
  82.     line-height35px\9;
  83. }
  84. .shang-s {
  85.     height37px;
  86. }
  87. #shang {
  88.     width280px;
  89.     displayblock;
  90. }
  91. .shang-img {
  92.     floatleft;
  93. }
  94. .shang-img img {
  95.     width140px;
  96.     heightauto;
  97. }
  98. .shang-main h4 {
  99.     font-size15px;
  100.     font-size: 1.5rem;
  101.     text-aligncenter;
  102.     margin-bottom10px;
  103. }
  104. .shang-main i {
  105.     color#ff0000;
  106. }
  107. /** 分享 **/
  108. #share {
  109.     positionabsolute;
  110.     top: -60px;
  111.     rightright: -29px;
  112.     width302px;
  113.     height68px;
  114.     displaynone;
  115.     z-index: 999;
  116. }
  117. #share a {
  118.     floatleft;
  119.     background#999;
  120.     font-size20px !important;
  121.     color#fff;
  122.     width40px;
  123.     height40px;
  124.     line-height40px;
  125.     margin-left4px;
  126.     padding-left: 0;
  127.     text-aligncenter;
  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.     height250px !important;
  151. }
  152. .bd_weixin_popup_foot {
  153.     displaynone;
  154. }

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

  1. /** 喜欢分享 **/
  2. #social {
  3.     positionrelative;
  4.     margin50px auto;
  5. }
  6. .social-main {
  7.     positionrelative;
  8.     margin: 0 auto;
  9.     width243px;
  10. }
  11. .social-main span {
  12.     floatleft;
  13. }
  14. .social-main a {
  15.     color#fff;
  16.     line-height36px;
  17.     border-radius: 40px;
  18. }
  19. .share-s a, .shang-s a {
  20.     text-aligncenter;
  21. }
  22. .like a {
  23.     floatleft;
  24.     padding-left15px;
  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.     width120px;
  34.     displayblock;
  35.     border1px solid #ddd;
  36. }
  37. .share-s a {
  38.     background#0000FF;
  39.     width120px;
  40.     displayblock;
  41.     padding-left15px;
  42.     border1px solid #ddd;
  43. }
  44. .social-main i {
  45.     color#fff;
  46.     margin: 0 5px 0 0;
  47. }
  48. /** 赏 **/
  49. .shang-empty {
  50.     positionabsolute;
  51.     left90px;
  52.     top0px;
  53.     width62px;
  54.     height38px;
  55.     overflowhidden;
  56. }
  57. .shang-empty span {
  58.     background#fff;
  59.     width60px;
  60.     height60px;
  61.     displayblock;
  62.     margin: -10px 0 0 0;
  63.     border-radius: 60px;
  64.     border1px solid #ddd;
  65. }
  66. .shang-p a {
  67.     positionabsolute;
  68.     background#ffab2e;
  69.     left96px;
  70.     top: -5px;
  71.     width48px;
  72.     height48px;
  73.     font-size16px;
  74.     line-height45px;
  75.     displayblock;
  76.     border1px solid #ddd;
  77.     border-radius: 40px;
  78.     left101px\9;
  79.     top: 0\9;
  80.     width38px\9;
  81.     height38px\9;
  82.     line-height35px\9;
  83. }
  84. .shang-s {
  85.     height37px;
  86. }
  87. #shang {
  88.     width280px;
  89.     displayblock;
  90. }
  91. .shang-img {
  92.     floatleft;
  93. }
  94. .shang-img img {
  95.     width140px;
  96.     heightauto;
  97. }
  98. .shang-main h4 {
  99.     font-size15px;
  100.     font-size: 1.5rem;
  101.     text-aligncenter;
  102.     margin-bottom10px;
  103. }
  104. .shang-main i {
  105.     color#ff0000;
  106. }
  107. /** 分享 **/
  108. #share {
  109.     positionabsolute;
  110.     top: -60px;
  111.     rightright: -29px;
  112.     width302px;
  113.     height68px;
  114.     displaynone;
  115.     z-index: 999;
  116. }
  117. #share a {
  118.     floatleft;
  119.     background#999;
  120.     font-size20px
  121.     color#fff;
  122.     width40px;
  123.     height40px;
  124.     line-height40px;
  125.     margin-left4px;
  126.     padding-left: 0;
  127.     text-aligncenter;
  128.     border-radius: 20px;
  129.     background: rgba(128, 128, 128, 0.9);
  130. }
  131. #share .be-addbox {
  132.     color#7ab951;
  133.     border1px 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.     border1px 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.     colorred;
  151.     border1px 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.     border1px 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.     border1px 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.     border1px 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.     height250px !important;
  187. }
  188. .bd_weixin_popup_foot {
  189.     displaynone;
  190. }

以上就是美化喜欢分享按钮的代码,博主已经使用,收集于此,方便自己也方便他人,有什么问题可以留言讨论。

weinxin
博客之家
博客之家,欢迎各位来加入,一起来交流!本站资源全部上传在群里,有需要的也可以加群来免费下载。
如果本站内容对你有所帮助,请帮忙点击下页面上的广告,帮助下网站发展,谢谢大家!
朱曙明

发表评论

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

目前评论:2   其中:访客  1   博主  1

    • avatar 胡俊杰 0

      哈哈哈稳当,我已经换上了~