本人孙叫兽，前端全站程序员。微信公众号：电商程序员。
本文以CSDN孙叫兽的博客为例。
打开CSDN孙叫兽的博客主页。
谷歌浏览器下找到这个页面的源代码，鼠标右键-检查，或者F12打开调试页面。第一步找选中图标，第二步选中目标区域，第三步找到对应的前端代码复制到本地文件（选中目标代码右键copy - Copy element到编译器或者记事本）。
然后修改里面的文字及图片路径即可。
需要注意的是，图片需要为csdn平台的图片链接（把图片放到以往的文章中就能获取图片的路径）。
找到个人中心-管理博客-模块管理-添加自定义模块-编辑
把复制的代码复制到栏目内容（源代码获取的代码需要去除标签间空格并回车）不然你的显示效果会带超链接。
栏目内容支持HTML格式，不支持JS，最多添加1个自定义栏目，VIP、博客专家、企业博客才可在个人详情页显示
效果如下：
源代码如下：
<div class="panel_head">
<span>——》关注孙叫兽的博客</span>
</div>
<div class="panel_body">
<center>
<font color="#FF0000"> 关注「电商程序员」公众号 ，在微信后台回复「java高级进阶」，获取Java高级进阶全套资料(分布式+微服务+技术文档+简历模板)，资源下载请联系群主 </font>
<font color="#9B30FF"> 欢迎关注公众号 </font>
</center>
<center>
<img src="https://img-blog.csdnimg.cn/2020073120293658.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0E3NTcyOTEyMjg=,size_70,color_FFFFFF,t_70" alt="电商程序员">
</center>
<center>
<b> <font color="#FF0000">↓↓群</font>
<font color="#0000FF">426</font>
<font color="#9B30FF">360</font>
<font color="#FF7F00">778</font>
<font color="#FF0000">↓↓</font> </b>
<img src="https://img-blog.csdnimg.cn/20201030223742115.png" alt="QQ群">
</center>
<center>
<b> <font color="#FF0000">★</font>
<font color="#0000FF">大</font>
<font color="#9B30FF">佬</font>
<font color="#FF7F00">友链</font>
<font color="#FF0000">☆</font> </b>
</center>
<center>
<b>
<u>
<a href="https://me.csdn.net/weixin_41261833">
<font color="#9933ff"> 数据分析师</font>
<font color="#ff33ff">大佬 </font>
<font color="#FF0000"> Huang</font>
<font color="#cc0099"> supreme</font>
</a>
</u>
<a href="https://me.csdn.net/weixin_41261833"></a></b>
</center>
<center>
<b>
<u>
<a href="https://blog.csdn.net/A757291228">
<font color="#cc0099"> 知名博主1_bit</font>
</a>
</u>
<a href="https://blog.csdn.net/A757291228">
</a>
</b>
</center>
<center>
<b>
<u>
<a href="https://blog.csdn.net/weixin_43460224">
<font color="#9933ff"> 漂亮妹子</font>
<font color="#ff33ff">老谈 </font>
<font color="#FF0000"> 酸</font>
<font color="#cc0099"> 菜</font>
</a>
</u>
<a href="https://blog.csdn.net/weixin_43460224"></a>
</b>
</center>
<center>
<b>
<u>
<a href="https://me.csdn.net/weixin_43627118">
<font color="#FF7F00">学习标兵 风湿散人 </font>
</a>
</u>
</b>
</center>
<center>
<b>
<u>
<a href="https://me.csdn.net/weixin_44318830">
<font color="#FF7F00">骚气 Alice菌 </font>
</a>
</u>
</b>
</center>
<center>
<b><u><a href="https://blog.csdn.net/shang_0122">
<font color="#FF7F00">Think—Coder </font>
</a>
</u>
</b>
</center>
<center>
<b>
<u>
<a href="https://zihao.blog.csdn.net/">
<font color="#FF7F00">爱做梦的鱼 </font>
</a>
</u>
</b>
</center>
<center>
<b>
<u>
<a href="https://me.csdn.net/qq_43328313">
<font color="#FF0000">力争向上 AXYZdong </font>
</a>
</u>
</b>
</center>
<center>
<b><font color="#FF0000">↓↓</font>
<font color="#0000FF">学</font>
<font color="#9B30FF">习</font>
<font color="#FF7F00">号</font>
<font color="#FF0000">↓↓</font>
</b>
</center>
</div>
