前端小白也能快速学会的博客园博客美化全攻略

目录前端小白也能快速学会的博客园博客美化全攻略美化方法论简介准备工作js权限申请如何模仿一个博客园的自定义风格(样式css 动态效果js)?markdown样式自定义在页面顶部添加“自定义搜索“功能在页面顶部添加“音乐播放器“(Flash)播放背景音乐在页面顶部添加“ForkmeonGithub“图标为导航栏设置渐变背景色在公告栏添加动态文字在公告栏加入自己的社交网络账号-图片链接在公告栏添加一个...

前端小白也能快速学会的博客园博客美化全攻略

目录

  • 前端小白也能快速学会的博客园博客美化全攻略
    • 美化方法论简介
    • 准备工作
      • js权限申请
    • 如何模仿一个博客园的自定义风格(样式css 动态效果js)?
    • markdown样式自定义
    • 在页面顶部添加“自定义搜索“功能
    • 在页面顶部添加“音乐播放器“(Flash)播放背景音乐
    • 在页面顶部添加“Fork me on Github“图标
    • 为导航栏设置渐变背景色
    • 在公告栏添加动态文字
    • 在公告栏加入自己的社交网络账号 - 图片链接
    • 在公告栏添加一个能旋转的rss图标
    • 在公共栏添加“小人时钟“(Flash)
    • 在公共栏添加“站点统计“功能
    • 页面底部添加“回到顶部““收藏““快速评论“功能
    • “自动移动的目录“功能
    • 改进评论的显示样式
    • 在公告栏添加“友情链接“
    • “博客签名“功能
    • 禁用页面的“选中复制“功能
    • 不显示底部广告
    • 修改导航栏(修改部分链接的文字增加下拉菜单)

前端小白也能快速学会的博客园博客美化全攻略

美化方法论简介

一般而言,需要选一个默认的skin,然后在该基础上调整。

官方介绍:
博客皮肤模板 http://skintemplate.cnblogs.com/

宽屏模版:

SimpleMemory
Minyx2_Lite
lessIsMore
BlueSky

组成及对应关系

准备工作

  1. 首先你得有个cnblogs博客
  2. 打开 博客后台管理
  3. 申请js权限
  4. 在博客皮肤选项卡中将博客皮肤设置为: BlueSky
  5. 将 页面定制.css 复制到 页面定制CSS代码 代码框内
  6. 将 页首.html 复制到 页首Html代码 代码框内
  7. 将 页尾.html 复制到 页脚Html代码 代码框内
  8. 保存,即可用

附源码:
yanglr/Beautify-cnblogs: Beautify-cnblogs
https://github.com/yanglr/Beautify-cnblogs

欢迎fork或star~

js权限申请

(需要截图)

登陆后点击“我的博客”——“管理”——“设置”———在下拉后找到“博客侧边栏公告”,后方有一个“申请js权限”。

园子 - 博客园 https://home.cnblogs.com/feed/all/
进博客园首页,发状态@博客园团队,申请开头js权限。

如何模仿一个博客园的自定义风格(样式css 动态效果js)?

模仿一个cnblogs

<link id=“MainCss“ type=“text/css“ rel=“stylesheet“ href=“/skins/LessIsMore/bundle-LessIsMore.css?...“><link type=“text/css“ rel=“stylesheet“ href=“/blog/customcss/198996.css?v=...“>

宽屏模版:
Minyx2_Lite
lessIsMore
BlueSky

补充完整前缀:http://www.cnblogs.com
即可进行模仿。

markdown样式自定义

默认markdown状态下,代码中的字比较小。

