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

 时间:2024-10-16 01:30:18

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代码来实现,具体如下:<a href="自己的新浪微博地址" target="_blank"><img border="0" src="http://service.t.sina.com.cn/widget/qmd/新浪微博号/f729d6d3/5.png"></a><br></br><a href="自己的GIthub地址"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://github-camo.global.ssl.fastly.net/652c5b9acfaddf3a9c326fa6bde407b87f7be0f4/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png"></a>

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

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

如何定制个性化博客园首页
  • 如何使用CSS相关的属性控制div标签分块显示
  • 钱生钱的这六个法则你知道吗?
  • word里怎样将文档(光标)快速定位到指定页面?
  • 如何在家自己煮一锅耗儿鱼小火锅
  • InDesign设置描边的线条样式
  • 热门搜索
    手抄报国庆70周年 消防手抄报资料 小学生科技手抄报图片 我们的节日中秋节手抄报 教师节手抄报花边 两城同创手抄报 爱国手抄报资料 关于科技的手抄报资料 有关诚信的手抄报 手抄报关于环保