博客园的推荐栏,怎么漂起来?
说出来不怕你们笑话,写代码写了这么多年,竟然一开始搞不定博客园的推荐栏,怎么让它漂起来这个问题困扰了我很久!
漂起来的样子是什么样的呢?
漂起来的样子就像上面这张图那样,方便园友们推荐!
问了好几个朋友,他们竟然也不知道怎么搞,让我很伤心——看来还得自己研究研究。
第一步:找样式。
我在纯洁的微笑的博客那里,看到了推荐栏漂起来的样子。于是就「F12」打开谷歌浏览器的开发者模式,然后通过「Elements」面板找到一串CSS代码:
1 2 3 4 5 6 7 8 9 10 11 | #div_digg { position : fixed ; bottom : 5px ; width : 136px ; right : 0px ; border : 2px solid #6FA833 ; padding : 10px ; background-color : #fff ; border-radius: 5px 5px 5px 5px !important ; box-shadow: 0 0 0 1px #5F5A4B , 1px 1px 6px 1px rgba( 10 , 10 , 0 , 0.5 ); } |
具体方式,见下图:
第二步,在本地新建一个css文件,把以上代码拷贝进去。
第三步,在博客园的「文件」面板中上传css文件。
记得点击css文件的链接,复制文件的路径。
第四步,在博客园的「设置」面板的「页首Html代码」引入css文件。
最后,别忘了保存。保存后,再点开一篇博客园的文章,就看到推荐栏漂了起来。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· AI与.NET技术实操系列(二):开始使用ML.NET
· 单线程的Redis速度为什么快?