WordPress博客侧栏添加广告样式代码

诗梦
420
文章
723
评论
2020年1月30日15:48:56WordPress博客侧栏添加广告样式代码已关闭评论 4K 次浏览 1523字阅读5分4秒
广告

心灵毒鸡汤:

WordPress博客侧栏添加广告样式代码,很久就想搞了,用来引流我的淘客站,代码别人的,只是改了合我审美观的颜色。WordPress博客侧栏添加广告样式代码

教程:后台小工具里在你需要显示的地方添加html小工具,切换为文本模式,将下面代码复制到里面保存即可。

  1. <a class="ads" href="http://seovx.com/" target="免费领优惠券">
  2.   <h4>免费领优惠券</h4>
  3.   <h5>诗梦推荐,安全有保障</h5>
  4.   <span class="ads-btn ads-btn-outline">立即领券</span></a>
  5. <style>
  6. .ads {
  7.     display:block;
  8.     padding:40px 15px;
  9.     text-align:center;
  10.     color:#fff!important;
  11.     background:#ff5719;
  12.     background-image:-webkit-linear-gradient(135deg,#bbafe7,#5368d9);
  13.     background-image:linear-gradient(135deg,#bbafe7,#5368d9)
  14. }
  15. .ads h4 {
  16.     margin:0;
  17.     font-size:22px;
  18.     font-weight:bold
  19. }
  20. .ads h5 {
  21.     margin:10px 0 0;
  22.     font-size:14px;
  23.     font-weight:bold
  24. }
  25. .ads.ads-btn {
  26.     margin-top:20px;
  27.     font-weight:bold
  28. }
  29. .ads.ads-btn:hover {
  30.     color:#ff5719
  31. }
  32. .ads-btn {
  33.     display:inline-block;
  34.     font-weight:normal;
  35.     margin-top:10px;
  36.     color:#666;
  37.     text-align:center;
  38.     vertical-align:top;
  39.     user-select:none;
  40.     border:none;
  41.     padding:0 36px;
  42.     line-height:38px;
  43.     font-size:14px;
  44.     border-radius:10px;
  45.     outline:0;
  46.     -webkit-transition:all 0.3s ease-in-out;
  47.     -moz-transition:all 0.3s ease-in-out;
  48.     transition:all 0.3s ease-in-out
  49. }
  50. .ads-btn:hover,.btn:focus,.btn.focus {
  51.     outline:0;
  52.     text-decoration:none
  53. }
  54. .ads-btn:active,.btn.active {
  55.     outline:0;
  56.     box-shadow:inset 0 3px 5px rgba(0,0,0,0.125)
  57. }
  58. .ads-btn-outline {
  59.     line-height:36px;
  60.     color:#fff;
  61.     background-color:transparent;
  62.     border:1px solid#fff
  63. }
  64. .ads-btn-outline:hover,.btn-outline:focus,.btn-outline.focus {
  65.     color:#343a3c;
  66.     background-color:#fff
  67. }
  68. </style>
  • 赞助本站
  • 三合一收款码
  • weinxin
  • 赞助本站
  • 三合一收款码
  • weinxin
云翼计划
云计算普惠校园计划,助力学生的辉煌明天!
  • 文本由 发表于 2020年1月30日15:48:56
  • 除非特殊声明,本站文章均为原创,转载请务必保留本文链接