2023年7月7日发(作者：)

从零开始⾃定义博客园模板 本篇⽂章结合从零开始讲述如何改变博客园的样式。⼀.注册， 开通博客， 然后，给 发送邮件申请JS权限（如果需要⽤到JS代码的话）。进⼊博客， 管理后台-> 选项->控件显⽰设置 勾选需要的模块。这个会影响到本例中的JS代码的实现， 如果按照本例操作，本例的设置为

⼆.本案例的所有修改都是基于原有模板的修改。 我们选择的模板是豪情⼤神制作的也是我个⼈喜欢的⼀个模板：设置⽅法： 管理后台-> 设置->博客⽪肤-> darkgreentrip -> 保存

三.F12 打开浏览器调试⼯具， 查看需要修改元素的相关信息， 你再修改页⾯提交的样式优先级最⾼：管理后台-> 设置->页⾯定制CSS代码-> 修改页⾯的样式；本博客样式主要是隐藏了⼀些不需要的版块，修改了⼀些颜⾊, 内容区域布局的左右互换： 1 #blogTitle 2 { 3 display: none; 4 } 5 #sideBar 6 { 7 float:right; 8 margin-right:20px; 9 }10 #mainContent11 {12 float:left;13 }14 #BlogPostCategory15 {16 dispaly:none;17 }18 #blog_post_info19 {20 display:none;21 }22 .postDesc23 {24 display:none;25 }26 #comment_form27 {28 background: #fff;29 box-shadow: 1px 1px 2px #A7A8AD;30 margin-top:50px;31 border-radius: 7px;32 }33 #blog_post_info_block34 {35 display:none;36 }37 .postTitle a:link, .postTitle a:visited, .postTitle a:active {38 color:#FF0000;39 transition: all 0.4s linear 0s;40 }41 .catListTitle42 {43 ">#FF0000;44 border-bottom:#FF0000;45 } 四插⼊JS代码：管理后台-> 设置-> 页⾸Html代码/页脚Html代码；本博客JS代码主要是将导航栏元素与随笔分类相关联（插⼊到页脚）：

效果图：