打扮我自己的博客

前言

    决定在博客园写博客以后,我搜索了好多关于博客的美化教程,以及试过好多博客主题。有的呢太花哨,有很多动态效果,这种比较占用电脑资源。有的呢太复杂,看得我眼花缭乱。有的呢,太简单,感觉不好看。经过我不懈努力,终于找到了一款我感觉还不错的博客主题点击跳转】【新版地址。刚开始是使用作者给的方式一或方式二,但慢慢就发现这个主题还是有bug的,而且我也想要自定义一些我想要的功能,因此就换成方式三额。现在博客呈现的样子有一些是我自己改的。我自己也比较满意这款主题,后面有什么想要加的我就自己动手。

改动点

  1. 右侧时钟,大家可以【下载】这个,我也是网上找的。方便我浏览博客的时候看下时间。
  2. 还有就是调CSS,原有的geek主题通过css隐藏了“上一篇、下一篇”,我放开了,而且加上了颜色。
  3. 其次就是我还加入了博客签名,css样式自己可以调整下。我是通过分析博客园原有代码,给那几个文字加上了点击动作,大家可以参考下:
<style>.qm_point{color:#6DA47D;font-size:18px;}</style> <div>作者:<a style="color:#0000FF;" href="https://www.cnblogs.com/janbar" target="_blank">janbar</a></div> <div>出处:<a style="color:#0000FF;" href="https://www.cnblogs.com/janbar" target="_blank">https://www.cnblogs.com/janbar</a></div> <div>本文版权归作者和博客园所有,欢迎转载,转载请标明出处。喜欢我的文章请<a onclick="document.getElementById('green_channel_follow').click();" href="javascript:void(0);"><span class="qm_point"> [关注我] </span></a>吧。</div> <div>如果您觉得本篇博文对您有所收获,可点击<a onclick="document.getElementById('green_channel_digg').click();" href="javascript:void(0);"><span class="qm_point"> [推荐] </span></a>并<a onclick="document.getElementById('green_channel_favorite').click();" href="javascript:void(0);"><span class="qm_point"> [收藏] </span></a>,或到右侧<span class="qm_point"> [打赏] </span>里请我喝杯咖啡,非常感谢。</div>
  1. 还有就是评论框背景图,大家可以自己分析源码改到你自己的博客吧。

结语

    总之这个博客主题改动还是挺多的,我都是通过Chrome控制台定位元素,然后分析源码,然后修改到自己觉得合适为止。我觉得博客没必要太花哨太复杂,但也不能太简单,合适就好。最重要的是看起来赏心悦目

posted @ 2020-10-17 11:27  janbar  阅读(301)  评论(2编辑  收藏  举报