给网站文章底部添加分享/赞赏/收藏等小功能

给网站文章底部添加分享/赞赏/收藏等小功能

本次给大家分享一个简单的网站文章底部 分享、赞赏、收藏、手机看、投诉小功能,设置了只PC端显示,移动端会隐藏。

本次代码,大家需要修改的地方为:

1.打赏码(自己生成个三合一的即可,截取二维码为正方形,请勿使用长方形或者其他奇葩样式,圆形也可以)

2.侵权投诉链接

3.JS中二维码的图标地址

修改完,将所有代码放置文章底部公共区域即可。

HTML代码:

  1. <div class="footer-tool">
  2. <div class="tool-list">
  3. <a href="javascript:;">分享</a>
  4. <div class="tool-prompt">
  5. <p>分享海报</p>
  6. <img class="ewmurl" src="" alt="">
  7. <p>扫一扫 - 分享本文</p>
  8. </div>
  9. </div>
  10. <div class="tool-list">
  11. <a href="javascript:;">打赏</a>
  12. <div class="tool-prompt">
  13. <p>QQ 微信 支付宝</p>
  14. <img src="http://cdn.iqzhan.com/qzhan/img/106.png" alt="">
  15. <p>扫一扫 - 打赏Q站</p>
  16. </div>
  17. </div>
  18. <div class="tool-list">
  19. <a href="javascript:;">收藏</a>
  20. <div class="tool-prompt">
  21. <p>请按下 Ctrl + D</p>
  22. <p>即可收藏当前文章</p>
  23. </div>
  24. </div>
  25. <div class="tool-list">
  26. <a href="javascript:;">手机看</a>
  27. <div class="tool-prompt">
  28. <p>分享到微信朋友圈</p>
  29. <img class="ewmurl" src="" alt="">
  30. <p>扫一扫 - 手机阅读</p>
  31. </div>
  32. </div>
  33. <div class="tool-list">
  34. <a href="http://iqzhan.com" target="_blank">侵权投诉</a>
  35. <div class="tool-prompt">
  36. <p>侵权、举报、建议</p>
  37. <p></p>
  38. </div>
  39. </div>
  40. </div>
  41. JS代码
  42. <script>
  43. // 获取当前 url 地址
  44. var siteurl = window.location.href;
  45. // 通过正则将url的 & 替换为 %26
  46. var siteurlres = siteurl.replace(/&/g,"%26");
  47. // 获取图片id
  48. var ewmurl = document.getElementsByClassName("ewmurl");
  49. // 生成二维码图片路径
  50. ewmurl[0].src = ewmurl[1].src = 'http://qr.topscan.com/api.php?bg=ffffff&fg=333333&text=' + siteurlres + '&logo=http://cdn.iqzhan.com/qzhan/img/106.png'
  51. </script>

CSS代码:

  1. <style>
  2. @media screen and (max-width: 1198px){
  3. .footer-tool{
  4. display: none!important;
  5. }
  6. }
  7. .footer-tool{
  8. width: 100%;
  9. height: 48px;
  10. background: #f3f7fb;
  11. border: 1px solid #d6e6f5;
  12. display: flex;
  13. justify-content: center;
  14. align-items: center;
  15. margin: 5px 0;
  16. }
  17. .tool-list{
  18. position: relative;
  19. width: 20%;
  20. height: 36px;
  21. }
  22. .tool-list a{
  23. color: #555666;
  24. font-size: 16px;
  25. line-height: 36px;
  26. text-decoration: none;
  27. padding: 0 12px;
  28. box-sizing: border-box;
  29. border-radius: 4px;
  30. display: block;
  31. text-align: center;
  32. }
  33. .tool-list a:hover{
  34. background: rgba(39,124,204,0.1);
  35. }
  36. .tool-list:hover .tool-prompt{
  37. display: block;
  38. }
  39. .tool-prompt{
  40. display: none;
  41. width: 180px;
  42. background: #fff;
  43. border-radius: 10px;
  44. box-shadow: 0 0 5px rgba(0,0,0,.4);
  45. padding: 5px 10px;
  46. box-sizing: border-box;
  47. text-align: center;
  48. position: absolute;
  49. bottom: 36px;
  50. left: 50%;
  51. margin-left: -90px;
  52. }
  53. .tool-prompt img{
  54. max-width: 100%;
  55. max-height: 160px;
  56. }
  57. .tool-prompt p{
  58. color: #555666;
  59. font-size: 16px;
  60. }
  61. </style>
 收藏 (0) 打赏

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

除特别注明外,本站所有文章均基于CC-BY-NC-SA 4.0原创,转载请注明出处。
文章名称:《给网站文章底部添加分享/赞赏/收藏等小功能》
文章链接:https://www.vvso.cn/xlbk/16899.html
分享到: 更多 (0)

热门文章

评论 抢沙发

切换注册

登录

忘记密码 ?

切换登录

注册