/* 文章标题样式(这个不是markdown里的标题) */#topics .postTitle a { /* color: #169fe6; */ font-family: Georgia,Times New Roman,Times,sans-serif, monospace; font-weight: bold;} /* 普通文字样式 */#cnblogs_post_body p { margin: 18px auto; color: #000; font-family: Georgia,Times New Roman,Times,sans-serif, monospace; font-size: 16px; text-indent: 0;} /* 标题样式 */#cnblogs_post_body h1 { font-family: Georgia,Times New Roman,Times,sans-serif, monospace; font-size: 32px; font-weight: bold; line-height: 1.5; margin: 10px 0;}#cnblogs_post_body h2 { font-family: Consolas, “Microsoft YaHei“, monospace; font-size: 26px; font-weight: bold; line-height: 1.5; margin: 20px 0;}#cnblogs_post_body h3 { font-family: Georgia,Times New Roman,Times,sans-serif, monospace; font-size: 20px; font-weight: bold; line-height: 1.5; margin: 10px 0;}#cnblogs_post_body h4 { font-family: Georgia,Times New Roman,Times,sans-serif, monospace; font-size: 18px; font-weight: bold; margin: 10px 0;}/* 标题样式设置结束 */ /* 去除双下划线斜体样式 */em { font-style: normal; color: #000;} /* 无序列表 */#cnblogs_post_body ul li { font-family: Georgia,Times New Roman,Times,sans-serif, monospace; color: #000; font-size: 16px; list-style-type: disc;} /* 有序列表 */#cnblogs_post_body ol li { font-family: Georgia,Times New Roman,Times,sans-serif, monospace; color: #000; font-size: 16px; list-style-type: decimal;} /* 超链接 */#cnblogs_post_body a:link { text-decoration: none; color: #002C99;} /* 引用背景 */#topics .postBody blockquote { background: #fff3d4; border: none; border-left: 5px solid #f6b73c; margin: 0; padding-left: 10px;} /* 单行代码 */.cnblogs-markdown code { font-family: Consolas, “Microsoft YaHei“, monospace !important; font-size: 16px !important; line-height: 20px; background-color: #f5f5f5 !important; border: 1px solid #ccc !important; padding: 0 5px !important; border-radius: 3px !important; line-height: 1.8; margin: 1px 5px; vertical-align: middle; display: inline-block;} /* 多行代码, 引用 */.cnblogs-markdown .hljs { font-family: Consolas, “Microsoft YaHei“, monospace !important; font-size: 16px !important; line-height: 1.5 !important; padding: 5px !important;}

在页面顶部添加“自定义搜索“功能

css部分:

<style type=“text/css“>  #auto_div {  display: none;  width: 257px;  border: 1px #74c0f9 solid;  background: #FFF;  position: absolute;  top: 24px;  left: 0;  margin-top: 15px;  color: #323232;  /*设置显示在当前页面的上一层*/  z-index: 1; }  .side_search {  float: left;  position: relative;  height: 31px;  margin-left: 25px;  display: inline-block; }   .side_search:hover {-webkit-box-shadow: 0 0 3px #999;-moz-box-shadow: 0 0 3px #999  }  .search_input {  width: 210px;  vertical-align: middle;  height: 30px;  line-height: 30px;  border: 1px solid #999;  border-radius: 2px 0 0 2px;  padding: 4px 7px;  background-color: #fbfbfb; }  .delete_btn {  background: #fbfbfb;  margin-left: -6px;  border: 1px solid #fbfbfb;  border-radius: 0 3px 3px 0;  cursor: pointer;  display: inline-block;  vertical-align: middle;  color: red;  font-weight: bold;  width: 38px;  font-size: 25px;  height: 38px;  padding-bottom: inherit; }  .search_btn {  border-radius: 3px 3px 3px 3px;  background: #4d90fe;  margin-left: -7px;  border: 1px solid #4d90fe;  cursor: pointer;  display: inline-block;  vertical-align: middle;  color: #f3f7fc;  font-weight: bold;  width: 100px;  font-size: 18px;  height: 41px; }   .search_btn:hover {background: #1874CD  }  .search_btn2 {  border-radius: 3px 3px 3px 3px;  background: #F0CB85;  border: 1px solid #F0CB85;  cursor: pointer;  display: inline-block;  vertical-align: middle;  color: #DC143C;  font-weight: bold;  width: 100px;  font-size: 18px;  height: 41px; }   .search_btn2:hover {background: #DEB887  }  input, button, textarea, select, optgroup, option {  font-family: inherit;  font-size: inherit;  font-style: inherit;  font-weight: inherit; }</style>

js部分:

html部分:

<h1 “margin-left: 570px;padding-top:15px;padding-bottom: 15px; color: #337ab7;font-size: 3em;font-weight: bold;font-style: italic;text-shadow: 1px 0px 0px #1E90FF;“>  </h1><div class=“side_search“> <input type=“text“ id=“zzk_q“ class=“search_input“ onkeydown=“return zzk_go_enter(event);“ placeholder=“输入 回车搜索“ tabindex=“1“ autofocus x-webkit-speech> <div id=“auto_div“> </div>&nbsp; <input onclick=“quickdelete()“ type=“button“ class=“delete_btn“ value=“�“ title=“清空“> <input onclick=“zzk_go()“ type=“button“ class=“search_btn“ value=“本博搜索“> <input onclick=“zzk_go2()“ type=“button“ class=“search_btn2“ value=“园内搜索“></div>

在页面顶部添加“音乐播放器“(Flash)播放背景音乐

<div “display: table; text-align: cen
源文地址:https://www.guoxiongfei.cn/cntech/9877.html