多语言展示
当前在线:448今日阅读:2今日分享:38

如何定制个性化博客园首页

很多技术宅和技术菜鸟(比如小编我)喜欢用博客园记录学习内容,如何让自己博客园首页与众不同,所写文章的排版清晰、多样化且有层次感。今天小怪为大家详细介绍其中的设置方法。
工具/原料
1

电脑一台

2

博客园账号一个

方法/步骤
1

设置页面1、首先打开自己的博客主页,依次选择管理--->设置,这样我们就来到了首页的定制页面啦!2、下面以本人的博客为例为大家展示:

2

页面定制CSS代码定制个性化页面,需要大家能读懂一点CSS代码,当然不懂也没关系,大家可以在网上搜索自己喜欢的代码,本人比较喜欢简洁风格。这里将从正文标题设置、主页导航栏和头部设置给大家介绍。

3

正文标题设置设置后,在编写正文时,设置文字大小和字体,提交后博客的正文将自动排版为设定好的格式和颜色。这里提供一种格式的范例代码供大家参考。只需将一下代码复制到页面定制CSS代码框中即可。/*标题*/#cnblogs_post_body h1 {background: gray !important;background: #406CA4 !important;border-radius: 4px 4px 4px 4px !important;box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);color: #FFFFFF;font-family: "Courier New", "宋体", "黑体", Arial;font-size: 16px;font-weight: bold;margin: 15px 0 !important;padding: 5px 0 5px 20px;}#cnblogs_post_body h2 {    /*background: none repeat scroll 0% 0% rgb(43, 102, 149);*/    border-radius: 6px 6px 6px 6px;    //box-shadow: 0px 0px 0px 1px rgb(95, 90, 75), 1px 1px 6px 1px rgba(10, 10, 0, 0.5);text-shadow: 0 -1px 1px rgba(0,0,0,0.4);    color: #355681;    font-family: "Courier New","宋体","黑体",Arial;    font-size: 14px;    font-weight: bold;    height: 25px;    line-height: 25px;    margin: 15px 0px !important;    padding: 5px 0px 5px 20px;  //  text-shadow: 2px 2px 3px rgb(34, 34, 34);    width: 98%;}#cnblogs_post_body h2 a{   color: rgb(235, 235, 235);}#cnblogs_post_body h2 a:hover{   color: rgb(255, 102, 0);}

4

主页导航栏和头部设置设置后,主页的头部和导航栏会有明显变化。设置原理同上,复制代码即可。这里同样提供一种设置样板。/*****home和头部开始**************************/#home {    margin: 0 auto;    width: 72%;/*原始65*/    min-width: 980px;/*页面的最低宽度,也就是页面顶部的宽度*/    background-color: #fff;    padding: 30px;    margin-top: 50px;    margin-bottom: 50px;    box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);}/*头部导航栏*/#navigator {    font-size:15px;    border-bottom: 1px solid #ededed;    border-top: 1px solid #ededed;    height: 60px;/*导航栏高度,原始50*/    clear: both;    margin-top: 25px;}/*导航栏设置,可以自定义导航栏的目录*/#navList {    min-height: 35px;    float: left;}    #navList li {        /*每一个栏目节点*/        float: left;        margin: 0 5px 0 0; /*这里原来是0 40px 0 0 */    }        #navList a {         /*栏目文字的格式*/        display: block;        width: 5em;        height: 22px;        float: left;        text-align: center;        padding-top: 19px;    }img { max-width: 100%;}

5

设置GitHub访问网址如果各位有其他的微博或者GitHub想要在主页展示,可以通过设置公告栏和页首Html代码来实现,具体如下:

Fork me on GitHub

6

设置后保存设置完毕后一定要点击保存按钮,刷新主页即可看到效果。

注意事项
1

博客园可以设置出漂亮的个性首页,这需要一点点慢慢的耐心测试

2

欢迎一起交流学习,个人经验,仅供参考。

推荐信息