CSDN VIP如何添加自定义栏目

た 入场券 2023-06-08 03:20 110阅读 0赞

几个月前我也开始在csdn上开了博客,一来给自己加几个少的可怜的流量,再者,让公众号的原创文章获得更多的曝光,让有需要的同学看到。

写过csdn博客的同学都知道,默认只有打赏c币功能;也没有专门广告位;引导栏目,只有侧栏csdn自己的引导二维码。


如何在csdn自定义栏目,加赞赏功能,或者其他等引导,让读者能很直观的看到,而不是在每篇文章加,增加自己工作量。这个功能以前对所有用户开放,但是很不幸,这功能被CSDN下架了,看下图:

custom


我也是之前为了给读者下载CSDN资料开了VIP,目前还有400次下载,为了限制,每天有8个免费下载名额,需要的可以扫码关注公众号,在后台回复【2】加我代下载。


鼠标放到头像处,点击下拉框中的【管理博客】>> 点击侧栏的【博客模块管理】

custom

custom

只能添加一条自定义栏目,栏目内容支持html,可以自由发挥:
custom

添加公众号引导

  1. <div>
  2. <p><strong>公众号</strong></p>
  3. <img src="http://www.liabio.cn/img/me/gongzhonghao-ercode.jpg" alt="长按识别二维码关注,精彩第一时间送达" title="长按识别二维码关注,精彩第一时间送达" height="100%" width="100%">
  4. <marquee><font color=" red">欢迎扫码关注! </font></marquee>
  5. </div>

效果图

custom

添加QQ、QQ群、邮箱、友情链接等:

  1. <div id="custom_column_27694137" class="panel">
  2. <p><strong>联系方式</strong></p>
  3. <br><br>
  4. <ul class="panel_head">
  5. <span><a target="_blank" href="http://sighttp.qq.com/msgrd?v=3&uin=1939137617&site=&menu=yes">☞ 本人QQ: 1939137617</a>
  6. </span>
  7. </ul>
  8. <ul class="panel_head">
  9. <span><a target="_blank" href="//shang.qq.com/wpa/qunwpa?idkey=1a08adf5d7f9d49a2a83bb0d3b4acf0e94554895e12dc657ecfb88d706d82673"><img border="0" src="//pub.idqqimg.com/wpa/images/group.png" alt="程序员实战" title="程序员实战"></a></span>
  10. </ul>
  11. <ul class="panel_head">
  12. <span><a target="_blank" href="https://github.com/liabio">☞ github.com/liabio</a></span>
  13. </ul>
  14. <ul class="panel_head">
  15. <span><a href="mailto:coderaction@foxmail.com">☞ coderaction@foxmail.com</a></span>
  16. </ul>
  17. <span><a href="https://liabio.blog.csdn.net/">☞ https://liabio.blog.csdn.net/</a></span>
  18. <marquee><font color=" red">欢迎光临! </font></marquee>
  19. </div>
  20. <div>
  21. <p><strong>友情链接</strong></p>
  22. <br><br>
  23. <a target="_blank" href="http://www.liabio.cn/">【小碗汤】的博客</a><br><br>
  24. <marquee><font color=" red">欢迎来踩! </font></marquee>
  25. </div>

效果图

custom

  • 其中点击QQ会打开登陆QQ的对话框,只需要把href里链接中QQ号换为自己的;
  • 点击加入QQ群后会跳转到加群窗口,需要在https://qun.qq.com/join.html 网站中登陆需要绑定的QQ号 >> 选择群 >> 复制网页代码
    custom
  • 点击邮箱会打开邮箱登陆窗口,只需修改href中的邮箱即可

添加打赏提问

  1. <div>
  2. <p><strong>欢迎打赏和提问</strong></p>
  3. <img src="http://www.liabio.cn/img/fee-say2.png" alt="长按识别提问码 向我提问" title="长按识别提问码 向我提问" height="100%" width="100%">
  4. </div>

效果图

custom

打赏问答图片由【Chat快问】小程序生成。

