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

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

 

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

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

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

2.侵权投诉链接

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

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

 

CSS代码:

  1. <style>
  2. @media screen and (maxwidth: 1198px){
  3. .footertool{
  4. display: none!important;
  5. }
  6. }
  7. .footertool{
  8. width: 100%;
  9. height: 48px;
  10. background: #f3f7fb;
  11. border: 1px solid #d6e6f5;
  12. display: flex;
  13. justifycontent: center;
  14. alignitems: center;
  15. margin: 5px 0;
  16. }
  17. .toollist{
  18. position: relative;
  19. width: 20%;
  20. height: 36px;
  21. }
  22. .toollist a{
  23. color: #555666;
  24. fontsize: 16px;
  25. lineheight: 36px;
  26. textdecoration: none;
  27. padding: 0 12px;
  28. boxsizing: borderbox;
  29. borderradius: 4px;
  30. display: block;
  31. textalign: center;
  32. }
  33. .toollist a:hover{
  34. background: rgba(39,124,204,0.1);
  35. }
  36. .toollist:hover .toolprompt{
  37. display: block;
  38. }
  39. .toolprompt{
  40. display: none;
  41. width: 180px;
  42. background: #fff;
  43. borderradius: 10px;
  44. boxshadow: 0 0 5px rgba(0,0,0,.4);
  45. padding: 5px 10px;
  46. boxsizing: borderbox;
  47. textalign: center;
  48. position: absolute;
  49. bottom: 36px;
  50. left: 50%;
  51. marginleft: 90px;
  52. }
  53. .toolprompt img{
  54. maxwidth: 100%;
  55. maxheight: 160px;
  56. }
  57. .toolprompt p{
  58. color: #555666;
  59. fontsize: 16px;
  60. }
  61. </style>

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.  
  43. <script>
  44. // 获取当前 url 地址
  45. var siteurl = window.location.href;
  46. // 通过正则将url的 & 替换为 %26
  47. var siteurlres = siteurl.replace(/&/g,“%26”);
  48. // 获取图片id
  49. var ewmurl = document.getElementsByClassName(“ewmurl”);
  50. // 生成二维码图片路径
  51. 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’
  52. </script>
1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!2106752484@qq.com
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理,有奖励!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有积分奖励和额外收入!
豆豆资源网 » 给网站文章底部添加分享/赞赏/收藏等小功能

发表评论