博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
简单的3步设置,让你的博客园更漂亮!
阅读量:5878 次
发布时间:2019-06-19

本文共 2171 字,大约阅读时间需要 7 分钟。

昨天在发布博客园的第一篇花了很多时间和精力编写的博客后《》,有博友问个人的博客风格是如何自定义的,今天特将月前整理博客时用到的一些方法总结如下,希望能对你设计自己的博客有一些帮助:)

第一步,上传自定义的css

在浏览器中直接打开,然后按ctrl + s,即可将本人博客用到的自定义css下载下来。接着在博客的管理页面,找到文件选项卡,上传刚刚下载的文件:

上传之后,记下该文件的url,如上图中的红框所示。注:上图中的url为本人博客的自定义css文件地址,你在后面设置的时候虽然也可以用它,但是最好还是不用,万一将来我把这个文件删了,你的博客就访问不到这个css了。

第二步,设置页面定制的css和页首html

在博客管理页面,找到设置选项卡:

在该选项卡下面,先修改标题,在标题文本前面先添加下面的一段html:

页面效果如下:

这段html,在后面的步骤中用来设置头像。

接着在博客皮肤配置处,选择下面的皮肤,因为第一步上传的css文件是在该皮肤下修改得到的,部分css可能还是得依赖该皮肤的原来的css文件:

接着在页面定制css部分,粘贴下面的代码:

div.post div.entry {    font-family: Georgia, "Times New Roman", Times, sans-serif}div.post div.entry h1, div.post div.entry h2, div.post div.entry h3 {    margin-top: 24px;    margin-bottom: 12px;}div.post div.entry h1 {    padding: 5px;    color: white;    background-color: gray;}div.post h2 {    font-size: 22px;    line-height: 100%;}div.post div.entry pre.code {    font-family: Consolas border-style : dashed;    border-left: solid 5px #6ce26c}div#information {    background-color: #f8f8ee;    border: solid 1px #e8e7d0;    padding: 5px 10px 0px 10px;    min-height: 10px;    margin-top: -15px;    margin-bottom: 30px;    color: #666666}.cnblogs_code {    border-left: #58CE60 5px solid !important;}#site_nav_under, .c_ad_block, #under_post_news, #under_post_kb {    display: none !important;}

页面效果如下:

接着在页首html区域,粘贴如下代码:

页面效果如下:

需要注意的是这段代码中,有3处需要改成你自己博客相关的文件。第一处的文本是:

http://files.cnblogs.com/files/lyzg/cnblogs.css

你要在代码中搜索该段文本,并替换为第一步中你在自己博客中上传的css。

第二处是:

http://images2015.cnblogs.com/blog/459873/201509/459873-20150919175458742-1697781612.jpg

这张图片时博客的背景图片,是我从百度上下下来的分辨率比较大的图片,以便呈现出一个大图的网页背景。由于博客管理页面允许上传的文件不包括图片文件,所以这张图片是插入在一篇草稿博客中的:

这篇博客不会发布,所以外面看不到,在里面插入图片文件,然后记下图片文件的地址,就可以在css中被引用了。如果你也想要这样一个网页背景大图的话,可以通过这个方式上传一张自己喜欢的图片,然后替换第二处所示的文本即可。

第三处是:

http://pic.cnblogs.com/avatar/459873/20150917085709.png

这个文件是头像的url,你需要用自己图像的url替换掉它。

第三步,设置页脚html

找到页脚html部分,粘贴进下面的代码:

这段js包含了返回顶部,分享组件以及博文页面生成目录的功能。需要注意的是这个生成目录的功能,它的原理是去博文里面寻找h2元素把它作为每一个目录项,所以你在编辑博客的时候,大的标题一定是要用h2,小的标题应该用h3,不能混用,推荐使用live writter编辑博客,在编辑的时候,它的标题2和标题3在源代码中显示的就是h2和h3:

以上就是我当时自定义博客时用的所有方法了,有的细节没有讲太多,相信你在使用这些方法后,查看博客页面的源代码就能明白其中的原理了,当然有疑问的,还是欢迎你在评论区与我交流。

转载地址:http://prdix.baihongyu.com/

你可能感兴趣的文章
Html body的滚动条禁止与启用
查看>>
Tengine新增nginx upstream模块的使用
查看>>
多媒体工具Mediainfo
查看>>
1-小程序
查看>>
CentOS图形界面和命令行切换
查看>>
HTML5通信机制与html5地理信息定位(gps)
查看>>
Mind_Manager_2
查看>>
手动升级 Confluence - 规划你的升级
查看>>
汽车常识全面介绍 - 悬挂系统
查看>>
电子政务方向:We7.Cloud政府云门户
查看>>
ansible 基本操作(初试)
查看>>
更改tomcat的根目录路径
查看>>
51nod 1292 字符串中的最大值V2(后缀自动机)
查看>>
加快ALTER TABLE 操作速度
查看>>
学习笔记之软考数据库系统工程师教程(第一版)
查看>>
PHP 程序员的技术成长规划
查看>>
memcached 分布式聚类算法
查看>>
jquery css3问卷答题卡翻页动画效果
查看>>
$digest already in progress 解决办法——续
查看>>
虚拟机 centos设置代理上网
查看>>