微信、支付宝打赏

  1. <div>
  2. <p><strong>扫码打赏</strong></p>
  3. <br>
  4. <img src="http://www.liabio.cn/img/wechat-zhifubao-QR.png" alt="长按识别 微信|支付宝打赏通用" title="长按识别 微信|支付宝打赏通用" height="100%" width="100%">
  5. </div>

只用一个二维码实现微信、支付宝打赏,由小程序【二维码合并】支持。

整体代码

  1. <div id="asideCustom41021941" class="aside-box custom-box">
  2. <div class="aside-content clearfix">
  3. <div>
  4. <p><strong>公众号</strong></p>
  5. <img src="http://www.liabio.cn/img/me/gongzhonghao-ercode.jpg" alt="长按识别二维码关注,精彩第一时间送达" title="长按识别二维码关注,精彩第一时间送达" height="100%" width="100%">
  6. <marquee><font color=" red">欢迎扫码关注! </font></marquee>
  7. </div>
  8. <br>
  9. <div id="custom_column_27694137" class="panel">
  10. <p><strong>联系方式</strong></p>
  11. <ul class="panel_head">
  12. <span><a target="_blank" href="http://sighttp.qq.com/msgrd?v=3&uin=1939137617&site=&menu=yes">☞ 本人QQ: 1939137617</a>
  13. </span>
  14. </ul>
  15. <ul class="panel_head">
  16. <span><a target="_blank" href="//shang.qq.com/wpa/qunwpa?idkey=1a08adf5d7f9d49a2a83bb0d3b4acf0e94554895e12dc657ecfb88d706d82673"><img border="0" src="//pub.idqqimg.com/wpa/images/group.png" alt="程序员实战" title="程序员实战"></a></span>
  17. </ul>
  18. <ul class="panel_head">
  19. <span><a target="_blank" href="https://github.com/liabio">☞ github.com/liabio</a></span>
  20. </ul>
  21. <ul class="panel_head">
  22. <span><a href="mailto:coderaction@foxmail.com">☞ coderaction@foxmail.com</a></span>
  23. </ul>
  24. <span><a href="https://liabio.blog.csdn.net/">☞ https://liabio.blog.csdn.net/</a></span>
  25. <marquee><font color=" red">欢迎光临! </font></marquee>
  26. </div>
  27. <br>
  28. <div>
  29. <p><strong>友情链接</strong></p>
  30. <a target="_blank" href="http://www.liabio.cn/">【小碗汤】的博客</a><br><br>
  31. <marquee><font color=" red">欢迎来踩! </font></marquee>
  32. </div>
  33. <br>
  34. <div>
  35. <p><strong>欢迎打赏和提问</strong></p>
  36. <img src="http://www.liabio.cn/img/fee-say2.png" alt="长按识别提问码 向我提问" title="长按识别提问码 向我提问" height="100%" width="100%">
  37. </div>
  38. <br>
  39. <div>
  40. <p><strong>扫码打赏</strong></p>
  41. <img src="http://www.liabio.cn/img/wechat-zhifubao-QR.png" alt="长按识别 微信|支付宝打赏通用" title="长按识别 微信|支付宝打赏通用" height="100%" width="100%">
  42. </div>
  43. </div>
  44. </div>

整体效果

custom


作者简洁

作者:小碗汤,一位热爱、认真写作的小伙,目前维护原创公众号:『我的小碗汤』,专注于写golang、docker、kubernetes等知识等提升硬实力的文章,期待你的关注。 转载说明:务必注明来源(注明:来源于公众号:我的小碗汤, 作者:小碗汤)

发表评论

表情:
评论列表 (有 0 条评论,110人围观)

还没有评论,来说两句吧...

相关阅读

    相关 CSDN VIP如何添加定义栏目

    几个月前我也开始在csdn上开了博客,一来给自己加几个少的可怜的流量,再者,让公众号的原创文章获得更多的曝光,让有需要的同学看到。 写过csdn博客的同学都知道,默认只有打赏